nginx: pasos detallados para implementar proyectos front-end (empaquetado de compilación de proyectos vue + implementación de nginx)

Tabla de contenido

Capítulo 1 Prefacio

Capítulo 2 Preparación

2.1 Comprender el empaquetado del proyecto

2.1.1 Comando de embalaje

2.1.2 Comprender los comandos npm run server/dev y npm run build

2.2 Comprender la configuración de parámetros de nginx

2.2.1 Comandos básicos de nginx de uso común

2.2.2 Configuración predeterminada

2.2.3 Crear sitios con diferentes sitios web

2.2.4 Directorios cuyo acceso está prohibido y configuraciones relacionadas con la aplicación con un solo clic para directorios de verificación de certificados SSL

2.2.5 Establecer el tiempo de caducidad según el tipo de archivo

2.2.6 Deshabilitar el almacenamiento en caché de archivos

2.2.7 Problemas entre dominios

Capítulo 3 Referencia de configuración

Capítulo 1 Prefacio

En nuestro desarrollo front-end, a menudo necesitamos colocar los recursos estáticos del front-end en el servidor para ver el efecto , por lo que necesitamos usar nginx para configurarlo . ! Este artículo utiliza principalmente npm como ejemplo y, por supuesto, Yarn y pnpm , ¡pero el conocimiento es el mismo! ! !

Capítulo 2 Preparación

2.1 Comprender el empaquetado del proyecto

2.1.1 Comando de embalaje

No hace falta decir que debe ser npm run build .

npm run build 或者
yarn run build

Pero cuando el gerente nos dice, usted hace un paquete de prueba y me lo envía/hace un paquete de generación y me lo envía, ¿qué debemos hacer cuando se trata de empaquetar para múltiples entornos? A continuación, hablemos de ello en función de comprensión del editor: condición del embalaje

2.1.2 Comprender los comandos npm run server/dev y npm run build

npm ERR! Falta script: "dev" npm ERR! npm ERR! Para ver una lista de scripts, ejecute (npm run server/dev/build)_❆VE❆ blog-CSDN blog

2.2 Comprender la configuración de parámetros de nginx

2.2.1 Comandos básicos de nginx de uso común

//开启服务
1.start nginx.exe // cmd命令进入nginx文件夹后，使用该命令
2.直接点击nginx目录下的nginx.exe

// 停止服务
nginx -s stop // 快速停止nginx
nginx -s quit // quit是完整有序的停止nginx

//重新加载配置文件
nginx -s reload // 热加载

2.2.2 Configuración predeterminada

nginx.conf en nginx-1.21.0\conf

# 工作进程的数量
worker_processes  1; # 与worker_connections乘积表示实际处理事件的总数
events {
    worker_connections  1024; # 每个工作进程连接数
}

http {
    include       mime.types;  # 文件扩展名与文件类型映射表
    include       self/ *.conf; # 独立出不同网站不同配置文件,引入其他的配置文件
    default_type  application/octet-stream; # 默认文件类型

    # 日志格式
    log_format  access  '$remote_addr - $remote_user [$time_local] $host "$request" '
                  '$status $body_bytes_sent "$http_referer" '
                  '"$http_user_agent" "$http_x_forwarded_for" "$clientip"';
    access_log  /srv/log/nginx/access.log  access; # 日志输出目录
    gzip  on; # gzip模块设置，设置是否开启gzip压缩输出
    sendfile  on; # 开启文件传输模式
    #tcp_nopush  on; # 减少网络报文数量
   
    #keepalive_timeout  0; # 连接不超时，单位 s
    # 链接超时时间，自动断开
    keepalive_timeout  60;

    # 虚拟主机
    server {
        listen       80; # 监听地址以及端口
        server_name  localhost; # 浏览器访问域名

        charset utf-8; # 默认字符集
        access_log  logs/localhost.access.log  access;

        # 路由
        location / {
            root   html; # 访问根目录 nginx-1.21.0\html
            index  index.html index.htm; # 入口文件,可以接收index、index.html、index.htm文件
        }
    }
}

2.2.3 Crear sitios con diferentes sitios web

En el otro directorio del archivo de configuración 'self' , agregue el archivo de configuración 'xxx.conf' del nuevo sitio

server {
    listen       8070; # 自定义监听端口
    server_name  127.0.0.1; # 浏览器访问域名

    charset utf-8;
    access_log  logs/xx_domian.access.log  access;

    # 路由
    location / {
        root   dist; # 访问根目录 nginx-1.21.0\dist
        index  index.html index.htm; # 入口文件类型
    }
}

2.2.4 Directorios cuyo acceso está prohibido y configuraciones relacionadas con la aplicación con un solo clic para directorios de verificación de certificados SSL

    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }
    
    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }

2.2.5 Establecer el tiempo de caducidad según el tipo de archivo

    # location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    # {
    #     expires      30d; // 30天过期
    #     access_log off;
    # }
    
    # location ~ .*\.(js|css)?$
    # {
    #     expires      12h;
    #     access_log off; 
    # }

2.2.6 Deshabilitar el almacenamiento en caché de archivos

location ~* \.(js|css|png|jpg|gif)$ {
    add_header Cache-Control no-store;
}

2.2.7 Problemas entre dominios

Escenas:

-- La configuración de ruta utilizada por nuestro front-end es: http://127.0.0.1:8070/ (configuración nginx)

--La ruta que se debe solicitar al backend es: http://192.168.1.19:8087/(configuración del paquete del proyecto)

En este momento, cuando el front-end envía una solicitud al back-end, ¡definitivamente habrá dominios cruzados! !

Solución: inicie el servidor nginx, configure server_name en 127.0.0.1 , luego configure la ubicación correspondiente para interceptar las solicitudes de front-end que necesitan solicitudes entre dominios y, finalmente, envíe la solicitud al back-end que necesita solicitar. Camino , toma el mío como ejemplo:

server
{
    listen 8001;
    server_name 127.0.0.1;

    location /api/ {
         proxy_pass  http://192.168.1.19:8087/;
         proxy_http_version 1.1; # http版本
         proxy_set_header Upgrade $http_upgrade; # 继承地址，这里的$http_upgrade为上面的proxy_pass
         proxy_set_header Connection "upgrade"; 
         proxy_set_header  X-Real-IP $remote_addr; # 传递的ip
         proxy_connect_timeout 60;
         proxy_send_timeout  60;
         proxy_read_timeout 3000;
    }
}

Capítulo 3 Referencia de configuración

El editor proporciona una configuración básica como referencia——

server
{
    listen 8070;
    server_name 127.0.0.1;
    index index.php index.html index.htm default.php default.htm default.html;
    root dist;

    #REWRITE-END
    
    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }
    
    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }
    
    # location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    # {
    #     expires      30d;
    #     access_log off;
    # }
    
    # location ~ .*\.(js|css)?$
    # {
    #     expires      12h;
    #     access_log off; 
    # }
    location /api/ {
        proxy_pass  http://192.168.1.19:8087/;
        proxy_http_version 1.1; # http版本
        proxy_set_header Upgrade $http_upgrade; # 继承地址，这里的$http_upgrade为上面的proxy_pass
        proxy_set_header Connection "upgrade"; 
        proxy_set_header  X-Real-IP $remote_addr; # 传递的ip
        proxy_connect_timeout 60;
        proxy_send_timeout  60;
        proxy_read_timeout 3000;
    }
    
    location / {
      try_files $uri $uri/ /index.html;
      index  index.html index.htm;
    }
    
}