Nginx 文件配置

1. 安装nginx

2. 熟悉nginx操作命令

3. 编辑nginx.conf

vim /usr/local/etc/nginx/nginx.conf

4. 修改其中的内容

server {
	// 启动后的端口
	listen       8080;
	// 启动后访问的地址
	server_name  localhost;

	// location可并列设置多个
	// 启动后浏览器输入localhost：8080 默认会访问html文件夹中的index.html文件
	location / {
		// root地址可以更改为本地项目地址
		root   html;
		index  index.html index.htm;
	}
	// 访问项目test1转发地址 下面设置的地址是本地启的服务地址
	// 输入localhost:8080/test1/index.html 等于访问http://127.0.0.1:5500/test1/index.html
	location /test1/ {
		proxy_pass  http://127.0.0.1:5500;
	}
	// 访问项目test2转发地址
	location /test2/ {
		proxy_pass  http://127.0.0.1:5533;
	}
	
	// 404页面同样配置在html文件夹中
	error_page  404              /404.html;
	location = /404.html {
		root   html;
	}
   // 其他错误页设置
	error_page   500 502 503 504  /50x.html;
		location = /50x.html {
			root   html;
		}
	}

	// 配置代理，由于项目是在本地起动的，而我们的request需要请求其他ip地址。
	// 如果你的request链接为localhost:8880/api/login?name=12345,最终会代理到 http://192.168.0.0:80/api/login?name=12345
	location /api {
		proxy_pass  http://192.168.0.0:80;
	}

	// 一般前端不管用vue，还是react等框架，默认都是单页面的，如果项目是多页面的，则需要用到下面的配置。
	// 此时你的浏览器的url不是localhost:8880/#/login,而是 localhost:8880/a.html/#/login
	// 所以需要将路径中a.html指向具体的html文件夹中的文件，因为默认是index.html
	location /a.html {
		alias  html;
		index  a.html;
	}
	location /a.html {
		alias  html;
		index  a.html;
	}
}