nginx配置外网访问服务器

最新推荐文章于 2024-06-05 15:00:59 发布

酸奶来一杯

最新推荐文章于 2024-06-05 15:00:59 发布

阅读量759

点赞数 7

文章标签： nginx 服务器运维

本文链接：https://blog.csdn.net/qq_31905589/article/details/136383514

版权

简单记录一下打包vue项目后，部署到服务器并且配置nginx，使得能够被外网访问

1. 服务器配置（阿里云）

首先进入阿里云服务器控制台，在云服务器组中找到 云服务器ECS -->安全组 -->创建安全组 -->访问规则（入方向） -->快速添加 选择443和80

2. nginx配置

刚开始将打包好的dist包放到nginx中启动后，遇见一系列问题。
首先，刷新页面后默认路由的路径没有了，只剩下IP和端口了。
配置好try_files $uri $uri/ /index.html last; 之后，刷新页面后不会出现路由“丢失”问题了。
然后调用接口出现405的问题，在尝试了多次之后，最终以下配置比较有效，可以正常访问了

server {
	listen 80;
	server_name localhost;

	location / {
		root dist; #项目的前端打包后的文件夹
		try_files $uri $uri/ /index.html last;
		index index.html index.htm;
		add_header Access-Control-Allow-Origin *;
		add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
		add_header Access-Control-Allow-Headers
		'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
		if ($request_method = 'OPTIONS') {
			return 204;
		}
	}
	location /api/{
		proxy_pass http://xxxxx:xxxx/;

		proxy_set_header X-Real-IP $remote_addr;

		proxy_set_header X-Forwarded-For $remote_addr;
	}
}