Nginx访问本地项目及配置
场景
在H5开发中，有时候有些问题只在线上环境出现，线上环境又不能随便更改代码和配置，比如，我们需要对页面进行重定向，正则匹配转发，那么我们能不能在本地调试就能模拟线上环境页面访问情况呢？
答案是肯定的！那么如何做呢？
模拟线上环境页面访问
1、nginx
线上环境使用的是nginx服务器。
Nginx是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。
2、安装和部署
（1）下载链接 -> http://nginx.org/en/download.html , 建议选择稳定版
（2）解压后启动。
启动方式有两种：双击nginx.exe，或者 命令行启动。
因为调试过程中需要多次关闭和重启nginx，如果通过nginx双击的方式，可能会造成旧的nginx未关闭，新打开了一个nginx进程（可以打开任务管理器查看），这样会调试结果不准确。因此建议使用命令行。
启动方式：
打开解压文件夹路径，按住shift键，右键，选择 “在此处打开命令窗口” 即可快捷打开cmd窗口。
输入命令启动nginix：
start nginx浏览器打开 http://localhost:80 ，见到welcome to nginx，即启动成功
也可以cmd输入
tasklist /fi "imagename eq nginx.exe"如下图所示即启动成功
3、修改nginx配置
nginx安装启动完毕，我们还需要修改一下配置，这样才能当我们访问线上环境域名时，能指向我们本地的项目文件。
打开nginx文件夹下conf目录的nginx.conf文件进行编辑
server {
listen 80;
server_name 线上环境域名，例如xdh.com;
location / {
root 本地项目文件地址，例如D:/front/code/xdh，注意这里用的是右斜杠;
index index.html index.htm;
autoindex on;
}
}保存，关闭
4、修改host文件
windows系统，打开host文件，地址：C:\Windows\System32\drivers\etc
编辑host文件，添加一个上面nginx配置的线上环境域名
127.0.0.1 xdh.com5、重启nginx
cmd窗口执行：
//nginx测试是否正常
nginx -t
//重启nginx
nginx -s reload6、浏览器输入线上环境访问地址，这时访问线上环境地址，实际上访问的就是我们本地项目文件啦！
7、想要模拟线上环境的重定向、转发操作，这时只需要配置上面的nginx.conf就好了。
nginx常规配置
重定向rewrite
server {
listen 80;
server_name localhost;
#301永久重定向
rewrite ^/static/a.html$ /static/b.html permanent;
#302临时重定向
rewrite ^/static/a.html$ /static/b.html redirect;
location / {
root D:/front/code/xdh;
index index.html index.htm;
autoindex on;
}
}
location匹配规则
优先级：
(localtion =) > (localtion完整url) > (localtion ^~) > (localtion ~,~*) > (lcoaltion部分起始路径) > (/)
说明：
-
= 表示精确匹配
-
^~ 表示指定的路径开头
-
~ 表示区分大小写的正则匹配
-
~* 表示不区分大小写的正则匹配
-
/ 通用匹配,所有的URL都是以此为开头
例子：
location ^~ /static/ {
#规则1
}
location ~ \.(gif|jpg|png|js|css)$ {
#规则2
}
location ~* \.png$ {
#规则2
}
//http://xdh.com/static/a.png 优先匹配到规则1，则不匹配后面的规则
//http://xdh.com/a.png 匹配到规则2
location配置项
location / {
root html;
index index.html index.htm;
#转发后端地址，一般用于做软负载，轮询后端服务器
#proxy_pass http://localhost:8080;
#拒绝请求，返回403，一般用于某些目录禁止访问
#deny all;
#允许请求
#allow all;
#请求头设置
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
#重新定义或者添加发往后端服务器的请求头
#给请求头中添加客户请求主机名
proxy_set_header Host $host;
#给请求头中添加客户端IP
proxy_set_header X-Real-IP $remote_addr;
#将$remote_addr变量值添加在客户端“X-Forwarded-For”请求头的后面，并以逗号分隔。 如果客户端请求未携带“X-Forwarded-For”请求头，$proxy_add_x_forwarded_for变量值将与$remote_addr变量相同
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#给请求头中添加客户端的Cookie
proxy_set_header Cookie $http_cookie;
#将使用代理服务器的主域名和端口号来替换。如果端口是80，可以不加。
proxy_redirect off;
#浏览器对 Cookie 有很多限制，如果 Cookie 的 Domain 部分与当前页面的 Domain 不匹配就无法写入。
#所以如果请求 A 域名，服务器 proxy_pass 到 B 域名，然后 B 服务器输出 Domian=B 的 Cookie，
#前端的页面依然停留在 A 域名上，于是浏览器就无法将 Cookie 写入。
#不仅是域名，浏览器对 Path 也有限制。我们经常会 proxy_pass 到目标服务器的某个 Path 下，
#不把这个 Path 暴露给浏览器。这时候如果目标服务器的 Cookie 写死了 Path 也会出现 Cookie 无法写入的问题。
#设置“Set-Cookie”响应头中的domain属性的替换文本，其值可以为一个字符串、正则表达式的模式或一个引用的变量
#转发后端服务器如果需要Cookie则需要将cookie domain也进行转换，否则前端域名与后端域名不一致cookie就会无法存取
#配置规则：proxy_cookie_domain serverDomain(后端服务器域) nginxDomain(nginx服务器域)
proxy_cookie_domain localhost .testcaigou800.com;
#取消当前配置级别的所有proxy_cookie_domain指令
#proxy_cookie_domain off;
#与后端服务器建立连接的超时时间。一般不可能大于75秒；
proxy_connect_timeout 30;
}