使用nginx实现一个端口和ip访问多个vue前端

前言:由于安全组要求,前端页面只开放一个端口,但是项目有多个前端,此前一直使用的是一个前端使用单独一个端口进行访问,现在需要调整。

需要实现:这里以80端口为例,两个前端分别是:project1,project2。

例如:访问项目1:192.168.1.10:80/project1

访问项目2:192.168.1.10:80/project2

需要的配置:1、nginx配置;2、vue前端代码修改

1、nginx配置

server {
        listen       80;
        server_name  localhost;
        charset utf-8;
        
        # 配置默认访问前端
        location / {
            root /usr/local/html/project1/dist/;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        
        # 项目2前端
        location /project2{
            alias /usr/local/html/project2/dist/;
            index index.html;
            try_files $uri $uri/ /project2/index.html;
        }

        # 项目1前端
        location /project1{
            alias /usr/local/html/project1/dist/;
            index index.html;
            try_files $uri $uri/ /project1/index.html;
        }

        # 项目1-api接口地址代理
        location /project1-prod-api/ {
            if ($request_method = OPTIONS ) {
               add_header Access-Control-Allow-Origin *;
               add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
               add_header Access-Control-Allow-Headers *;
               return 200;
            }
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_buffer_size 128k;
            proxy_buffers 32 32k;
            proxy_busy_buffers_size 128k;

            proxy_pass http://192.168.1.10:8080/;
        }

        # 项目2-api接口地址代理
        location /project2-prod-api/ {
            if ($request_method = OPTIONS ) {
               add_header Access-Control-Allow-Origin *;
               add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
               add_header Access-Control-Allow-Headers *;
               return 200;
            }
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_buffer_size 128k;
            proxy_buffers 32 32k;
            proxy_busy_buffers_size 128k;

            proxy_pass http://192.168.1.10:8081/;
        }
}

2、vue前端代码修改

两个项目的vue代码均要修改

修改文件:在项目根目录:.env.production

# 页面标题
VUE_APP_TITLE = 某某平台

# 生产环境配置
ENV = 'production'

# 生产环境
VUE_APP_BASE_API = '/project1-prod-api'

在项目根目录:vue.config.js

修改publicPath参数

3、验证修改

重新打包构建vue前端代码,修改nginx配置,并重启nginx,防火墙允许nginx配置的端口。

 

相关推荐

  1. Nginx/域名同时使用80端口

    2024-07-23 06:38:01       32 阅读
  2. 前端vue部署nginx端口文件配置

    2024-07-23 06:38:01       50 阅读
  3. nginx配置(前端

    2024-07-23 06:38:01       31 阅读
  4. Ruoyi-Vue前端部署-nginx部署vue前端项目

    2024-07-23 06:38:01       31 阅读
  5. Nginx配置前端项目

    2024-07-23 06:38:01       27 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-23 06:38:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-23 06:38:01       101 阅读
  3. 在Django里面运行非项目文件

    2024-07-23 06:38:01       82 阅读
  4. Python语言-面向对象

    2024-07-23 06:38:01       91 阅读

热门阅读

  1. 寻访安康茶韵,共筑乡村振兴

    2024-07-23 06:38:01       22 阅读
  2. 什么是服务器带宽

    2024-07-23 06:38:01       21 阅读
  3. 在VS IDE中搜索所有带有中文的字符串

    2024-07-23 06:38:01       24 阅读
  4. Python面试整理-字符串处理

    2024-07-23 06:38:01       18 阅读
  5. SQL中的函数

    2024-07-23 06:38:01       23 阅读
  6. Logback 配置文件加载步骤

    2024-07-23 06:38:01       21 阅读
  7. Ubuntu 20.04搭建OpenCV 4.5.0 & C++环境

    2024-07-23 06:38:01       19 阅读
  8. 定制Mojo模型的魔法:特征转换的艺术

    2024-07-23 06:38:01       26 阅读
  9. 自定义预测逻辑:Mojo模型的高级应用

    2024-07-23 06:38:01       24 阅读
  10. Mojo模型动态批处理:智能预测的终极武器

    2024-07-23 06:38:01       23 阅读