前端工程配置Nginx反向代理[通俗易懂]

大家好，又见面了，我是全栈君。

前端开发时，想要通过正式域名直接访问到本地的开发环境，可以通过配置反向代理的形式来实现，如果开了反向代理，就走本地，不开则走线上。

配置两个反向代理，一个代理http页面，一个代理https页面，前者监听80端口，后者监听443端口。配置后整个文件如下，其中有不少冗余，挑有用的看即可。

#user nobody;
worker_processes  1;

#error_log 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       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log logs/host.access.log main;

        location / { 
   
            root   html;
            index  index.html index.htm;
            proxy_pass http://localhost:3000/;
        }

        #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;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ { 
   
        # proxy_pass http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ { 
   
        # root html;
        # fastcgi_pass 127.0.0.1:9000;
        # fastcgi_index index.php;
        # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
        # include fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht { 
   
        # deny all;
        #}
    }

    server { 
   
        #监听443端口。443为知名端口号，主要用于HTTPS协议
        listen       443 ssl;
 
        #定义使用www.xx.com访问
        server_name  dev.wapa.taobao.com;
 
        #ssl证书文件位置(常见证书文件格式为：crt/pem)
        ssl_certificate      /Users/liuzhenhui/Documents/Key/ssl.crt;
        #ssl证书key位置
        ssl_certificate_key  /Users/liuzhenhui/Documents/Key/ssl.key;
 
        #ssl配置参数（选择性配置）
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        #数字签名，此处使用MD5
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
 
        
        #编码格式
        charset utf-8;
        
        #代理配置参数
        proxy_connect_timeout 180;
        proxy_send_timeout 180;
        proxy_read_timeout 180;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarder-For $remote_addr;
 
        #反向代理的路径（和upstream绑定），location 后面设置映射的路径
        location / { 
   
            proxy_ssl_server_name on;
            proxy_pass https://localhost:3000/;
        } 
 
        #静态文件，nginx自己处理
        location ~ ^/(images|javascript|js|css|flash|media|static)/ { 
   
            root C:/XMCARES_X/WorkSpace/nginx/src/main/webapp/views;
            #过期30天，静态文件不怎么更新，过期可以设大一点，如果频繁更新，则可以设置得小一点。
            expires 30d;
        }
    
        #设定查看Nginx状态的地址
        location /NginxStatus { 
   
            stub_status           on;
            access_log            on;
            auth_basic            "NginxStatus";
            auth_basic_user_file  conf/htpasswd;
        }
    
        #禁止访问 .htxxx 文件
        location ~ //.ht { 
   
            deny all;
        }
        
        #错误处理页面（可选择性配置）
        #error_page 404 /404.html;
        #error_page 500 502 503 504 /50x.html;
        #location = /50x.html { 
   
        # root html;
        #
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server { 
   
    # listen 8000;
    # listen somename:8080;
    # server_name somename alias another.alias;

    # location / { 
   
    # root html;
    # index index.html index.htm;
    # }
    #}


    # HTTPS server
    #
    #server { 
   
    # listen 443 ssl;
    # server_name localhost;

    # ssl_certificate cert.pem;
    # ssl_certificate_key cert.key;

    # ssl_session_cache shared:SSL:1m;
    # ssl_session_timeout 5m;

    # ssl_ciphers HIGH:!aNULL:!MD5;
    # ssl_prefer_server_ciphers on;

    # location / { 
   
    # root html;
    # index index.html index.htm;
    # }
    #}
    include servers/*;
}

HTTP配置

如上面配置，具体http的配置主要如下

server { 
   
        listen       80;//监听80端口
        server_name  dev.taobao.com;//监听的域名
        //要代理转向的目标配置
        location / { 
   
            root   html;
            index  index.html index.htm;
            proxy_pass http://localhost:3000/;
        }
    }

以上配置表示，nginx监听dev.taobao.com域名的80端口，当有请求来到dev.taobao.com:80时，把这个请求代理到localhost:3000，所以在前端工程启动后，node.js配置的是3000端口，但是浏览器直接访问80端口即可（即默认端口），无需显示指定域名后面的端口，直接访问dev.taobao.com就可以了，这样的好处是，直接用域名就能访问到本地的开发环境。

HTTPS配置

    server { 
   
        #监听443端口。443为知名端口号，主要用于HTTPS协议
        listen       443 ssl;
 
        #定义使用www.xx.com访问
        server_name  dev.taobao.com;
 
        #ssl证书文件位置(常见证书文件格式为：crt/pem)
        ssl_certificate      /Users/liuzhenhui/Documents/Key/ssl.crt;
        #ssl证书key位置
        ssl_certificate_key  /Users/liuzhenhui/Documents/Key/ssl.key;

配置项跟http差不多，多了两条ssl的配置，首先生成证书，然后把证书信息填上即可，证书生成流程如下：

1. 生成rsa私钥，des3算法，1024位强度，ssl.key是秘钥文件名。
   openssl genrsa -des3 -out ssl.key 1024
2. 输入密码两次，填写一样即可，可随意填写，下一步就会删除
3. 删除密码
   openssl rsa -in ssl.key -out ssl.key
4. 生成CSR
   openssl req -new -key ssl.key -out ssl.csr
   需要输入一些信息，随便填写即可
5. 生成自签名证书
   //这里3650是证书有效期(单位：天)
   openssl x509 -req -days 3650 -in ssl.csr -signkey ssl.key -out ssl.crt

证书生成完成，配置到文件中，既可以直接用https://dev.taobao.com来访问本地的开发环境了。

如果是mac系统，因为证书是自己的，需要添加到系统的信赖证书才能用，否则浏览器会拦截请求。用safari打开https://dev.taobao.com会提示证书不可用，这是选择证书信任，然后强制加载，就会把证书加入到信任列表了。

参考
https://www.cnblogs.com/shuiche/p/13557475.html