前言：
现在前端通常使用前后端分离的开发模式，前端本地利用webpack等开发工具起一个本地服务，连接到后端服务开发，但很容易产生跨域问题，尤其是https的服务，这时候使用nginx设置一个反向代理就非常方便了。
1. 下载软件
点击下载：nginx软件下载
选一个版本，这里使用 nginx/Windows-1.16.0 版
下载到本地后解压文件夹到D盘下，
nginx的目录：D:\nginx-1.16.0
2. 配置Nginx
-
Nginx的常用命令：
验证配置是否正确: nginx -t
查看Nginx的版本号：nginx -V
启动Nginx：start nginx
快速停止或关闭Nginx：nginx -s stop
正常停止或关闭Nginx：nginx -s quit
配置文件修改重装载命令：nginx -s reload -
启动nginx的方式有多种：
- 直接双击文件夹下的nginx.exe 文件，会有一个一闪而过的cmd.
- cmd使用命令
start nginx(推荐此方法，方便后续更改配置）
按win键输入cmd, 打开cmd命令提示符
cd d:\nginx-1.16.0
start nginx
会出现一个一闪而过的窗口，然后有可能出现网络安全提示，点击“允许访问”
查看nginx执行情况：
tasklist /fi "imagename eq nginx.exe"
1.png
显示如上图说明执行成功，前两个nginx的控制服务，后面两个是此次启用的服务。
打开http://localhost:8080/，如果没有出现nginx的欢迎界面，可能由以下原因导致的：
1.80端口被占用了
2.root 路径未解析成功
3.error_log路径未解析成功
因为window的路径与linux不一样， 需要修改一下配置，主要是error_log 和 server下的listen,root配置
打开D:\nginx-1.16.0\conf\nginx.conf文件修改：
#user nobody;
worker_processes 1;
error_log d:/nginx-1.16.0/logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 8033;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root d:/nginx-1.16.0/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
...
可以使用nginx -t检查配置是否正确，出现下面提示说明成功：
3.png
执行 nginx -s reload 重新启动nginx，打开http://localhost:8033/
，出现下面界面表示成功
2.png
注意：如果先执行了 nginx -s stop，修改了nginx.conf, 然后重新执行nginx -s reload很可能会出现报错：
nginx: [error] CreateFile() "D:\nginx-1.16.0/logs/nginx.pid" failed (2: The system cannot find the file specified)
这是因为没有找到配置文件导致的，可以执行nginx -c conf/nginx.conf,指定配置文件的位置，或者使用nginx -s reload -c conf/nginx.conf 来代替nginx -s reload命令。
3. 配置反向代理
Nginx可以配置多个server服务，所以可以直接再nginx.conf中插入一个server的配置，主要修改访问端口号、匹配路径、代理的端口号，参考配置如下：
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 9000; # 浏览器访问端口
server_name 127.0.0.1;
client_max_body_size 1024M;
# 转发到后端的url设置
location ~ ^/(restapi|api|static|auth/logout|auth/captcha|project/settings/user)/ {
#除静态文件和特殊接口以外的由后端提供服务
proxy_pass https://xx.xx.xx.xx; # 同后端的路径
proxy_set_header Host $host:$server_port;
proxy_set_header referer "https://$host:$server_port";
proxy_set_header X-Real-IP $remote_addr;
proxy_redirect https://$host:$server_port http://$host:$server_port;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
# 监听前端启的服务
location / {
proxy_pass http://127.0.0.1:8080; # 这里的端口号，与前端本地服务端口保持一致。
}
}
server {
...省略内容
}
...省略内容
}
如果使用前端使用了webpack， 注意注释掉webpack中配置的proxy代理；
location 后面匹配的是正则路径，可以参考官网文档http://nginx.org/en/docs/http/ngx_http_core_module.html#location
网友评论