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

一、实际场景

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

二、前端工程基本步骤

  • 1、创建2个vue项目,分别为admin-webhotel-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

相关推荐
编程猪猪侠23 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞26 分钟前
mybatis 差异更新法
java·前端·mybatis
程序员JerrySUN1 小时前
Linux系统架构核心全景详解
linux·运维·系统架构
无敌的牛1 小时前
Linux文件理解,基础IO理解
linux·运维·服务器
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
angushine1 小时前
鲲鹏服务器logstash采集nginx日志
运维·服务器·nginx
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api