前端vue部署nginx多端口文件配置

nginx.conf 文件

js 复制代码
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    # 开启gzip压缩
	gzip on;
	gzip_static on;
	# 不压缩临界值,大于1K的才压缩,一般不用改
	gzip_min_length 1k;
	# 压缩缓冲区
	gzip_buffers 16 64K;
	# 压缩版本(默认1.1,前端如果是squid2.5请使用1.0)
	gzip_http_version 1.1;
	# 压缩级别,1-10,数字越大压缩的越好,时间也越长
	gzip_comp_level 5;
	# 进行压缩的文件类型
	gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
	# 跟Squid等缓存服务有关,on的话会在Header里增加"Vary: Accept-Encoding"
	gzip_vary on;
	# IE6对Gzip不怎么友好,不给它Gzip了
	gzip_disable "MSIE [1-6]\.";

	
    server {
		listen       8081;
		server_name  localhost;
		# 将dist文件放到Nginx 的hml文件下(推荐)
		location / {
			root	html/dist666;
			index	index.html;
			try_files $uri $uri/ /index.html;
		}
		location /prod-api/ {
			proxy_set_header Host $http_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;
			proxy_pass http://localhost:8091/;
		}
		# 下面的配置解决在某个界面重复刷新500的bug
		error_page	500 502 503 504 404 400  /dist666/index.html;
		location = /dist666/index.html {
			root   html;
		}
    }
	
    server {
		listen       8082;
		server_name  localhost;
		# 将dist文件放到Nginx 的hml文件下(推荐)
		location / {
			root	html/dist777;
			index	index.html;
			try_files $uri $uri/ /index.html;
		}
		location /prod-api/ {
			proxy_set_header Host $http_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;
			proxy_pass http://localhost:8092/;
		}
		# 下面的配置解决在某个界面重复刷新500的bug
		error_page	500 502 503 504 404 400  /dist777/index.html;
		location = /dist777/index.html {
			root   html;
		}
    }
	
    server {
		listen       8083;
		server_name  localhost;
		# 将dist文件放到Nginx 的hml文件下(推荐)
		location / {
			root	html/dist888;
			index	index.html;
			try_files $uri $uri/ /index.html;
		}
		location /prod-api/ {
			proxy_set_header Host $http_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;
			proxy_pass http://localhost:8093/;
		}
		# 下面的配置解决在某个界面重复刷新500的bug
		error_page	500 502 503 504 404 400  /dist888/index.html;
		location = /dist888/index.html {
			root   html;
		}
    }
}

html文件夹下放置打包之后的静态资源 dist666 dist777 dist888

相关推荐
倪旻萱1 小时前
XSS漏洞----基于Dom的xss
前端·xss
JSON_L3 小时前
Vue rem回顾
前端·javascript·vue.js
GISer_Jing4 小时前
JavaScript 中Object、Array 和 String的常用方法
开发语言·javascript·ecmascript
brzhang5 小时前
颠覆你对代码的认知:当程序和数据只剩下一棵树,能读懂这篇文章的人估计全球也不到 100 个人
前端·后端·架构
斟的是酒中桃5 小时前
基于Transformer的智能对话系统:FastAPI后端与Streamlit前端实现
前端·transformer·fastapi
烛阴5 小时前
Fract - Grid
前端·webgl
JiaLin_Denny6 小时前
React 实现人员列表多选、全选与取消全选功能
前端·react.js·人员列表选择·人员选择·人员多选全选·通讯录人员选择
brzhang6 小时前
我见过了太多做智能音箱做成智障音箱的例子了,今天我就来说说如何做意图识别
前端·后端·架构
为什么名字不能重复呢?6 小时前
Day1||Vue指令学习
前端·vue.js·学习
eternalless7 小时前
【原创】中后台前端架构思路 - 组件库(1)
前端·react.js·架构