使用 Nginx 管理你的前端资源

前言
在前端项目开发中，我们可以启动 devserver 管理静态资源服务，但是发布线上后要保证稳定，一般会选择一个高效能 + 稳定的静态服务器来管理前端资源。

作为前端工程化的关键一环节，这一篇我们来一起学习一下 Nginx 的常见用法。

Nginx (engine x) 是一个高性能的 HTTP 和反向代理 web 服务器，同时也提供了IMAP/POP3/SMTP 服务。

常规使用
Nginx 的安装过程就省略了，毕竟是基操，WIndows 都是一键安装的。

先记住几个常用的命令，待会我们会不断的使用到它们：

start nginx：启动
nginx nginx -s reload：修改配置后重新加载生效
nginx -s stop：快速停止
nginx nginx -s quit：完整有序的停止 nginx
反向代理静态资源
对于前端来说，最常见的还是代理静态资源的问题，我们挑选 VUE 项目作为测试；

使用 Vue CLI 创建一个 demo 项目，运行 yarn build 输出如下静态资源：

将上述的生成的静态资源复制到任意目录（路径随意，你开心就行）

修改 nginx.conf 文件后，启动 Nginx。

nginx.conf 文件都在 Nginx 安装目录 config 文件夹下

http {
    include       mime.types;
    default_type  application/octet-stream;
    keepalive_timeout  65;
    #gzip  on;
    server {
        listen       80;
        location / {
            root   html; // 切换成你的静态资源目录
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}
复制代码

直接启动报错也很正常，资源的路径不对，这个时候可以选择构建的时候使用相对路径或者修改 root 根路径为 dist 即可，这里由于我们是讲解 Nginx 配置，所以选择将 root 根路径修改为 dist 再重启访问。

这个时候大家可以注意到，我们的访问路径已经从 http://127.0.0.1/dist 改变成 http://127.0.0.1/。

如果你是默认 vue-cli 创建的带路由的项目，那么可以点击一下 About，是可以正常访问，但是刷新之后就会变成 404，这个很正常，默认的路由模式是 hitstory，只需要加上 try file 就可以了。

location / {
    root   html/dist/;
    # index  index.html index.htm;
    try_files $uri $uri/ / ;
}
复制代码

同时，我们在正常使用静态资源的时候也并不是根据 ip 来访问，这里我们可以根据 server_name 配置域名访问。

首先本地 host 配置一个域名 dns 解析到本地:

127.0.0.1 fe.cookieboty.com
复制代码

再在 location 里面添加 server_name 配置，重启 nginx 即可。

 server {
    listen       80;
    server_name fe.cookieboty.com; // 配置监听域名
    location / {
        root   html/dist/;
        try_files $uri $uri/ / ;
    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {
        root   html;
    }
}
复制代码

反向代理接口
反向代理接口也比较简单，经常用碰到的还是跨域的问题，所以才需要代理。

接下来，我们来代理一下掘金的接口看看，正常这种接口再我们的项目中使用是会有跨域的问题。

在 demo 项目中使用 axios 来请求接口

import axios from "axios";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    axios
      .get("https://www.crmeb.com/tag_api/v1/query_category_briefs")
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  },
};
复制代码

虽然没有报跨域的错误，但是直接被 403 拦截了，资源被服务器拦截了。我们用 nginx 的 proxy_pass 来代理这个请求看看。

 server {
    listen       80;
    server_name www.crmeb.com;
    location / {
        proxy_pass  https://www.crmeb.com;
    }
}
复制代码

出现如下结果则代表反向代理接口没问题。

但是在项目中直接运行的时候依然有 403 的错误，如果代理没问题，那就是请求参数有不一致的地方，导致被服务器拒绝，简单对比一下，发现 header 里面的 Orgin 参数有不一致的情况，所以我们修改将转发之后请求头部的 Orgin 设置为 api.juejin.cn 后重启看下效果：

 server {
    listen       80;
    server_name juejin.cookieboty.com;

    location / {
        proxy_set_header Origin https://api.juejin.cn; // 新增 Origin 修改代码
        proxy_pass  https://api.juejin.cn/;
    }
}
复制代码

完美，demo 项目已经正常代理拿到掘金分类接口的数据了。

似乎没有遇到 cors 跨域的问题，那么后面再说这个好了。

Nginx 参数配置详解
正常根据上述配置，已经可以简单的使用 nginx 的反向代理了，为了后续的更灵活的配置，我们也一起学习一下 Nginx 的参数配置：

nginx.conf 组成
...              #全局块

events {         #events块
   ...
}

http      #http块
{
    ...   #http全局块
    server        #server块
    { 
        ...       #server全局块
        location [PATTERN]   #location块
        {
            ...
        }
        location [PATTERN] 
        {
            ...
        }
    }
    server
    {
      ...
    }
    ...     #http全局块
}
复制代码

nginx.conf 由以下 5 个模块构成：

全局块：配置影响 nginx 全局的指令。一般有运行 nginx 服务器的用户组，nginx 进程 pid 存放路径，日志存放路径，配置文件引入，允许生成 worker process 数等。
events：配置影响 nginx 服务器或与用户的网络连接。有每个进程的最大连接数，选取哪种事件驱动模型处理连接请求，是否允许同时接受多个网路连接，开启多个网络连接序列化等。
http：可以嵌套多个 server，配置代理，缓存，日志定义等绝大多数功能和第三方模块的配置。如文件引入，mime-type 定义，日志自定义，是否使用 sendfile 传输文件，连接超时时间，单连接请求数等。
server：配置虚拟主机的相关参数，一个 http 中可以有多个 server。
location：配置请求的路由，以及各种页面的处理情况。
对于前端来说一般使用 server + location 两个模块足够了。

变量参数
全部的 nginx 变量还是非常多的，简单列举几个可能会使用到的：

$args #请求中的参数值
$uri #请求中的当前URI
$host #优先级：HTTP请求行的主机名>“HOST"请求头字段>符合请求的服务器名.请求中的主机头字段，如果请求中的主机头不可用，则为服务器处理请求的服务器名称
$hostname #主机名
$request_method #HTTP请求方法，通常为"GET"或"POST”
$server_name #服务器名
$1 #location 正则匹配的第一个参数，以此类推可以有 $2…
复制代码
history 多项目配置
通常我们会有很多项目都会使用到 history 路由，如果保持同一个域名但是要根据目录来区分不同的项目的话，之前的配置方式是不能自动实现的，需要手动的指定文件目录，这下显然并不是我们想要的结果，可以借助前面列举的参数变量，修改一下匹配规则，根据访问路径来匹配对应的静态资源路径。

location ~ ^(/[^/]+) {  
    root   html/dist/;
    try_files $uri $uri/ $1/;
    index index.html;
}  
复制代码

要完成上述的演示，需要 vue 的 demo 项目修改 path 为对应的目录路径才能完成。

最后
如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star:http://github.crmeb.net/u/defu不胜感激 ！

完整源码下载地址：https://market.cloud.tencent.com/products/33396

PHP学习手册：https://doc.crmeb.com
技术交流论坛：https://q.crmeb.com