Ingeniería front-end: administre sus recursos front-end con Nginx

prefacio

En el desarrollo de proyectos front-end, podemos iniciar el servicio de devserveradministración recursos estáticos, pero para garantizar la estabilidad después del lanzamiento en línea, generalmente elegimos un servidor estático estable + de alto rendimiento para administrar los recursos front-end.

Como parte clave de la ingeniería front-end, aprendamos el uso común de Nginx en este artículo.

Nginx (motor x) es un servidor web proxy inverso y HTTP de alto rendimiento que también proporciona servicios IMAP/POP3/SMTP.

Uso regular

Se omite el proceso de instalación de Nginx, después de todo, es una operación básica y Windows se instala con un solo clic.

Recuerde primero algunos comandos comunes, los usaremos continuamente más adelante:

iniciar nginx: iniciar
nginx nginx -s recargar: la recarga tiene efecto después de modificar la configuración
nginx -s parada: parada rápida
nginx nginx -s quit: detener nginx de forma completa y ordenada

Recursos estáticos de proxy inverso

Para el front-end, el problema más común es el proxy de recursos estáticos.Elegimos el proyecto VUE como prueba;

Use Vue CLI para crear un proyecto de demostración, ejecútelo y yarn buildgenere siguientes recursos estáticos:

Copie los recursos estáticos generados anteriormente en cualquier directorio (la ruta es arbitraria, siempre que esté satisfecho )

Después de modificar el nginx.confarchivo , inicie Nginx.

nginx.confLos archivos están todos en la carpeta de configuración del directorio de instalación de Nginx

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;
        }
    }
}
复制代码

También es normal informar un error al iniciar directamente. La ruta del recurso es incorrecta. En este momento, puede optar por usar una ruta relativa o modificar la ruta raíz raíz a dist. Aquí, ya que estamos explicando la configuración de Nginx, elija cambiar la ruta raíz raíz a dist y luego Reiniciar acceso.

这个时候大家可以注意到，我们的访问路径已经从 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 来请求掘金的接口 api.juejin.cn/tag_api/v1/… :

import axios from "axios";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    axios
      .get("https://api.juejin.cn/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 juejin.cookieboty.com;
    location / {
        proxy_pass  https://api.juejin.cn/;
    }
}
复制代码

浏览器直接访问 juejin.cookieboty.com/tag_api/v1/… 出现如下结果则代表反向代理接口没问题。

但是在项目中直接运行的时候依然有 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 多项目配置

Normalmente tenemos muchos proyectos que utilizan la ruta del historial, si se mantiene el mismo nombre de dominio pero hay que diferenciar diferentes proyectos según el directorio, el método de configuración anterior no se puede implementar de forma automática, y hay que especificar manualmente el directorio de archivos, lo que obviamente no es el caso Para el resultado que queremos, podemos modificar las reglas de coincidencia con la ayuda de las variables de parámetros enumeradas anteriormente, y hacer coincidir la ruta de recurso estática correspondiente de acuerdo con la ruta de acceso.

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

Para completar la demostración anterior, debe modificar la ruta del proyecto de demostración de vue a la ruta del directorio correspondiente para completar.

Documentación de referencia

Detalles de configuración de Nginx

Carreras

El Centro de I+D de tecnología de experiencia es el principal responsable de brindar soporte técnico para todos los productos finales del Grupo Xingyun con tecnología de experiencia, brindando a los usuarios la mejor experiencia y haciendo que la digitalización esté al alcance. La arquitectura técnica incluye construcción, ingeniería, micro front-end, especificación de interfaz de usuario, eficiencia de I+D, CI/CD, inteligencia de IA y otros sistemas técnicos. El centro de investigación y desarrollo de tecnología de experiencia está compuesto por un equipo de front-end, un equipo de clientes y un equipo de negocios ecológicos de Xingyun. El tamaño del equipo es de más de 60. Los miembros son de compañías de Internet como Ali, Tencent, Baidu, Tuya, etc. incluyendo muchos expertos técnicos, con gran fuerza.

Todos los productos anteriores se completan con la participación completa de los estudiantes en el equipo de tecnología de la experiencia, ya sea front-end y cliente, u operación y mantenimiento, base de datos o tecnología de IA.

Si desea tener una mayor búsqueda de tecnología, tiene muchas ideas para la ingeniería pero no tiene oportunidades ni escenarios, y desea experimentar un producto valioso de 0-1 y luego de 1-10 , entonces hay mucha diversión, interesante Los productos tecnológicos significativos te están esperando .