NodeやAngularアプリケーションのためのリバースプロキシとしてのNGINX

1年 ago

陽, 向宇

2 minutes

反対プロキシは、クライアントのためにリソースを1つまたは複数の上流サーバーから取得するサーバーです。通常は、プライベートネットワーク内のファイアウォールの後ろに配置され、クライアントのリクエストをこれらの上流サーバーに転送します。反対プロキシは、ウェブアプリケーションのセキュリティ、パフォーマンス、信頼性を大幅に向上させます。NodeJSやAngularで書かれた多くの現代のウェブアプリケーションは、独自のスタンドアロンサーバーで実行できますが、負荷分散、セキュリティ、高速化といった高度な機能が不足しています。NGINXはその高度な機能を備えており、NodeJSやAngularアプリケーションのリクエストを処理しながら反対プロキシとして動作することができます。

NGINXの逆プロキシサーバー

このチュートリアルでは、NGINXがNodeまたはAngularアプリケーションのリバースプロキシサーバーとしてどのように使用されるかを説明します。以下の図は、リバースプロキシサーバーがどのように機能し、クライアントのリクエストを処理してレスポンスを送信するかを概説しています。

必要な条件 (Hitsuyou na jouken)

You have already installed NGINX by following our tutorial from here.

前提

The NGINX server can be accessed from public domain.
The Node or Angular application will be running in a separate system (upstream server) in a private network and can be reached from NGINX server. Although it is very much possible to do the setups in a single system.
The tutorial makes use of variables like SUBDOMAIN.DOMAIN.TLD and PRIVATE_IP. Replace them with your own values at appropriate places.

NodeJSアプリケーション

もしNGINXがすでに環境にインストールされていると仮定すると、NGINXリバースプロキシを介してアクセスされる例のNodeJSアプリケーションを作成しましょう。まずは、プライベートネットワーク内に存在するシステムでノードの環境をセットアップしてください。

Nodeをインストールしてください。

NodeJSと最新バージョンのnpm（ノードパッケージマネージャー）のインストールを進める前に、既にインストールされているかどうかを確認してください。

# node --version 
# npm --version

もし上記のコマンドでNodeJSとNPMのバージョンが返されたなら、以下のインストール手順はスキップして、例のNodeJSアプリケーションの作成に進んでください。NodeJSとNPMをインストールするには、以下のコマンドを使用してください。

# apt-get install nodejs npm

インストール完了後、Node.jsとNPMのバージョンを再度確認してください。

# node --version
# npm --version

Nodeのアプリケーションの例を作成してください。

NodeJSの環境が整ったら、ExpressJSを使用したサンプルアプリケーションを作成します。したがって、ノードアプリケーションのためのフォルダを作成し、ExpressJSをインストールしてください。

# mkdir node_app  
# cd node_app
# npm install express

好きなテキストエディターを使って、app.jsを作成し、次の内容を追加してください。

# vi app.js
const express = require('express')
const app = express()
app.get('/', (req, res) => res.send('Hello World !'))
app.listen(3000, () => console.log('Node.js app listening on port 3000.'))

以下のコマンドを使用してノードアプリケーションを実行してください。

# node app.js

ローカルホスト上でアプリケーションが動作しているかを確認するために、ポート番号3000に対してカールクエリを実行してください。

# curl localhost:3000
Hello World !

この時点では、NodeJSアプリケーションは上流サーバーで実行されています。最後のステップでは、上記のNodeアプリケーションの逆プロキシとしてのNGINXの設定を行います。今のところ、以下に示す手順に従ってAngularアプリケーションの作成に進みましょう。

Angularアプリケーション

Angularは、TypeScriptを使用してウェブアプリケーションを開発するための別のJavaScriptフレームワークです。一般的に、Angularアプリケーションは、それと一緒に配布されるスタンドアロンサーバーを介してアクセスされます。しかし、プロダクション環境でこのスタンドアロンサーバーを使用することにはいくつかの欠点があるため、Angularアプリケーションの前にリバースプロキシを配置して、より良いサービスを提供します。

