nginx で複数のフロントエンド プロジェクトをデプロイするいくつかの方法

nginx を使用して 1 つのサーバーに複数のフロントエンド プロジェクトをデプロイする 3 つの方法をまとめました。

• ドメイン名ベースの構成
• ポートベースの構成
• 場所の設定に基づいて

始める前に、nginxインストールのデフォルト設定ファイルを見てみましょう: /etc/nginx/nginx.confファイル

図からわかるように、 include /usr/nginx/modules/*.conf 、この文の目的は、nginx の起動時に /usr/nginx/modules/ ディレクトリ内のすべての *.conf ファイルをロードすることです。 したがって、管理の便宜上、このディレクトリの下に独自の xx.conf ファイルを定義することができます。ただし、.conf で終わる必要があることに注意してください。

前置きはここまでにして、多くの企業がオンラインで使用している最も一般的な方法についてお話ししましょう。

ドメイン名ベースの構成

ドメイン名の設定に基づいて、まずドメイン名の解決が設定されていることが前提となります。たとえば、www.fly.com というドメイン名を購入したとします。 次に、バックグラウンドで 2 つの第 2 レベル ドメイン名 (a.fly.com と b.fly.com) を構成しました。

設定ファイルは次のとおりです。

a.fly.com の設定ファイルを設定します。

vim /usr/nginx/modules/a.conf

サーバー{
        聞く 80;
        サーバー名 a.fly.com;
        
        位置 / { 
                ルート /data/web-a/dist;
                インデックス index.html;
        }
}

b.fly.com の設定ファイルを設定します。

vim /usr/nginx/modules/b.conf

サーバー{
        聞く 80;
        サーバー名 b.fly.com;
        
        位置 / { 
                ルート /data/web-b/dist;
                インデックス index.html;
        }
}

この方法の利点は、ホストがポート 80 を開くだけで済むことです。その後、第 2 レベルのドメイン名に直接アクセスすることでアクセスできるようになります。

ポートベースの構成

設定ファイルは次のとおりです。

a.fly.com の設定ファイルを設定します。

vim /usr/nginx/modules/a.conf

サーバー{
        8000を聴く;
        
        位置 / { 
                ルート /data/web-a/dist;
                インデックス index.html;
        }
}

# nginx ポート 80 の設定 (セカンダリドメイン名 a をリッスン)
サーバー{
        聞く 80;
        サーバー名 a.fly.com;
        
        位置 / {
                proxy_pass http://localhost:8000; #転送}
}

b.fly.com の設定ファイルを設定します。

vim /usr/nginx/modules/b.conf

サーバー{
        8001を聴く;
        
        位置 / { 
                ルート /data/web-b/dist;
                インデックス index.html;
        }
}

# nginx ポート 80 の設定 (b セカンダリドメイン名をリッスン)
サーバー{
        聞く 80;
        サーバー名 b.fly.com;
        
        位置 / {
                proxy_pass http://localhost:8001; #転送}
}

ご覧のとおり、この方法では合計 4 台のサーバーが起動し、構成は最初の方法よりもはるかに複雑になるため、お勧めできません。

場所の設定に基づいて

設定ファイルは次のとおりです。

a.fly.com の設定ファイルを設定します。

vim /usr/nginx/modules/ab.conf

サーバー{
        聞く 80;
        
        位置 / { 
                ルート /data/web-a/dist;
                インデックス index.html;
        }
        
        場所 /web-b { 
                エイリアス /data/web-b/dist;
                インデックス index.html;
        }
}

注: このように構成すると、場所/ディレクトリがルートになり、その他はエイリアスを使用する必要があります。

ご覧のとおり、この方法の利点は、サーバーが 1 つだけであり、セカンダリ ドメイン名を構成する必要がないことです。二級目錄はフロントエンドプロジェクトで設定する必要があります

React の設定については、https://blog.csdn.net/mollerlala/article/details/96427751 を参照してください。

vue の設定については、https://blog.csdn.net/weixin_33868027/article/details/92139392 を参照してください。

nginx で複数のフロントエンド プロジェクトをデプロイするいくつかの方法についての記事はこれで終わりです。nginx で複数のフロントエンド プロジェクトをデプロイする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。