nginx 部署2个相同的vue

起因:

最近遇到一个问题,在前端用nginx 部署 vue,

发现如果前端有改动,如果不适用热更新,而是直接复制项目过去,会404

因此想到用nginx 负载两套相同vue项目,然后一个个复制vue项目就可以了。

废话不多:

一 在nginx下创建两个vue的路径

二 修改nginx的配置文件

worker_processes  1;#error_log  /var/log/nginx/error.log warn;
#pid        /var/run/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;# 限制body大小client_max_body_size 100m;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';#access_log  /var/log/nginx/access.log  main;#负载vueupstream vueapp {server 127.0.0.1:81 weight=1;server 127.0.0.1:82 weight=1;}    # 负载 后端apiupstream k2_api {ip_hash;# gateway 地址server localhost:9600;}#节点1server {listen       81;server_name  127.0.0.1;location / {root /usr/local/nginx/html;try_files $uri $uri/ /index.html index  index.html index.htm;}location /prod-api/ {proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# websocket参数proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_pass http://k2_api/;         # java api 路径}}#节点2server {listen       82;server_name  127.0.0.1;location / {root /usr/local/nginx/html2;try_files $uri $uri/ /index.html index  index.html index.htm;}location /prod-api/ {proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# websocket参数proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_pass http://k2_api/;         # java api 路径}}#反向代理负载均衡server {listen       80;server_name  127.0.0.1;location / {proxy_pass http://vueapp/;proxy_set_header    Host                $http_host;proxy_set_header    X-Real-IP           $remote_addr;proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;proxy_set_header    X-NginX-Proxy       true;}}
}

总结:

① 配置2个server节点,

listen 分别为 81,82

root 分别为: /usr/local/nginx/html;      /usr/local/nginx/html2;

② 配置upstream vueapp

负载2个server节点

③ 配置反向代理80端口

通过80端口,反向代理vueapp

④ /nginx/sbin目录下

运行:./nginx -s reload

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

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

相关文章

MySQL:CRUD

