首页 > 系统相关 >nginx 部署2个相同的vue

nginx 部署2个相同的vue

时间:2024-11-07 17:23:31浏览次数:1  
标签:vue http header 部署 server nginx set proxy

起因:

最近遇到一个问题,在前端用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;
 
    #负载vue
    upstream vueapp {
        server 127.0.0.1:81 weight=1;
        server 127.0.0.1:82 weight=1;
    }    
 
    # 负载 后端api
    upstream k2_api {
        ip_hash;
        # gateway 地址
        server localhost:9600;
    }
 
    #节点1
    server {
        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 路径
        }
    }
   
    #节点2
    server {
        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

 

标签:vue,http,header,部署,server,nginx,set,proxy
From: https://www.cnblogs.com/hanjun0612/p/18533138

相关文章

  • Vue3 - 详细实现虚拟列表前端虚拟滚动列表解决方案,vue3长列表优化之虚拟列表,解决列表
    前言Vue2版本,请访问这篇文章在vue3项目开发中,详解实现虚拟列表高度不固定(不定高)且复杂含有图片视频等复杂虚拟列表教程,决列表每项高度不确定及img图像或视频的加载方案,利用缓冲区技术解决用户浏览时渲染不及时列表闪烁白屏/列表加载闪屏,解vue3实现虚拟列表优化大......
  • 基于Centos7.X部署mysql8.4集群(主备)
    1、目标    将在主库的数据变更同步到从库,从而保证主库和从库的数据一致。2、原理    2.1主库会把数据变更记录在二进制日志文件Binlog中    2.2从库连接主库,读取binlog日志,并写入自身中继日志relaylog    2.3slave重做中继日志,将改变......
  • Springboot游戏网站322mj(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表用户,游戏信息,游戏分类,拍卖行,卖家,装备购买,游戏周边,周边购买,点卡充值,充值信息,处罚公示,处罚申诉,商品分类开题报告内容一、研究背景与意义随着信息技术......
  • 大模型-大模型推理部署-08
    目录大模型常见推理框架:Transformers、Llama.cpp、Llamafile、Ollama、vLLM、TGI(TextGenerationInference)、DeepSpeed。vLLM,deepspeed是重点HuggingFace的Transformers强大的Python库,专为简化本地运行LLM而设计。其优势在于自动模型下载、提供丰富的代码片段,以及非常适合......
  • kservert安装部署
    1.版本要求KubernetesVersionRecommendedIstioVersion1.271.18,1.191.281.19,1.201.291.20,1.212.安装istio,certmanager(master1)#安装istio wgethttps://github.com/istio/istio/releases/download/1.23.3/istioctl-1.23.3-linux-a......
  • Oracle 19c Rac环境部署
    Oracle19cRac环境部署前言搭建Oracle19cRac环境部署,使用dns进行解析。一、软件包linuxx64_193000_grid_home.ziplinuxx64_193000_db_home.zip二、配置信息1.IP地址规划编辑/etc/hosts#publicip10.1.50.213kezcc1kezcc1.zcc.com10.1.50.214kezcc......
  • linux部署本地测试服务器,部署showdoc,并挂载额外硬盘用于windows共享文件
    过程中坑还是挺多的,在这里做个记录,方便他人也方便自己一、安装linux系统下载镜像使用rufus制作启动盘(linux系统不能使用大白菜等软件)更改网络配置(ifcfg-ens33是网卡名,看个人主机配置而定)vi/etc/sysconfig/network-scripts/ifcfg-ens33将ONBOOT="no"改为ONBOOT=“yes......
  • SpringBoot外卖服务系统k83px 本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统内容:用户,商家,店铺信息,菜品分类,菜品信息,店铺公告开题报告内容一、研究背景与意义随着互联网技术的飞速发展,人们的生活方式正在发生深刻变革。在餐饮......
  • vue—ref属性
    原文链接:vue—ref属性–每天进步一点点 在vue中ref属性基本有两个作用,一个是获取dom元素,另一个是获取组件实例化对象。初始页面和初始代码如下:123456789101112131415161718192021222324252627282930313233343536<template>......
  • vue-props配置
    原文链接:vue-props配置–每天进步一点点1.props作用props主要用于组件实例对象之间传递参数,比如我们前面创建的student组件,我们在组件中让他显示一些信息,比如下面这样:Student组件如下:1234567891011121314151617181920<template>  <div> ......