Nginx一个端口代理多个vue项目,通过不同路由转到不同系统,反向代理Apache进行文件处理

需求:由于一些因素限制,需要尽可能的少开放外部端口访问,这里将多个vue项目通过一个nginx端口进行代理,由不同的路由来确定访问哪些项目,apache同理

nginx代理多个vue项目

安装和配置nginx的基础教程这里就不写了,网上一搜很多,遇到这个问题代表一些基础的nginx应用肯定没有问题,话不多说,开整:

  1. 首先我们需要调整vue的打包配置,涉及修改vue.config.js 和 router配置
    vue2 - webpack打包修改打包配置文件,修改项目的根路径,因为在nginx增加了一层这里也需要调整一下根路径,默认是/
    修改打包配置
    vue3 - vite打包需要修改vite.config.ts文件中内容,如果没引入ts就是vite.config.js
    在这里插入图片描述

    修改router配置,不填写默认base是/,添加了以后会在所有的路由前面都加上/vehicle/,例如登录页面xxxx:8080/#/login会被代理为xxx:8080/vehicle/#/login
    mode:history代表history路由不再显示#
    修改router配置
    注意:二者添加的内容必须相同,并且要保持和配置nginx的配置地址一致

  2. 修改nginx配置
    在这里插入图片描述
    这里二级项目一定要使用alias来指定vue包路径

    nginx配置文件修改以后不要忘记使用 nginx -s reload重新加载一下配置文件,否则是不生效的

apache由nginx代理,与vue项目公用端口

这个修改起来比较简单,修改一下nginx的配置文件即可
在这里插入图片描述
这里/upload-download/ 改为你自己想要的路径即可

location /upload-download/ {# Apache服务器的地址proxy_pass http://127.0.0.1:7770/;# 传递请求头给Apache  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 X-Forwarded-Proto $scheme;
}

此时就可以通过xxxx:8080/upload-download/来访问apache

注意不要少写了反斜线,线上的如果加了ssl需要修改为https://127.0.0.1:7770/

今天就写到这里,有什么问题感谢评论或者私信指正,转发请注明出处

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/20190.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

thinkphp6 queue队列的maxTries自定义

前景需求:在我们用队列的时候发现maxtries的个数时255次,这个太影响其他队列任务 我目前使用的thinkphp版本是6.1 第一部定义一个新的类 CustomDataBase(我用的mysql数据库存放的队列) 重写__make 和createPlainPayload方法 …

前端功能拖拽篇:dragleave拖拽事件穿透子元素的优雅解决方案

文章目录 前情提要应用场景⭐拖拽改变元素位置⭐拖拽改变目标区域的样式⭐dragleave拖拽事件穿透子元素的优雅解决方案 最后 前情提要 在前端工作过程中,避免不了要接触各种技术,拖拽就是其中一个,大部分关于拖拽的基础知识和Demo都在MDN中写…

linux网络时间同步:使用NTP服务时间同步

文章目录 引言I 安装ntp1.1 启动ntp服务1.2 修改ntp.conf文件1.3 检查同步状态1.4 修改时间同步频率II 修复centos yum问题 :cannot find a valid baseurl for repoIII systemctl: command not found3.1 使用service控制防火墙3.2 systemctl相关命令IV windows网络时间同步4.1…

day-36 删除链表的倒数第 N 个结点

