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

曾经终败给现在 2022-05-17 05:22 156阅读 0赞

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

**这样的有什么好处呢？**

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

#### 下载nginx ####

[http://nginx.org/en/download.html][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

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

[http_nginx.org_en_download.html]: http://nginx.org/en/download.html