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

最新推荐文章于 2024-07-26 08:49:59 发布

苛学加

最新推荐文章于 2024-07-26 08:49:59 发布

阅读量1.6k

点赞数 2

分类专栏：前端展现文章标签： nginx 前后端分离

本文链接：https://blog.csdn.net/xiaohui_brook/article/details/115250516

版权

前端展现专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

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

一、Nginx是什么

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

Nginx中文文档 - 点击跳转

1. 特点：

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

2. 作用：

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

二、Nginx安装

已Windows安装举例：

1. 下载

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

2. 安装

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

三、Nginx运行

在这里插入图片描述

1. 双击运行

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

2. 命令运行

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

3. 测试访问

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

4. 常用命令

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

四、 Nginx配置

配置文件为：\conf\nginx.conf
在这里插入图片描述

1. 端口号

在server>linsten，改完之后需要reload一下。
在这里插入图片描述

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. 练练手

使用HBuilder X 预览一个项目的H5端。
得到H5端的链接http://localhost:8081
修改Nginx配置，代理H5端。
将8080端口的访问代理到8081上。
通过两个网址都能正常访问。

五、前后端分离开发

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

1. 静态资源服务器

创建或打开前端资源文件。
如，我在D盘的page文件夹下创建一个index.html的页面:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>静态资源</title>
	</head>
	<body>
		<h1>这里是首页</h1>
	</body>
</html>

并放上一张图片：
在这里插入图片描述

Nginx配置静态资源文件夹。
将80端口号代理到D盘的page文件中。
在浏览器中进行访问查看效果。

网页和图片都能正常通过浏览器访问到，静态资源部署成功。

2. 前后端联动

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

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

如果单个项目中集成了其他的项目可以解决。
在加一个过滤，单独处理从/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;
        }
 }