使用nginx代理实现前后端分离开发调试，零基础教程

左手的ㄟ右手 2022-11-13 11:23 752阅读 0赞

# 使用nginx实现前后端分离开发调试 #

有一些老项目在前后端没有完全分离部署的情况下，前端人员调试是很不方便的，有的时候本地后端相关配置不正确，会导致无法正常调试，浪费大量时间。  
今天就来一起学习一下怎么使用Nginx代理来进行前后端分离开发。

## 一、Nginx是什么 ##

[Nginx][]是由俄罗斯人研发的（毛子威武），并且2004年发布了第一个版本，主要用来做服务器集群。  
通俗的讲就是控制客户端请求到底发送至哪台服务器的中间管理人。

*  [Nginx中文文档 - 点击跳转][Nginx_ -]

### 1. 特点： ###

*  稳定性极强，7\*24小时不间断运行。
 *  Nginx提供了非常丰富的配置实例。
 *  占用内存小。
 *  并发能力强，能承受5w并发。

### 2. 作用： ###

*  [反向代理][Link 1]，多台服务器集群。
 *  负载均衡，合理调度请求访问具体服务器。
 *  动静分离，自身提供了静态资源服务器。

## 二、Nginx安装 ##

已Windows安装举例：

### 1. 下载 ###

[Nginx官方下载地址 - 点击跳转][Nginx_ - 1]  
建议下载最新稳定版(Stable version)即可。

### 2. 安装 ###

将下载文件移动值全英文目录，然后进行解压即可。

## 三、Nginx运行 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70]

### 1. 双击运行 ###

直接双击`nginx.exe`文件即可运行，窗口会一闪而过，不推荐此方式。

### 2. 命令运行 ###

在该文件夹下打开cmd命令窗口，输入`nginx.exe`或`nginx`回车即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 1]

### 3. 测试访问 ###

没有修改配置的情况下，默认是拦截`80`端口的访问。  
在浏览器上直接访问`http://localhost`或`http://localhost:80`，出现下图及启动成功。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 2]

### 4. 常用命令 ###

*  `nginx` 启动
 *  `nginx -s stop` 停止
 *  `nginx -s quit` 安全退出
 *  `nginx -s reload` 重新加载配置文件

## 四、 Nginx配置 ##

配置文件为：`\conf\nginx.conf`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 3]

### 1. 端口号 ###

在`server>linsten`，改完之后需要`reload`一下。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 4]

### 2. 全部配置 ###

以下为Nginx配置文件的全部注释说明，井号开头的为注释说明。

#user nobody;
    #这个一般跟cpu的核数有关 4核 8线程 这里就配置8
    worker_processes  1;
    #表示的是全局的异常放置的地方
    #error_log logs/error.log;
    #也是全局错误存放的地方 notice:表示的是输出日志的格式(这里一般情况下不用改变)
    #error_log logs/error.log notice;
    #error_log logs/error.log info;
    #进程号存放的地方(进程号的主要作用是用来 从启、关闭这些命令用的)
    #pid logs/nginx.pid;
     
    #最大连接数(这个跟硬件也有关系)
    events { 
        worker_connections  1024;
    }
     
    #配置最多的就是在HTPP里面
    http { 
        #包含的这种类型(nginx支持的数据类型)
        include       mime.types;
        #默认的这个传输的数据类型 
        default_type  application/octet-stream;
        
        #定义了名字为main的这种数据格式
        log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                          '$status $body_bytes_sent "$http_referer" '
                          '"$http_user_agent" "$http_x_forwarded_for"';
        #局部请求日志存放的地方 main格式
        access_log  logs/access.log  main;
       
        #表示的是是否可以发送文件 on:打开
        sendfile        on;
        #tcp_nopush on;
        #keepalived连接的超时时间
        #keepalive_timeout 0;
        keepalive_timeout  65;
        #默认的压缩格式
        #gzip on;
       
         server{ 
     
           listen 9090;
           server_name localhost;
     
           location /{ 
             root bobo;
             index bobo.html;
           }
     
        }
        #虚拟了一个服务
        server { 
            #这个是服务的监听端口
            listen       80;
            #服务的名字
            server_name  localhost;
            
            #默认的编码格式
            #charset koi8-r;
            #80这个请求的日志存放的地方
            #access_log logs/host.access.log main;
            
            #定义的映射规则 10.7.182.79:80/
            location / { 
                #表示你如果当前路径是根路径下的 / 的话 那么会自动的访问到 根目录下的 html文件中去
                root   html;
                #而且访问的是html文件中的 index.htm index.html
                index  index.html index.htm;
            }
            #出现404的时候 访问的页面
            #error_page 404 /404.html;
            #表示出现 500 502 503 504的时候访问的htnml
            # 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;
        # }
        #}
     
    }

### 3. 练练手 ###

1.  使用HBuilder X 预览一个项目的H5端。  
    得到H5端的链接`http://localhost:8081`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 5]
