nginx一个域名下部署多套前端项目

一、实际场景

1、现在前端创建了2个vue工程,分别为管理系统admin，另外一个是给酒店使用的管理系统hotel，另外一个是公司官网，一起是3个项目现在要部署上线，解决办法有2种方案
- 一个域名下来做官网，创建2个二级域名分别用于管理系统和酒店系统，(这个比较简单)
- 一个域名下部署几套项目，(今天主要介绍这个方式)
2、我们希望的访问方式
- https://xxx/admin/login访问的是管理系统
- https://xxx/hotel/login访问的酒店的管理系统

二、前端工程基本步骤

1、创建2个vue项目，分别为admin-web和hotel-web
2、现在以hotel-web系统为例
3、在.env.development、.env.sit、.env.production几个环境中都加上一个环境变量
properties 复制代码
```
VITE_BASE_PATH = "hotel"
```

4、在vite.config.js修改配置

js 复制代码

import path from 'path';
import { defineConfig, loadEnv } from 'vite';
// https://vitejs.dev/config/

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd()); // --> 配置
  return defineConfig({
    publicDir: 'static',
    base: env.VITE_BASE_PATH, // --> 配置
    server: { 
      host: '0.0.0.0', // 允许外部访问
      port: 5000, // 可选：指定端口号，默认是3000
      strictPort: true, // 可选：如果指定端口被占用，直接退出而非选择一个空闲端口
    },
    // 省去别的配置
  })
}

5、在路由文件中使用全局变量

javascript 复制代码

const router = createRouter({
  history: createWebHashHistory(import.meta.env.VITE_BASE_PATH), // -->这个地方
  routes,
  scrollBehavior() {
    return { top: 0 };
  },
});

6、现在运行前端工程的地址为:http://localhost:5000/hotel

7、打包

json 复制代码

"scripts": {
    "dev": "vite --mode development",
    "dev:sit": "vite --mode sit",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "build:sit": "vite build --mode sit",
    "build:uat": "vite build --mode uat",
    "build:pro": "vite build --mode production",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
    "prepare": "husky install",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.config.js"
  }

8、同理如果是admin的直接把VITE_BASE_PATH = "admin"就可以,官网的就改成VITE_BASE_PATH = "/"

三、在`nginx`中修改配置

1、自己安装nginx
2、找到配置文件

3、配置nginx文件

properties 复制代码

server {
	listen 80 default_server;
	listen [::]:80 default_server;

	server_name _;
	# 官网地址
	location / {
		try_files $uri $uri/ =404;
		index index.html index.htm index.nginx-debian.html;
		root /home/html;
	}
	# 管理系统
	location /admin {
		alias /home/admin-web/;
		index index.html index.htm;
		try_files $uri $uri/ /admin/index.html;
	}
	# 酒店系统
	location /hotel {
		alias /home/hotel-web/;
		index index.html index.htm;
		try_files $uri $uri/ /hotel/index.html;
	}
	
	# 静态文件
	location /hotel/static {
  		alias /home/hotel-api/static;
  	}
	location /admin/static {
  		alias /home/admin-api/static;
  	}
  	# 管理系统后端接口
	location /api/v1/admin {
        proxy_pass http://127.0.0.1:8888/api/v1/admin;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;
        add_header X-Cache $upstream_cache_status;
        proxy_set_header X-Host $host:$server_port;
        proxy_set_header X-Scheme $scheme;
        proxy_connect_timeout 30s;
        proxy_read_timeout 86400s;
        proxy_send_timeout 30s;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    # 酒店系统后端接口
	location /api/v1/hotel {
        proxy_pass http://127.0.0.1:8889/api/v1/hotel;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;
        add_header X-Cache $upstream_cache_status;
        proxy_set_header X-Host $host:$server_port;
        proxy_set_header X-Scheme $scheme;
        proxy_connect_timeout 30s;
        proxy_read_timeout 86400s;
        proxy_send_timeout 30s;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

4、重启nginx

nginx一个域名下部署多套前端项目

一、实际场景

二、前端工程基本步骤

三、在nginx中修改配置

三、在`nginx`中修改配置