win10安装配置Nginx反向代理【前端】

前言：
现在前端通常使用前后端分离的开发模式，前端本地利用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的方式有多种：

1. 直接双击文件夹下的nginx.exe 文件，会有一个一闪而过的cmd.
2. 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