テクノロジー NGINX 非公開: Node.js の静的ファイルを提供するように Nginx を構成するにはどうすればよいですか?

Node.js の静的ファイルを提供するように Nginx を構成するにはどうすればよいですか?

Nginx を利用して静的ファイルを提供することで、 Node.js、Socket.io Web アプリケーションのロード時間を高速化します

Node.js は優れた JavaScript ランタイム環境であり、Web アセット全体 ( 静的 + 動的 ) を提供するために使用できます。

小規模な実験的なプロジェクトに取り組んでいる場合はおそらく問題ありませんが、応答時間が懸念される場合は、静的ファイルを提供するため に Node.js の前に Nginx などの Web サーバーを使用することを検討する必要があります。

実際、静的ファイルを提供するためだけでなく、セキュリティの観点からも Nginx を検討する必要があります。

最近、私は Node.js と Socket.io を使用した ツール (ウェブサイト SEO およびセキュリティ アナライザー) に取り組んでおり、Nginx から静的ファイルをオフロードすることで応答時間を大幅に 改善する ことができました。

aws-ポンド
aws-ポンド
aws-ポンド

ご覧のとおり、29 に静的ファイルを Nginx に移動すると、応答時間が 大幅に 短縮されました。

したがって、Node.js を使用して画像、js、CSS、フォントなどを配信している場合は、よく考えて役割を分離することを検討してください。

私がこれをどのように行ったかを見てみましょう。

これは、Nginx と Node.js がインストールされていることを前提としています。問題が発生した場合にロールバックできるように、既存の構成を変更する前にバックアップを作成してください。

  • Nginx がインストールされている場所に移動します (CentOS/Ubuntu などの UNIX ベースの OS のデフォルトは /etc/nginx です)
  • 利用可能なサイトに移動
  • 次のような新しいファイルを作成します (わかりやすいように、ファイルにドメイン名を付けることができます)
 upstream backend {
server localhost:3000;
}

server {
listen 80;
server_name siterelic.com;

root /var/tools/public;

location / {
try_files $uri @backend;
}

location @backend {
proxy_pass http://backend;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# Following is necessary for Websocket support
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}

上記の 5 つの重要なブロックがあるので、1 つずつ見ていきましょう。

  • アップストリーム – 変数を「バックエンド」として指定し、node.js サーバーとポート情報を指定します。例では、localhost:3000 と指定しました。これは、ポート番号 3000 の Nginx などの同じサーバー上で、node.js を実行していることを意味します。
  • サーバー – Nginx がリッスンするポート番号と、ドメイン名としてサーバー名を指定します。
  • ルート – 静的ファイルを提供するディレクトリ。
  • 場所 – これは重要です。 Nginx に、ルートの場所で指定されたディレクトリ内のファイルを検索してみて、一致しない場合は @backend (node.js) に移動するように依頼しています。
  • Location@backend – これは一般的なnode.js+websocket.ioプロキシ構成です。

シンボリックファイルを作成して、 /etc/nginx/sites-enabled でサイトを有効にします。

 cd /etc/nginx/sites-enabled
ln -s /etc/nginx/sites-available/$yourdomainname .

Nginx を再起動して楽しんでください。

上記の構成により、私は 応答時間を大幅に 改善できました。あなたもそうしてほしいと願っています。

Nginx を初めて使用する場合は、 高性能の Nginx サーバーを最初から 構築する方法を学ぶことに興味があるかもしれません。

Node.js の静的ファイルを提供するように Nginx を構成するにはどうすればよいですか?
Node.js の静的ファイルを提供するように Nginx を構成するにはどうすればよいですか?

「 Node.js の静的ファイルを提供するように Nginx を構成するにはどうすればよいですか?」についてわかりやすく解説!絶対に観るべきベスト2動画

Setup Node js app in Nginx web server
NGINX で静的ファイルを提供する

Nginx を利用して静的ファイルを提供することで、 Node.js、Socket.io Web アプリケーションのロード時間を高速化します

Node.js は優れた JavaScript ランタイム環境であり、Web アセット全体 ( 静的 + 動的 ) を提供するために使用できます。

小規模な実験的なプロジェクトに取り組んでいる場合はおそらく問題ありませんが、応答時間が懸念される場合は、静的ファイルを提供するため に Node.js の前に Nginx などの Web サーバーを使用することを検討する必要があります。

実際、静的ファイルを提供するためだけでなく、セキュリティの観点からも Nginx を検討する必要があります。

最近、私は Node.js と Socket.io を使用した ツール (ウェブサイト SEO およびセキュリティ アナライザー) に取り組んでおり、Nginx から静的ファイルをオフロードすることで応答時間を大幅に 改善する ことができました。

aws-ポンド
aws-ポンド
aws-ポンド

ご覧のとおり、29 に静的ファイルを Nginx に移動すると、応答時間が 大幅に 短縮されました。

したがって、Node.js を使用して画像、js、CSS、フォントなどを配信している場合は、よく考えて役割を分離することを検討してください。

私がこれをどのように行ったかを見てみましょう。

これは、Nginx と Node.js がインストールされていることを前提としています。問題が発生した場合にロールバックできるように、既存の構成を変更する前にバックアップを作成してください。

  • Nginx がインストールされている場所に移動します (CentOS/Ubuntu などの UNIX ベースの OS のデフォルトは /etc/nginx です)
  • 利用可能なサイトに移動
  • 次のような新しいファイルを作成します (わかりやすいように、ファイルにドメイン名を付けることができます)
 upstream backend {
server localhost:3000;
}

server {
listen 80;
server_name siterelic.com;

root /var/tools/public;

location / {
try_files $uri @backend;
}

location @backend {
proxy_pass http://backend;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# Following is necessary for Websocket support
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}

上記の 5 つの重要なブロックがあるので、1 つずつ見ていきましょう。

  • アップストリーム – 変数を「バックエンド」として指定し、node.js サーバーとポート情報を指定します。例では、localhost:3000 と指定しました。これは、ポート番号 3000 の Nginx などの同じサーバー上で、node.js を実行していることを意味します。
  • サーバー – Nginx がリッスンするポート番号と、ドメイン名としてサーバー名を指定します。
  • ルート – 静的ファイルを提供するディレクトリ。
  • 場所 – これは重要です。 Nginx に、ルートの場所で指定されたディレクトリ内のファイルを検索してみて、一致しない場合は @backend (node.js) に移動するように依頼しています。
  • Location@backend – これは一般的なnode.js+websocket.ioプロキシ構成です。

シンボリックファイルを作成して、 /etc/nginx/sites-enabled でサイトを有効にします。

 cd /etc/nginx/sites-enabled
ln -s /etc/nginx/sites-available/$yourdomainname .

Nginx を再起動して楽しんでください。

上記の構成により、私は 応答時間を大幅に 改善できました。あなたもそうしてほしいと願っています。

Nginx を初めて使用する場合は、 高性能の Nginx サーバーを最初から 構築する方法を学ぶことに興味があるかもしれません。

Node.js の静的ファイルを提供するように Nginx を構成するにはどうすればよいですか?
Node.js の静的ファイルを提供するように Nginx を構成するにはどうすればよいですか?

「 Node.js の静的ファイルを提供するように Nginx を構成するにはどうすればよいですか?」についてわかりやすく解説!絶対に観るべきベスト2動画

Setup Node js app in Nginx web server
NGINX で静的ファイルを提供する