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几个环境中都加上一个环境变量

  VITE_BASE_PATH = "hotel"

• 4、在vite.config.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、在路由文件中使用全局变量

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

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

• 7、打包

  "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文件

  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