フロントエンド開発者必需品: Nginx はフロントエンドプロジェクトをデプロイして、Web アプリケーションを迅速、安定、安全に実行できるようにします。

記事ディレクトリ

Nginx は、フロントエンドプロジェクトの展開、静的ファイルサービス、負荷分散、キャッシュ、その他の機能の提供に使用できる、高性能 HTTP およびリバースプロキシサーバーです。この記事では、Nginx を使用してフロントエンドプロジェクトをデプロイする方法を紹介します。

1.Nginxをインストールする

まず、Nginx をインストールする必要があります。Nginx は、ソースコードを通じてコンパイルしてインストールすることも、パッケージマネージャーを通じてインストールすることもできます。たとえば、次のコマンドを使用して Ubuntu にインストールできます。

sudo apt-get update
sudo apt-get install nginx

インストールしたら、次のコマンドで Nginx を起動できます。

sudo systemctl start nginx

2. Nginxの設定

Nginx の設定ファイルは /etc/nginx/nginx.conf にあり、テキストエディタで開いて編集できます。変更が必要な構成項目は次のとおりです。

サーバー: クライアント要求を処理する仮想ホストを定義します。
location: リクエストの URL パスと対応する処理メソッドを定義します。
root: Web サイトのルートディレクトリ (フロントエンドプロジェクトのパッケージ出力ディレクトリ) を指定します。

たとえば、次は単純な Nginx 構成ファイルです。

http {
    server {
        listen 80;
        server_name example.com;

        location / {
            root /var/www/example/dist;
            index index.html;
        }
    }
}

上記の構成では、ポート 80 が監視されており、example.com をリクエストすると、リクエストは /var/www/example/dist ディレクトリに転送され、index.html ファイルが返されます。

3. フロントエンドプロジェクトをパッケージ化する

フロントエンドプロジェクトをデプロイする前に、まずパッケージ化する必要があります。通常、フロントエンドプロジェクトは、Webpack などのツールを使用してパッケージ化され、ソースコードを静的ファイルに変換します。パッケージ化されたファイルは通常、dist ディレクトリに保存されます。

4. フロントエンドプロジェクトをデプロイする

パッケージ化されたフロントエンドプロジェクトファイルを、Nginx によって指定された Web サイトのルートディレクトリ (上記の構成ファイルの /var/www/example/dist ディレクトリなど) にコピーします。ブラウザで example.com にアクセスして、フロントエンドプロジェクトのページを表示します。

5.HTTPS設定

安全なアクセスを提供するために HTTPS プロトコルを使用する必要がある場合は、HTTPS を構成する必要があります。以下は、単純な HTTPS 構成の例です。

http {
    server {
        listen 80;
        server_name example.com;

        location / {
            root /var/www/example/dist;
            index index.html;
        }

        return 301 https://$server_name$request_uri;
    }

    server {
        listen 443 ssl;
        server_name example.com;

        ssl_certificate /path/to/cert.pem;
        ssl_certificate_key /path/to/key.pem;

        location / {
            root /var/www/example/dist;
            index index.html;
        }
    }
}

上記の構成では、ポート 80 が最初にリッスンされ、HTTP リクエストは HTTPS プロトコルにリダイレクトされます。次に、ポート 443 でリッスンし、SSL 証明書を使用して HTTPS サービスを提供します。

SSL 証明書は CA から購入するか、自分で生成する必要があり、Certbot などのツールを使用して無料の証明書を自動的に取得できることに注意してください。さらに、HTTPS サービスへの外部アクセスを許可するには、ファイアウォールのポート 443 を開く必要があります。

6. 負荷分散

フロントエンドプロジェクトが多数の同時リクエストを処理する必要がある場合、単一の Nginx インスタンスでは需要を満たすことができない可能性があります。このとき、Nginx の負荷分散機能を使用してリクエストを複数の Nginx インスタンスに分散し、システムのパフォーマンスと可用性を向上させることができます。

以下は、単純な負荷分散構成の例です。

http {
    upstream backend {
        server 127.0.0.1:8080;
        server 127.0.0.1:8081;
        server 127.0.0.1:8082;
    }

    server {
        listen 80;
        server_name example.com;

        location / {
            proxy_pass http://backend;
        }
    }
}

上記の構成では、upstream を使用して、3 つの Nginx インスタンスを含む backend という名前の負荷分散サーバーグループを定義します。次に、サーバーで proxy_pass を使用して、バックエンドグループ内の任意の Nginx インスタンスにリクエストを転送します。

負荷分散の構成では、リクエストが各インスタンスに正しく分散され、セッション情報がインスタンス間で正しく共有されることを保証するために、複数の Nginx インスタンス間のセッション保持とリクエスト転送戦略を考慮する必要があることに注意してください。

7. キャッシング

Nginx はキャッシュサーバーとしても機能し、アプリケーションのパフォーマンスを向上させます。アプリケーションが静的リソースまたは動的ページを処理する場合、Nginx はこれらのリソースをキャッシュして、計算の繰り返しやネットワーク送信を回避できます。

単純なキャッシュ構成の例を次に示します。

http {
    proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m inactive=60m;
    
    server {
        listen 80;
        server_name example.com;

        location / {
            proxy_pass http://backend;
            proxy_cache my_cache;
            proxy_cache_valid 200 60m;
        }
    }
}

上記の構成では、proxy_cache_path を使用して my_cache という名前のキャッシュパスを定義し、キャッシュの有効期限は 60 分に設定されています。次に、サーバーの場所で proxy_cache を使用して my_cache キャッシュグループの使用を指定し、proxy_cache_valid を使用してキャッシュの有効期間を設定します。

キャッシュ構成では、キャッシュデータの期限切れや悪用を防ぐために、キャッシュのクリーンアップと更新戦略を考慮する必要があることに注意してください。

要約する

この記事では、リバースプロキシ、静的ファイルサービング、動的コンテンツアクセラレーション、HTTP キャッシュ、HTTPS セキュアアクセス、ロードバランシング、キャッシュを含む、Nginx の 7 つの一般的な用途を紹介します。これらの使用法は、Nginx の効率的なネットワーク I/O モデルと柔軟な構成言語に基づいており、開発者が Web アプリケーションのパフォーマンスと可用性をより適切に最適化するのに役立ちます。