nginxを使用して複数のフロントエンドプロジェクトをデプロイする
サーバー上でnginxを使用して複数のフロントエンドプロジェクトのデプロイを実現するための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
server {
listen 80;
server_name a.fly.com;
location / {
root /data/web-a/dist;
index index.html;
}
}
- b.fly.comの構成ファイルを構成します。
vim /usr/nginx/modules/b.conf
server {
listen 80;
server_name b.fly.com;
location / {
root /data/web-b/dist;
index index.html;
}
}
この方法の利点は、ホストがポート80のみを開く必要があることです。その後、アクセスすると、セカンドレベルドメイン名に直接アクセスできます。
ポートベースの構成
構成ファイルは次のとおりです。
- a.fly.comの構成ファイルを構成します。
vim /usr/nginx/modules/a.conf
server {
listen 8000;
location / {
root /data/web-a/dist;
index index.html;
}
}
# nginx 80端口配置 （监听a二级域名）
server {
listen 80;
server_name a.fly.com;
location / {
proxy_pass http://localhost:8000; #转发
}
}
- b.fly.comの構成ファイルを構成します。
vim /usr/nginx/modules/b.conf
server {
listen 8001;
location / {
root /data/web-b/dist;
index index.html;
}
}
# nginx 80端口配置 （监听b二级域名）
server {
listen 80;
server_name b.fly.com;
location / {
proxy_pass http://localhost:8001; #转发
}
}
このようにして合計4台のサーバーが起動されており、構成が最初のサーバーよりもはるかに単純でないため、お勧めできません。
ロケーション構成に基づく
構成ファイルは次のとおりです。
- a.fly.comの構成ファイルを構成します。
vim /usr/nginx/modules/ab.conf
server {
listen 80;
location / {
root /data/web-a/dist;
index index.html;
}
location /web-b {
alias /data/web-b/dist;
index index.html;
}
}
注：このように構成されている場合、場所/ディレクトリはルートであり、他はエイリアスを使用します。
ご覧のとおり、この方法の利点は、サーバーが1つしかないため、セカンドレベルのドメイン名を構成する必要がないことです。そして、フロントエンドプロジェクトで構成するには二级目录
反応構成については、https：//blog.csdn.net/mollerlala/article/details/96427751？depth_1-utm_source = distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2＆utm_source = distribute.pc_relevant.none-task-blogを参照してください。 -BlogCommendFromBaidu-2
Vue構成を参照してください：https : //blog.csdn.net/weixin_33868027/article/details/92139392