2.  修改Nginx配置，代理H5端。  
    将8080端口的访问代理到8081上。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 6]
3.  通过两个网址都能正常访问。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 7]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 8]

## 五、前后端分离开发 ##

使用前面提到的`动静分离`功能。  
只在本机开发前端代码，在另一台电脑上获取后端服务。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 9]

### 1. 静态资源服务器 ###

*  创建或打开前端资源文件。  
    如，我在D盘的page文件夹下创建一个index.html的页面:
    
        <!DOCTYPE html>
        <html>
        	<head>
        		<meta charset="utf-8">
        		<title>静态资源</title>
        	</head>
        	<body>
        		<h1>这里是首页</h1>
        	</body>
        </html>
    
    并放上一张图片：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 10]
 *  Nginx配置静态资源文件夹。  
    将80端口号代理到D盘的page文件中。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_center]
 *  在浏览器中进行访问查看效果。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 11]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 12]  
    网页和图片都能正常通过浏览器访问到，静态资源部署成功。

### 2. 前后端联动 ###

只需要在配置中增加静态资源过滤和服务代理即可。

如果单个项目中集成了其他的项目可以解决。  
在加一个过滤，单独处理从`/view/`访问的内容。  
`注意alias配置中的路径格式和root时有所区别`

server { 
            listen       80;
            server_name  localhost;
            location / { 
                root  E:\page;
                index  index.html index.htm;
                # 配置静态资源在Nginx中打开
                location ~* \.(html|htm|js|css|png|jpg|gif)$ { }
                # 服务代理
                proxy_pass http://www.xxx.com;
            }
            location /view/ { 
                alias  E://page/data/;
                index  index.html index.htm;
    			# 配置静态资源在Nginx中打开
                location ~* \.(html|htm|js|css|png|jpg|gif)$ { }
                # 服务代理
                proxy_pass http://www.xxx.com;
            }
     }

[Nginx]: http://nginx.org
[Nginx_ -]: https://www.nginx.cn/doc
[Link 1]: https://blog.csdn.net/xiaohui_brook/article/details/115615845
[Nginx_ - 1]: http://nginx.org/en/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70]: /images/20221022/3d0c046c6043438bbe647f7145f65bf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 1]: /images/20221022/68ef8b6b343c473ea168bd05a046c477.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 2]: /images/20221022/9dbe673cb1574eaf93832b6adbd76168.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 3]: /images/20221022/b17a3590a89a4ce393262cce0641b64a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 4]: /images/20221022/f2767920e138498796f3dcf16e0ae097.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 5]: /images/20221022/a59545b9a25640b9bf71bd5a5863e49e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210413151356346.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA=,size_16,color_FFFFFF,t_70#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/2021041315142980.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA=,size_16,color_FFFFFF,t_70#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210413151440246.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA=,size_16,color_FFFFFF,t_70#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210413161158719.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA=,size_16,color_FFFFFF,t_70#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210413163813272.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA=,size_16,color_FFFFFF,t_70#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210413163456101.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20210413163904640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA=,size_16,color_FFFFFF,t_70#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20210413163916207.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1MTM0NjA=,size_16,color_FFFFFF,t_70#