Angular環境のセットアップ

AngularはJavaScriptのフレームワークであるため、システムにはNode.jsのバージョンが8.9よりも高い必要があります。そのため、Angular CLIのインストールを進める前に、ターミナルで以下のコマンドを実行して、素早くNode.jsの環境をセットアップしてください。

# curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -
# apt-get install nodejs npm

今、プロジェクトの作成、アプリケーションおよびライブラリのコードの生成をサポートするAngular CLIのインストールを進めましょう。

# npm install -g @angular/cli

Angular環境のセットアップは完了しました。次のステップでは、Angularアプリケーションを作成します。

アンギュラーアプリケーションを作成する

以下のAngular CLIコマンドを使って、Angularアプリケーションを作成してください。

# ng new angular-app

新たに作成されたAngularディレクトリに変更し、ホスト名とポート番号を指定してウェブアプリケーションを実行してください。

# cd angular-app
# ng serve --host PRIVATE_IP --port 3000

ローカルホストでAngularアプリケーションが実行されているかを確認するために、ポート番号3000に対してcurlクエリを実行してください。

# curl PRIVATE_IP:3000

この時点で、Angularアプリケーションはアップストリームサーバーで実行されています。次のステップでは、上記のAngularアプリケーションのリバースプロキシとしてNGINXを設定します。

NGINXを逆プロキシとして設定します。

NGINXの仮想ホスト設定ディレクトリへ移動し、リバースプロキシとして機能するサーバーブロックを作成します。以前にNGINXをインストールしたシステムはインターネット経由でアクセスできるため、公開IPがシステムに関連付けられています。

# cd /etc/nginx/sites-available
# vi node_or_angular_app.conf

server {  
              listen 80;
              server_name SUBDOMAIN.DOMAIN.TLD;
              location / {  
                           proxy_pass https://PRIVATE_IP:3000;  
                           proxy_http_version 1.1;  
                           proxy_set_header Upgrade $http_upgrade;  
                           proxy_set_header Connection 'upgrade';  
                           proxy_set_header Host $host;  
                           proxy_cache_bypass $http_upgrade;  
               }  
}

上記の設定で使用されているproxy_passディレクティブにより、サーバーブロックはリバースプロキシになります。サブドメイン.SUBDOMAIN.DOMAIN.TLDに送信されるすべてのトラフィックとルートの場所ブロック（/）に一致するものは、nodeまたはangularアプリケーションが実行されているhttps://PRIVATE_IP:3000に転送されます。

NodeJSとAngularアプリの両方に対応するNGINXリバースプロキシは可能ですか？

上記のサーバーブロックは、ノードアプリケーションまたはAngularアプリケーションの逆プロキシとして機能します。NGINXリバースプロキシを使用してノードとAngularアプリケーションを同時に提供するためには、同じシステムを使用する場合は2つの異なるポート番号で実行するだけです。ノードとAngularアプリケーションを実行するためには、別々のアップストリームサーバーを使用することも可能です。さらに、server_nameとproxy_pass指示文に一致する値を持つ別のNGINXサーバーブロックを作成する必要があります。推奨読み物：NGINX設定ファイルの理解。上記のサーバーブロックに構文エラーがないか確認し、同じものを有効にします。最後に、新しい設定を適用するためにNGINXをリロードしてください。

# nginx -t
# cd /etc/nginx/sites-enabled
# ln -s ../sites-available/node_or_angular_app.conf .
# systemctl reload nginx

お気に入りのウェブブラウザをhttps://SUBDOMAIN.DOMAIN.TLDに向けて、NodeやAngularアプリケーションからのウェルカムメッセージが表示されます。

要約する

NodeJSまたはAngularアプリケーションのためのNGINXリバースプロキシの設定は以上です。次に、無料のLet’s Encrypt SSL証明書を追加してアプリケーションをセキュアにすることができます。