本地调试 之 Nginx配置文件学习以及本地指向步骤

在本地调试时都是使用nginx进行反向代理，将线上资源代理到本地，再使用SwitchHosts指向本地，就能愉快的开始迭代了。但是每次都是从同事那拷过来的配置文件，并不理解怎么就代理到本地了，不知道就要学习。

1、了解Nginx

配置文件主要是使用正则匹配来实现转发，比如图片文件走文件服务器，动态页面走web服务器。文件结构主要分为这五大块：

我们主要改动的是server模块（配置虚拟主机的相关参数）以及location模块（配置请求的路由，以及各种页面的处理情况）

2、server配置

server需要设置http以及https两个模块
在nginx.conf文件中，默认也有

http server全局块

监听了80端口， server_name是资源请求的服务器名（可以设置多个，以空格分隔，也可以是localhost），root是你项目的本地路径（拷贝别人的nginx配置文件时，需要修改这个值）

server {
    listen       80;
    server_name  www.runoob.com;
    # access_log   logs/talent-ui.access.log  main;

    # 修改为你电脑上的项目路径
    root   /Users/components;
    index  index.html index.htm;

    sendfile off;
}

https server全局块

https,默认端口号443端口，server_name和root同http设置。由于https是加密了的，需要配置SSL证书才能正常访问https网站

ssl_certificate证书是公钥，它会被发送到连接服务器的每个客户端；
ssl_certificate_key私钥用来解密，所以它的权限要得到保护但nginx的主进程能够读取。
当然私钥和证书可以放在一个证书文件中，这种方式也只有公钥证书才发送到client。

	server {
        listen 443;
        server_name  www.runoob.com www.google-analytics.com;
        root /Users/components;

        ssl on;
        ssl_certificate server.crt;
        ssl_certificate_key server.key;

        add_header Expires "Fri, 01 Jan 1980 00:00:00 GMT";
        add_header Pragma "no-cache";
        add_header Cache-Control "no-cache, max-age=0, must-revalidate";
        add_header Access-Control-Allow-Origin *;
        autoindex on;
	}

当出现403跨域错误的时候 No ‘Access-Control-Allow-Origin’ header is present on the requested resource，需要给Nginx服务器配置响应的header参数：add_header Access-Control-Allow-Origin *;

3、location配置

关于location匹配规则的写法，是非常重要的，基本上页面或者项目本地代理都是读取的location配置，可以参照nginx配置location总结及rewrite规则写法

Rewrite规则

实现url重写以及重定向。
rewrite只能对域名后边的除去传递的参数外的字符串起作用。
例如 http://seanlook.com/a/we/index.php?id=1&u=str 只对/a/we/index.php重写。

rewrite和location有些相似，都能实现跳转，主要区别在于rewrite是在同一域名内更改获取资源的路径，而location是对一类路径做控制访问或反向代理，可以proxy_pass到其他机器。

http {
  server {
      listen       80;
	  server_name  www.runoob.com;
	    
	  # 修改为你电脑上的项目路径
	  root   /Users/components;
	  index  index.html index.htm;
	
	  sendfile off;
	  location ~ ^/ux/upaas/ux-publicidad-page/(release|hotfix)/dist/(?P<path>.*)(?:\-\d+\.\d+\.\d+)(\.min).(?P<ext>.*)$ {
	    rewrite ^/ux/upaas/ux-publicidad-page/(release|hotfix)/dist/(?P<path>.*)(?:\-\d+\.\d+\.\d+)(\.min).(?P<ext>.*)$ /thunder-page.stnew03.ceshi.com/$path.$ext;
	  }
  }
}

比如：http://www.runoob.com/ux/upaas/ux-publicidad-page/release/dist/main-2.0.16.min.js
【~匹配大小写】
对于/ux/upaas/ux-publicidad-page/release/dist/main-2.0.16.min.js的请求，重写到/thunder-page.stnew03.ceshi.com/main-2.0.16.min.js

rewrite '^/images/([a-z]{2})/([a-z0-9]{5})/(.*)\.(png|jpg|gif)$' /data?file=$3.$4;
# 注意不能在上面这条规则后面加上“last”参数，否则下面的set指令不会执行
set $image_file $3;
set $image_type $4;

对形如/images/ef/uh7b3/test.png的请求，重写到/data?file=test.png。可以使用set来设置全局变量

其他

location ~ ^/ux/tms-common/talent/extras/iTalentSDKServer-0.1.9-107.js$ {
    index  index.html index.htm index.php index.py;
    proxy_pass http://stnew02.ceshi.com;
    proxy_set_header Host $host;
    proxy_hide_header Access-Control-Allow-Origin; 
}

访问http://www.runoob.com/ux/ceshi-common/talent/extras/iTalentSDKServer-0.1.9-107.js会被反向代理到http://stnew02.ceshi.com

4、启动方法

启动：sudo nginx
启动之后，重启：sudo nginx -s reload
启动之后，关闭，再启动：sudo nginx -s stop -> sudo nginx

5、本地指向

nginx.conf文件配置完成，1️⃣ 打开SwitchHosts,设置 127.0.0.1 www.runoob.com， 2️⃣ 在iTerm里启动ngin sudo nginx，3️⃣ 启动项目，就可以指向本地进行开发调试了。进入到网站，如果白页，打开控制台，查看js资源文件，是否是404，若是则可能是nginx配置不正确，或者可以重新启动nginx sudo nginx -s reload