MySQL表的增删改查(操作的是表中的记录) CRUD(增删改查) C-Create新增R-Retrieve检查,查询U-Update更新D-Delete删除 新增(Create) 语法: 单行数据全列插入 insert into 表名[字段一,字段…

centos7 node升级到node18

使用jenkins发布vue3项目提示node18安装失败 错误日志: /var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/Node18/bin/node: /lib64/libm.so.6: version GLIBC_2.27 not found (required by /var/lib/jenkins/tools/jenkins.plugins.node…

万字长文解读深度学习——ViT、ViLT、DiT

文章目录 🌺深度学习面试八股汇总🌺ViT1. ViT的基本概念2. ViT的结构与工作流程1. 图像分块(Image Patch Tokenization)2. 位置编码(Positional Encoding)3. Transformer 编码器(Transformer En…

MFC中Excel的导入以及使用步骤

参考地址 在需要对EXCEL表进行操作的类中添加以下头文件:若出现大量错误将其放入stdafx.h中 #include "resource.h" // 主符号 #include "CWorkbook.h" //单个工作簿 #include "CRange.h" //区域类,对Excel大…

前端开发中常用的包管理器(npm、yarn、pnpm、bower、parcel)

文章目录 1. npm (Node Package Manager)2. Yarn (Yarn Package Manager)3. pnpm4. Bower5. Parcel总结 前端开发中常用的包管理器主要有以下几个: 1. npm (Node Package Manager) 简介: npm 是 Node.js 的默认包管理器,也是最广泛使用的包…

Linux(CentOS)安装 Nginx

CentOS版本:CentOS 7 Nginx版本:1.24.0 两种安装方式: 一、通过 yum 安装,最简单,一键安装,全程无忧。 二、通过编译源码包安装,需具备配置相关操作。 最后附:设置 Nginx 服务开…

深度学习项目启动(笔记用)

深度学习项目启动 项目配置虚拟环境 项目配置虚拟环境

万字长文解读深度学习——卷积神经网络CNN

推荐阅读: 卷积神经网络(CNN)详细介绍及其原理详解 CNN笔记:通俗理解卷积神经网络 文章目录 🌺深度学习面试八股汇总🌺主要组件输入层卷积层 (Convolutional Layer)批归一化层(Batch Normalizat…

VBA10-处理Excel的动态数据区域

一、end获取数据边界 1、基本语法 1-1、示例: 2、配合row和column使用 2-1、示例1 2-2、示例2 此时,不管这个有数值的区域,怎么增加边界,对应的统计数据也会跟着变的! 二、end的缺陷 若是数据区域不连贯,则…

Spring boot + Vue2小项目基本模板

Spring boot Vue2小项目基本模板 基本介绍基本环境安装项目搭建最终效果展示 基本介绍 项目来源哔哩哔哩的青戈,跟着学习搭建自己的简单vue小项目;看别人的项目总觉得看不懂,需要慢慢打磨 这里目前只简单的搭建了菜单导航和表格页面&#x…

“箱体分析”,箱体支撑压力位,分析市场方向 通达信主图 源码

使用技巧 该指标用于在通达信的K线图上绘制箱体分析图形,主要通过支撑位、波浪顶、箱体上下限等多个技术指标来识别股票的支撑和压力区域。 支撑位分析:可以帮助用户识别股价的支撑区域,并判断是否会反弹。 箱体震荡区间识别:通…

PICO+Unity MR视频透视

官方链接:视频透视 | PICO 开发者平台 在 PXR_Manager (Script) 面板上,勾选 Video Seethrough 选框 2.将 Clear Flags 设置为 Solid Color。颜色设置为黑色,Alpha 通道设置为完全透明 3.在代码中开启透视 using System.Collections; usin…

大学生福音!用gpt-4o和o1大模型拿捏大学化学作业

文章目录 零、前言一、使用GPT操作指导作业拍照使用o1-preview大模型小结 二、感受 零、前言 昨天发了gpt-4o拿捏大学物理作业,群友说,急需要一位化学老师指导 虚竹哥是宠粉的,连夜请了一位博士级的化学老师~ 一、使用GPT 操作指导 ChatG…

2024-11-12 学习人工智能的Day25 scikit-learn库初见

简简单单的数据集 from sklearn.datasets import load_iris/fectch 简单的引用世界数据集和玩具数据集方式 #下面是在获取数据集后常用的值 feature feature_names DESCR target target_names filename from sklearn.datasets import load_iris import numpy as np import…

2024 年将 Postman 文档导出为 HTML 或 Markdown

2024 年将 Postman 文档导出为 HTML 或 Markdown

访问网页的全过程(知识串联)

开发岗中总是会考很多计算机网络的知识点,但如果让面试官只靠一道题,便涵盖最多的计网知识点,那可能就是 网页浏览的全过程 了。本篇文章将带大家从头到尾过一遍这道被考烂的面试题,必会!!! 总…

服务器硬件介绍

计算机介绍 现在的人们几乎无时无刻都在使用电脑!而且已经离不开电脑了。像桌上的台式电脑(桌机)、笔记本电脑(笔电)、平板电脑、智能手机等等,这些东西都算是电脑。 台式机电脑介绍 计算机又被称为电脑。台式机电脑主要分为主机和显示器两个部分&…

04-HTTP协议、请求报文、响应报文

欢迎来到“雪碧聊技术”CSDN博客! 在这里,您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者,还是具有一定经验的开发者,相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导,我将…

基于Multisim人数出入加减计数统计电路(含仿真和报告)

【全套资料.zip】人数出入加减计数统计电路Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 设计两路光控电路,一路放置在入口,另一路设置在出口,当有人…

车机安装第三方软件实现打开软件全屏教程

简介 越来越多的车友实现安装第三方软件了,但是有的车机的状态栏或者导航栏会遮挡安装的第三方软件。这样的话,第三方软件就会显示不全,体验感非常不好。所以,下面我教一下大家如何使用东君应用管家来实现打开第三方软件全屏。 全…