Nginx实现网站动静分离

这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战

引言：现在的项目基本上都是采用前后端分离，但是对于一些不是采用前后端分离的项目来说，利用nginx实现动静分离，对于系统性能会有部分提升，本文就利用nginx来实现项目的前后端分离。

关于nginx动静分离、负载均衡、正向代理以及反向代理的介绍在我之前的文章中有介绍：Nginx简单介绍 (juejin.cn)，各位看官可以看看，觉得好的话可以点个赞！

Nginx动静分离

预备知识

关于Nginx的安装，本文就不介绍了。Nginx安装好后有几个目录比较重要：

• /usr/sbin:该目录存放了nginx的命令
• /etc/nginx：该目录下有个存放配置文件的目录conf.d（一会我们配置文件要访问该目录）
• /usr/share/nginx：主要用于存放一些静态文件

当然有可能安装的目录并不一样，这个时候可以通过whereis nginx来进行查看与nginx有关的目录或文件。

修改配置文件

接下来进行配置nginx的配置文件，首先先访问/etc/nginx/conf.d ，并查看其目录下的文件，可以看见default.conf文件，vim修改该文件。

设置域名

将下面的server_name改成自己服务器的域名或者是本机localhost，listen 后面接的是端口号，默认为80端口。

server {
    listen       80;
    server_name  www.XXXX.XXX;
    error_log   /usr/share/nginx/error.log;
    }

进行代理

然后进行代理,主要是访问上面的 www.XXXX.XXX:80/ 的时候默认跳转到http://X.X.X.X:5050.

 location / {
        proxy_pass http://X.X.X.X:5050;  # 该地址为转发地址
        proxy_redirect off;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        client_max_body_size 100m;
    }

动静分离

代理完后就到了我们的动静分离环节。

    add_header Allow "GET, POST, HEAD" always;  # 只允许GET、POST、HEAD三种方法
    if ( $request_method !~ ^(GET|POST|HEAD)$ ) {  # 如果不是上述三种方法，直接返回 405
        return 405;
    }

    location /static/(.*) {
            root   /usr/share/nginx/html/;  # 该目录下存放一些静态文件
        autoindex on;
    }
    #拦截静态资源
    location ~* .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ {
        root /usr/share/nginx/html/static;
    }

结合后，进入/usr/sbin目录下,然后./nginx -t进行验证配置文件是否正确，得到如下提示即验证正确。

接下来再输入./nginx -s reload重启nginx，接下来就可以测试下是否实现动静分离了！可以看见下图访问的资源很少，这样就可以有效的提高页面加载速度。