在本地调试时都是使用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