位置: IT常识 - 正文

Nginx同一端口部署多个前后端分离的vue项目(nginx同一个端口设置两个网站)

编辑：rootadmin

Nginx同一端口部署多个前后端分离的vue项目

推荐整理分享Nginx同一端口部署多个前后端分离的vue项目(nginx同一个端口设置两个网站)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:nginx 两个端口,nginx同一端口代理多个网站,nginx同一个端口设置两个网站,nginx同一端口代理多个服务,nginx一个端口配置多个项目,nginx相同端口映射不同服务,nginx 一个端口多个web应用,nginx同一个端口不同域名如何配置,内容如对您有帮助，希望把文章链接给更多的朋友！

要用nginx容器部署多个前端项目可以采用监听端口，和基于location配置两种方法，我的nginx是使用docker部署的，启动的时候没有开多余的端口，所以采用location配置一个server下根据根路径不同分别代理访问不同项目。下面操练起来，问：把大象放冰箱？总共需要几步：三步！

第一步：Nginx 相关位置代码worker_processes 1;events { worker_connections 1024;}http {client_max_body_size 100m; include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost;charset utf-8;#项目一，同过ip:80直接访问location / { root /home/ruoyi-ui/dist; #dist文件的位置(根据自己dist包放置的位置决定) try_files $uri $uri/ /index.html; index index.html index.htm; }#项目二，同过ip:80/project直接访问location /project { alias /home/zero/dist/;#注意第二个项目路径是alias不是root，通常最佳实际是配置一个项目的根root，其他的文件夹则使用alias，毕竟alias更加灵活 try_files $uri $uri/ /project/index.html; index index.html; }#第一个项目（前后端分离）反向代理来解决跨域问题location /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#后端服务端口地址：proxy_pass http://10.10.11.79:8080/;}#第二个项目（前后端分离）反向代理来解决跨域问题，要与第二个项目vue里面跨域的配置一致，没有跨域问题可以不配置location /zero-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#后端服务端口地址：proxy_pass http://10.10.11.79:8083/;} error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }}

访问的时候是ip:端口号/+你配置的路径：第一个路径时候/，第二个路径是/project

主要是两个地方： 1.第二个local 后面/project 这个名字要与vue项目中 index.js ，vue.config.js配置里面的名称要一样 2.跨域的问题第四个local中location /zero-api/ 这个名字要与vue项目中vue.config.js文件中的跨域那个地方的配置要一致。

第二步：Vue 项目配置文件设置1.修改index.js Nginx同一端口部署多个前后端分离的vue项目(nginx同一个端口设置两个网站)

修改路由，在src目录下找到reouter目录，添加base属性：

base: '/project',

这个地方的名字需要与 nginx.conf 中第二个项目location的/后面的路径名称一致。

2. 修改vue.config.js

修改根目录下的vue.config.js的publicPath路径：

module.exports = { publicPath: "/project'", }

这个地方的名字需要与 nginx.conf 中第二个项目location的/后面的路径名称一致。

3. 处理前后端分离跨域问题

没有跨域需求可以不配，现在都是前后端分离了，用nginx分别代理前端和后端微服务，解决跨越问题。修改vue.config.js：

devServer: { port: 80, //本地项目端口 proxy: { "/zero-api": { // 这个意思是：原先以 /zero-api 开头的请求 target: 'http://10.10.11.79:8083', // 凡是以 /zero-api 开头的请求，通通请求这个服务器 changeOrigin: true, // 允许跨域 } }},