前端项目中nginx 本地反向代理配置

nginx在本地搭建一个服务向远程服务器请求数据，这是很常见的一个操作，前提是前后端分离的条件下，这样后端可以上传他的接口到服务器，或者你可以访问后台本地的环境也是可以的。

这样的有什么好处呢？

这样有什么好处呢？很明显你的改动在你的本地直接可见，也不需要上传到远程环境，再也不用把后端的代码放在你的本地再搭个环境来取数据，而且还要更新。所以搭建一个nginx本地环境很有意义，虽然node也是可以的，但是如果不太熟悉node的还是这样更简单一点。下面就说一下搭建本地的反向代理的步骤。

下载nginx

http://nginx.org/en/download.html

下载其中任意一个版本即可，我下载的是nginx-1.12.2，下载后解压到你的磁盘中，下面咱们就开始搭一个本地的代理。

了解文件目录

nginx–>conf–>nxinx.conf

默认的config：

#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;
    client_max_body_size 1024m;  
    #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  127.0.0.1;

        charset utf-8;

        #access_log  logs/host.access.log  main;

        location / {
            root   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;
        #}

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



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

}

nginx文件结构

...              #全局块

events {         #events块
   ...
}

http      #http块
{
    ...   #http全局块
    server        #server块
    { 
        ...       #server全局块
        location [PATTERN]   #location块
        {
            ...
        }
        location [PATTERN] 
        {
            ...
        }
    }
    server
    {
      ...
    }
    ...     #http全局块
}

1、全局块：配置影响nginx全局的指令。一般有运行nginx服务器的用户组，nginx进程pid存放路径，日志存放路径，配置文件引入，允许生成worker process数等。

2、events块：配置影响nginx服务器或与用户的网络连接。有每个进程的最大连接数，选取哪种事件驱动模型处理连接请求，是否允许同时接受多个网路连接，开启多个网络连接序列化等。

3、http块：可以嵌套多个server，配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置。如文件引入，mime-type定义，日志自定义，是否使用sendfile传输文件，连接超时时间，单连接请求数等。

4、server块：配置虚拟主机的相关参数，一个http中可以有多个server。

5、location块：配置请求的路由，以及各种页面的处理情况。

配置代理

首先我们要养成一个习惯就是尽量不懂默认的配置，而是自己在外面写好配置，然后include进来，这样方便修改，而不是在默认配置上更改。
1. 在默认的nginx.conf中加上一行代码，位置在第一个 ==server {== 的上面加入

    #引入自己定义的config
    include myconf/*.conf;

1. 在nginx.conf的同级目录下新建文件命名为++myconf++，并在里面新建一个conf文件，配置你的ngingx反向代理，下面是我的：

    server {
        listen       8090;    #监听端口  可以访问127.0.0.1:8090
        server_name  test.com;  #这里要是使用需要配本地的host

        #charset koi8-r;
        access_log  logs/k8s.log;

        location  = / {
          root   D:/domeos_test/DomeOS/front/app;  #你的项目的根目录
          index  index.html index.htm;
        }

        location /api/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host  $http_host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_set_header Connection "";
            proxy_pass   http://****:8080;  #****这里填上服务器地址
            proxy_redirect default ;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

启动服务器

nginx的服务器一定要启动哦，在这里写一下windows的，毕竟windows用户还是很多的

1、启动：
D:\nginx-1.12.2>start nginx或
D:\nginx-1.12.2>nginx.exe

2、停止：
D:\nginx-1.12.2>nginx.exe -s stop或
D:\nginx-1.12.2>nginx.exe -s quit
注：stop是快速停止nginx，可能并不保存相关信息；quit是完整有序的停止nginx，并保存相关信息。

3、重新载入Nginx：
D:\nginx-1.12.2>nginx.exe -s reload
当配置信息修改，需要重新载入这些配置时使用此命令。


4、重新打开日志文件：
D:\nginx-1.12.2>nginx.exe -s reopen

5、查看Nginx版本：
D:\nginx-1.12.2>nginx -v

启动后你就可以访问自己的服务地址试一试啦，有问题欢迎在下方评论。