思路 首先计算出链表的长度,然后删除第n个节点即可,但要注意考虑特殊情况 解题方法 特殊情况:1.删除节点为最后一个节点 2.删除节点为头结点 Code /*** Definition for singly-linked list.* public class ListNode {* int val;* …

Go-知识并发控制Context

Go-知识并发控制Context 1. 介绍2. 实现原理2.1 接口定义2.2 Deadline()2.3 Done()2.4 Err()2.5 Value() 3. 空 context4. cancelCtx4.1 Done()4.2 Err()4.3 cancel()4.4 WithCancel4.5 例子4.6 总结 5. timerCtx5.1 Deadline5.2 cancel5.3 WithDeadline5.4 WithTimeout5.5 例子…

HTML+CSS+JS 熊猫登录表单

效果演示 实现了一个可爱的熊猫登录界面,页面背景使用了渐变色,熊猫的头部和身体使用了圆形和椭圆形的边框,使用了CSS的伪元素和阴影效果来实现熊猫的手和脚。登录框使用了flex布局,包括用户名和密码的输入框和登录按钮,使用了CSS的过渡效果和伪类来实现输入框的动态效果。…

【LeetCode刷题】二分查找:山脉数组的峰顶索引、寻找峰值

【LeetCode刷题】Day 13 题目1:852.山脉数组的峰顶索引思路分析:思路1:暴力枚举O(N)思路2:二分查找O(logN) 题目2:162.寻找峰值思路分析:思路1:二分查找O(logN) 题目1:852.山脉数组的…

(二刷)代码随想录第15天|层序遍历 226.翻转二叉树 101.对称二叉树2

层序遍历 10 102. 二叉树的层序遍历 - 力扣&#xff08;LeetCode&#xff09; 代码随想录 (programmercarl.com) 综合代码&#xff1a; class Solution{public List<List<Integer>> resList new ArrayList<List<Integer>>();public List<List<…

QT窗口类型以及非模态窗口如何显示在顶层

一、 模态对话框 在弹出模态对话框时&#xff0c;除了该对话框整个应用程序窗口都无法接受用户响应&#xff0c;处于等待状态&#xff0c;直到模态对话框被关闭 使用exec 打开 非模态对话框 又叫做无模式对话框&#xff0c;即弹出非模态对话框时&#xff0c;用户仍然可以…

探索Web前端三大主流框架:React,Angular和Vue.js

在当今的Web开发领域&#xff0c;前端框架已成为构建响应式和交互式网页的基础。这些框架不仅提高了开发效率&#xff0c;还促进了代码的模块化和重用。其中&#xff0c;React&#xff0c;Angular和Vue.js是最受欢迎的三大主流前端框架&#xff0c;它们分别由Facebook&#xff…

2024华为OD机试真题-剩余银饰的重量-C++(C卷D卷)

题目描述 有 N 块二手市场收集的银饰,每块银饰的重量都是正整数,收集到的银饰会被熔化用于打造新的饰品。 每一回合,从中选出三块 最重的 银饰,然后一起熔掉。假设银饰的重量分别为 x 、y 和 z, 且 x <= y <= z。那么熔掉的可能结果如下: 如果x == y == z,那么三…

24年海南三支一扶报名流程步骤详解

一、考试时间安排&#xff1a; 报名时间&#xff1a;6月1日8:00至6月7日18:00 准考证打印时间&#xff1a;6月17日8:00 考试时间&#xff1a;6月22日 二、招聘人数 海南省计划招募390名高校毕业生 三、笔试内容&#xff1a; 笔试内容&#xff1a;综合能力和素质&#xff08;满分…

排队论 | 基于排队机制实现智能仓储机器人巡逻及避碰

研究背景: 智能仓储机器人在现代物流行业中扮演着重要的角色,能够提高仓库的运作效率和准确性。然而,仓储机器人在巡逻过程中可能会遇到其他机器人或障碍物,这就需要解决排队和避碰问题,以确保安全和高效的运作。 研究路线: 背景调研:了解智能仓储机器人的发展和应用…

【设计模式】JAVA Design Patterns——Iterator(迭代器模式)

&#x1f50d;目的 提供一种在不暴露其基础表示的情况下顺序访问聚合对象的元素的方法。 &#x1f50d;解释 真实世界例子 百宝箱包含一组魔法物品。有多种物品&#xff0c;例如戒指&#xff0c;药水和武器。可以使用藏宝箱提供的迭代器按类型浏览商品。 通俗描述 容器可以提供…

使用 .NET Core 实现微服务(带例子)

使用 .NET Core 实现微服务 使用 .NET Core 实现微服务架构涉及几个关键步骤&#xff0c;包括服务划分、API 网关、服务通信和容器化部署。下面是一个简化的示例&#xff0c;展示如何使用 .NET Core 实现一个基本的微服务架构。 步骤 1&#xff1a;创建独立的微服务 定义微服…

【AIGC-数字人】V-Express:渐进式训练的数字人视频生成技术

介绍 在人像视频生成领域&#xff0c;使用单张图像生成人像视频已经变得越来越普遍。一种常见的方法涉及利用生成模型来增强适配器以实现受控生成。然而&#xff0c;控制信号的强度可能会有所不同&#xff0c;包括文本、音频、图像参考、姿态、深度图等。其中&#xff0c;较弱的…

Vue.js - 生命周期与工程化开发【0基础向 Vue 基础学习】

文章目录 Vue 的生命周期Vue 生命周期的四个阶段Vue 生命周期函数&#xff08;钩子函数 工程化开发 & 脚手架 Vue CLI**开发 Vue 的两种方式&#xff1a;**脚手架目录文件介绍项目运行流程组件化开发 & 根组件App.vue 文件&#xff08;单文件组件&#xff09;的三个组成…

【PyCharm】无法创建虚拟环境,提示:has no attribute CPython3macOsBrew

报错信息&#xff1a; AttributeError: module virtualenv.create.via_global_ref.builtin.cpython.mac_os has no attribute CPython3macOsBrew报错原因&#xff1a; 可能含有多个virtualenv&#xff0c;发生冲突了。 解决方法&#xff1a; 终端执行以下命令&#xff1a; p…

LeetCode 图-岛屿问题

图 图的基本知识基本概念图的类型相关术语 图的存储 LeetCode 相关题目岛屿问题岛屿的最大面积岛屿的周长 图的基本知识 基本概念 图的类型 无向图有向图加权图 相关术语 顶点边路径路径长度环负权环连通性顶点的度入度出度 图的存储 邻接矩阵存储&#xff1a;是用一个二…

豆包大模型API接入

1.安装JDK pip install volcengine 2.API接入 from volcengine.maas.v2 import MaasService maas MaasService(maas-api.ml-platform-cn-beijing.volces.com, cn-beijing) maas.set_ak(###access_key###&#xff09; maas.set_sk(###secret_key###) req { "strea…