nginx部署多個前端vue項目，有3種方式

• 1. 域名配置
• 2. 端口配置
• 3. location配置

首先我們看一下nginx.conf配置文件

116ffee592ee028b88a06c0862d62e2.png

為了方便管理菲语，在/usr/local/nginx/conf.d/ 創(chuàng)建自己的*.conf配置文件妄辩。沒有conf.d目錄，直接mkdir 創(chuàng)建conf.d
*.conf 詳細可參考：

server {
    listen       80;
    server_name 192.168.5.110;  #項目域名
    root /z/workspace/builduis/web-a/dist;  #vue項目打包后的dist
    location / {
        try_files $uri $uri/ /index.html; #解決頁面刷新404問題                    
        index index.html;
    }

    location /prod-api/ { #后端服務(wù)
         proxy_pass http://192.168.5.110:8080/;
         proxy_set_header   X-Forwarded-Proto $scheme;
         proxy_set_header   X-Real-IP         $remote_addr;
         proxy_connect_timeout 600;
         proxy_read_timeout 600;
         proxy_send_timeout 600;
         proxy_buffer_size 64k;
         proxy_buffers   4 32k;
         proxy_busy_buffers_size 64k;
         proxy_temp_file_write_size 64k;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

域名配置

一級域名 www.web.com 山上， 后臺配置2個二級域名：a.web.com眼耀、b.web.com

• vim /usr/local/nginx/conf.d/web-a.conf

server {
        listen 80;
        server_name a.web.com;
        
        location / { 
                root /z/workspace/builduis/web-a/dist;
                index index.html;
        }
}

• vim /usr/local/nginx/conf.d/web-b.conf

server {
        listen 80;
        server_name b.web.com;
        
        location / { 
                root /z/workspace/builduis/web-b/dist;
                index index.html;
        }
}

這種方式只需要開放80端口，然后訪問二級域名佩憾。

端口配置

• web-a.conf

server {
        listen 8000;
        server_name 192.168.5.110;
        location / { 
                root /z/workspace/builduis/web-a/dist;
                index index.html;
        }
}

# nginx 80端口配置 （監(jiān)聽a二級域名）
server {
        listen  80;
        server_name 192.168.5.110;
        location / {
                proxy_pass http://localhost:8000; #轉(zhuǎn)發(fā)
        }
}

• web-b.conf

server {
        listen 8001;
        server_name 192.168.5.110;
        location / { 
                root /z/workspace/builduis/web-b/dist;
                index index.html;
        }
}

# nginx 80端口配置 （監(jiān)聽b二級域名）
server {
        listen  80;
        server_name 192.168.5.110;
        location / {
                proxy_pass http://localhost:8001; #轉(zhuǎn)發(fā)
        }
}

location配置

server {
    listen       80;
    server_name 192.168.5.110;  #項目域名

    location /admin {
        alias /z/workspace/builduis/ruoyi/admin;  #vue項目打包后的dist
        try_files $uri $uri/ /admin/index.html; #解決頁面刷新404問題                    
        index index.html;
    }
     location /prod-api/ {
         proxy_pass http://127.0.0.1:8080/;
         proxy_set_header   X-Forwarded-Proto $scheme;
         proxy_set_header   X-Real-IP         $remote_addr;
         proxy_connect_timeout 600;
         proxy_read_timeout 600;
         proxy_send_timeout 600;
         proxy_buffer_size 64k;
         proxy_buffers   4 32k;
         proxy_busy_buffers_size 64k;
         proxy_temp_file_write_size 64k;
    }

    location /travel {
        alias /z/workspace/builduis/device/travel;
        try_files $uri $uri/ /travel/index.html; #解決頁面刷新404問題
        index index.html;
    }
     location /test-api/ {
         proxy_pass http://127.0.0.1:8098/;
         proxy_set_header   X-Forwarded-Proto $scheme;
         proxy_set_header   X-Real-IP         $remote_addr;
         proxy_connect_timeout 600;
         proxy_read_timeout 600;
         proxy_send_timeout 600;
         proxy_buffer_size 64k;
         proxy_buffers   4 32k;
         proxy_busy_buffers_size 64k;
         proxy_temp_file_write_size 64k;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

這種方式配置的話哮伟，location / 目錄是root，其他的要使用alias妄帘。并且兩個項目放在一個*.conf里面

這種方式的好處是只有一個server ,而且不需要二級域名楞黄、用路徑location就能實現(xiàn)。

但是這種方式的一個缺點寄摆，就是vue項目前端需要改配置谅辣。修改地方如下：

• vue.config.js

  
  
  image.png
  
  

  index.js

  
  
  image.png

react 配置請參考： 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