NGINX中單設(shè)置一個web前端很容易，改變端口蠢涝，改變root指向基本就搞定了玄呛，那么，假設(shè)我們有多個前端項目部署在同一個域名下和二，該怎么設(shè)置呢徘铝？
先假設(shè)我們有一個應(yīng)用，http://domain就可以訪問了， 現(xiàn)在改版了希望可以訪問舊的應(yīng)用http://domain惕它，同時也可以通過http://domain/new訪問新應(yīng)用怕午，那么首先第一步就是需要對新的前端項目進行一些配置。
a. 在vue.config.js中設(shè)置 publicPath: '/new/',
b. 在路由index.js中設(shè)置 base:'/new/',
c. 在index.html中加入<meta base=/new/>修改NGINX設(shè)置淹魄，基本就是使location /指向原來的web前端郁惜， location /new指向新的web前端
a. 先在NGINX目錄下/usr/share/nginx/html 創(chuàng)建新的文件夾new,把新項目的static,index.html放置于new目錄，注意不是dist放到new目錄
new 目錄結(jié)構(gòu)
b. vim /etc/nginx/nginx.conf甲锡，修改server 部份
#For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/
#user nginx;
user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
#include /etc/nginx/conf.d/*.conf;
server {
listen 8099;
server_name localhost;
#此為nginx本身index目錄
#root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
此為舊應(yīng)用index,static目錄
root /usr/share/nginx/html/dist;
try_files $uri $uri/ @router;
index index.html index.htm;
}
location /new {
#此為新應(yīng)用index,static目錄兆蕉，同時注意這里是alias,不是root，還有以及new的后面有/結(jié)尾
alias /usr/share/nginx/html/new/;
try_files $uri $uri/ /new/index.html;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
# Settings for a TLS enabled server.
#
# server {
# listen 443 ssl http2 default_server;
# listen [::]:443 ssl http2 default_server;
# server_name _;
# root /usr/share/nginx/html;
#
# ssl_certificate "/etc/pki/nginx/server.crt";
# ssl_certificate_key "/etc/pki/nginx/private/server.key";
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 10m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
#
# # Load configuration files for the default server block.
# include /etc/nginx/default.d/*.conf;
#
# location / {
# }
#
# error_page 404 /404.html;
# location = /40x.html {
# }
#
# error_page 500 502 503 504 /50x.html;
# location = /50x.html {
# }
# }
}
c. /usr/sbin/nginx -t 驗證conf文件是否配置正確
d. /usr/sbin/nginx -s reload 重新加載NGINX配置生效
3. 最后通過http://localhost:8099就能訪問到舊前端缤沦，而通過http://localhost:8099/new就能訪問到新前端
網(wǎng)上有其他很多寫的NGINX反向代理部署多個前端虎韵，其前提應(yīng)該是這個應(yīng)用都已經(jīng)可以正常訪問，只不過是在某個域和端口進行轉(zhuǎn)發(fā)疚俱，使用戶訪問方便劝术。
在些過程中遇到的一些問題：
- 一開始只對NGINX進行了設(shè)置，在new文件夾下放了一個index.html,這樣只能訪問到index,而不能訪問到新的項目呆奕，因為一些編譯好的文件路徑不對养晋，導致沒法加載
- 404錯誤，一般來說就是配置和真實的路徑不符合
- 設(shè)置多個前端的時候需要把原來默認的全局ROOT 路徑注釋掉
- 注意每行設(shè)置最后的分號梁钾，反正我自己好幾次忘了
- 重啟NGINX可能發(fā)生的錯誤：
a. nginx[13499]: nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)绳泉，使用 netstat -ntpl或者ps -ef | grep nginx找到相應(yīng)進程，然后kill 進程ID
b. nginx start failed,pid找不到姆泻， ./nginx -c -/etc/nginx/nginx.conf
