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.com

5、重启nginx

cmd窗口执行：

//nginx测试是否正常
nginx -t
//重启nginx
nginx -s reload

6、浏览器输入线上环境访问地址，这时访问线上环境地址，实际上访问的就是我们本地项目文件啦！

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;
}