window nginx 若依部署单端口多前端实践

最新推荐文章于 2025-01-06 21:42:58 发布

十五001

最新推荐文章于 2025-01-06 21:42:58 发布

阅读量284

点赞数 3

分类专栏：若依文章标签： nginx 前端运维

本文链接：https://blog.csdn.net/zwz1342/article/details/139867130

版权

若依专栏收录该内容

4 篇文章 0 订阅

订阅专栏

项目需求

服务器仅开放一个对外端口：70，通过nginx转发请求到两个若依前端实现双应用部署，前端build后第一个应用目录不变，第二个应用目录放到html/app2文件夹中，转发到后端的原应用端口8008不变，新的后端端口为8009。
nginx配置


events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       70;
        server_name  localhost;
		charset utf-8;

		location / {
            alias   F:/nginx-1.24.0/html/;
			try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

		location /app2 {
            alias   F:/nginx-1.24.0/html/app2/;
			try_files $uri $uri/ /app2/index.html;
            index  index.html index.htm;
        }
		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://localhost:8008/;
		}
		location /prod-api2/ {
			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://localhost:8009/;
		}
    }
}

若依前端配置

.env.development文件
	VUE_APP_BASE_API = 'http://localhost:8009'
.env.production文件
	VUE_APP_BASE_API = '/prod-api2'
vue.config.js
	publicPath: process.env.NODE_ENV === "production" ? "/app2" : "/",
router/index.js
    export default new Router({
      mode: 'history', // 去掉url中的#
      base: "/app2/", // 这里加路径
      scrollBehavior: () => ({ y: 0 }),
      routes: constantRoutes
    })
Navbar
	  location.href = '/app2';   // 注销登录这里改成这个