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进程(可以打开任务管理器查看),这样会调试结果不准确。因此建议使用命令行。

启动方式:Nginx访问本地项目及配置_第1张图片

 

打开解压文件夹路径,按住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

Nginx访问本地项目及配置_第2张图片

 

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

 

你可能感兴趣的:(H5,nginx,h5,location,rewrite)