Nginx

linux 常用命令

sudo netstat -tulnp # 查看端口占用情况

操作文件

  • 新建文件夹
sudo mkdir -m 755 www
  • 删除文件夹
rmdir www

修改配置文件

编辑配置文件

使用 vi 编辑器，i 进入编辑模式，按下 esc 退出编辑模式，:wq 保存并退出

  • 编辑 nginx.conf 配置文件
sudo vi /etc/nginx/nginx.conf
  • 测试配置文件是否有语法错误
sudo nginx -t
  • 重启 nginx 服务
sudo systemctl restart nginx

修改文件权限

# 修改文件权限
sudo chmod 777 /etc/nginx/nginx.conf

# 重启 nginx 服务
sudo systemctl restart nginx

部署前端

部署 vue 项目

http {
    server {
      listen 9010;
      server_name kk.com; # 域名或 IP
      server_tokens off; # 隐藏服务器版本信息
      charset utf-8;

      location / {
        root /var/www/html/project;
        index index.html;
        try_files $uri $uri/ /index.html;
      }
    }
}
  • try_files 指令：用于按顺序检查文件或目录是否存在，返回第一个匹配成功的资源 ​​，若全部失败则触发内部重定向或返回错误。该配置常用于单页应用（SPA）路由兼容、静态资源回退等场景

部署前端静态资源

http {
    server {
      listen 9020;
      server_name kyan.net.cn; # 域名或 IP
      server_tokens off; # 隐藏服务器版本信息

      location /libs {
        root /data/www/static;
        autoindex on; # 开启目录浏览
        expires 30d; # 设置缓存过期时间
      }
      add_header 'Access-Control-Allow-Origin' '*'; # 允许跨域请求
    }
}

访问静态资源：http://kyan.net.cn:9020/libs/vue/3.5.13/vue.global.prod.min.js

vue 2.x采用gzip压缩

  • 安装 compression-webpack-plugin
pnpm add compression-webpack-plugin -D
  • 配置 webpack.config.js
const CompressionPlugin = require("compression-webpack-plugin");
const isProd = process.env.NODE_ENV === "production";
// gzip压缩配置
const productionGzipExtensions = ["js", "css"];

module.exports = {
  //... 配置项
  plugins: [
    ...(isProd
      ? [
          new CompressionWebpackPlugin({
            algorithm: "gzip",
            test: new RegExp(
              "\\.(" + productionGzipExtensions.join("|") + ")$"
            ),
            threshold: 8192, // 只有大小大于该值的资源会被处理，这里设置为8kb
            minRatio: 0.8, // 压缩率小于这个值的资源才会被处理
            deleteOriginalAssets: false, // 是否删除原文件
          }),
        ]
      : []),
    //... 配置项
  ],
};

nginx配置gzip压缩

http {
    server {
      listen 9010;
      server_name kk.com; # 域名或 IP
      server_tokens off; # 隐藏服务器版本信息
      charset utf-8;

      gzip on; #开启或关闭gzip on off
      gzip_disable "msie6"; #不使用gzip IE6
      gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
      gzip_buffers 4 16k; #buffer 不用修改
      gzip_comp_level 6; #压缩级别:1-9，数字越大压缩的越好，时间也越长，6是性能和压缩率的平衡点
      gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php; #  压缩文件类型
      # gzip_vary off;  #跟Squid等缓存服务有关，on的话会在Header里增加 "Vary: Accept-Encoding"

      location / {
        root /var/www/html/project;
        index index.html;
        try_files $uri $uri/ /index.html;
      }
    }
}
  • 重要配置参数详解
  1. 核心配置
gzip on;                    # 启用gzip压缩
gzip_comp_level 6;          # 压缩级别，1-9，6是性能和压缩率的平衡点
gzip_min_length 1k;         # 最小压缩文件大小，1KB以下不压缩
gzip_buffers 4 16k;         # 设置4个16KB的缓冲区
  1. 压缩类型配置
gzip_types
text/plain              # 普通文本
text/css                # CSS文件
application/javascript  # JavaScript文件
application/json        # JSON数据
text/xml                # XML文件
application/xml         # XML应用
image/svg+xml           # SVG图片
font/*                  # 字体文件
application/x-font*;    # 各种字体格式
  1. 高级配置
gzip_vary on;               # 添加Vary: Accept-Encoding头，用于代理缓存
gzip_proxied any;           # 对所有代理请求启用gzip
gzip_http_version 1.1;      # 使用HTTP/1.1
gzip_disable "MSIE [1-6]\."; # 禁用IE6及以下版本的gzip（有bug）
gzip_methods GET POST;      # 仅对GET和POST请求压缩
  1. 静态gzip支持（重要优化）
gzip_static on;             # 启用静态gzip支持

gzip_static 的作用

gzip_static on 需要 nginx 编译时包含 --with-http_gzip_static_module 模块。此配置会优先查找并发送预压缩的 .gz 文件，大幅提升性能。

为啥 Nginx 已经有了 gzip 压缩，Webpack 这里又整了个 gzip 呢？

注意

  1. 因为如果全都是使用 Nginx 来压缩文件，会耗费服务器的计算资源，如果服务器的 gzip_comp_level 配置的比较高，就更增加服务器的开销，相应增加客户端的请求时间，得不偿失。

  2. 如果压缩的动作在前端打包的时候就做了，把打包之后的高压缩等级文件作为静态资源放在服务器上，Nginx 会优先查找这些压缩之后的文件返回给客户端，相当于把压缩文件的动作从 Nginx 提前给 Webpack 打包的时候完成，节约了服务器资源，所以一般推荐在生产环境应用 Webpack 配置 gzip 压缩。

  3. 因此 gzip_static on 配置项，是为了在 Nginx 压缩文件之前，先查找并返回预压缩的 .gz 文件，节约服务器资源，提升性能。

最后编辑: