前端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

相关推荐
Initialize-le3 小时前
Nginx 504 超时、499 一堆?网关排查法
运维·nginx
Jmyd01234 小时前
Web端3D营销展厅技术实现路径:从素材上云到线索回流的数据链路
前端·3d·性能优化·三维数字化
半个落月5 小时前
LangChain Agent 中间件实战(上):生命周期、状态、短路与工具包
javascript·langchain
砚凝霜5 小时前
【软考信息安全】第二十二章 Web服务器安全分析与增强——Apache与IIS
服务器·前端·安全
半个落月5 小时前
LangChain Agent 中间件实战(下):DeepAgents文件权限、长期记忆与对话摘要
javascript·langchain
u0111026757 小时前
JPG、PNG、WebP 怎么选?按透明度、体积和使用场景做判断
前端·javascript·vue.js·图像处理·ai作画
jerrywus7 小时前
让 AI 写完代码后交一份报告:我改造了 answer-me-with-html
前端·claude·cursor
派小心.8 小时前
小程序分享链路中来源参数的传递校验
大数据·前端·数据库·人工智能·小程序·数据分析
hhb_6188 小时前
一键生成数据看板,ECharts实战演示
前端·javascript·echarts
Java后端的Ai之路8 小时前
08_React组件API
前端·react.js·前端框架