nginx部署发布Vite项目

1 引言

在之前的文章《Ubuntu云服务器上部署发布Vite项目》中笔者使用了Vite提供的预览服务(npm run preview)来在云服务器上发布Web应用。这样做轻量应用是没问题的，不过遇到一些专业的问题就不行了，最好还是使用专业的HTTP服务器。除此之外，笔者还有一些其他的需求：

1. 前后端分离的项目，需要将后端的服务转发到前端服务IP相同的端口（443端口）。
2. 子域名的项目，需要将服务转发到主域名服务IP相同的端口（443端口）。

这个时候就需要使用nginx，毕竟nginx不仅是一款轻量、高性能的HTTP服务器，还支持转发和代理服务功能。不过上述两个问题后面在讨论，本篇就详细记录一下部署发布单个Vite项目的问题。

2 详述

2.1 操作

首先，还是需要先安装nginx：

sudo apt install nginx

然后，准备Vite项目，需要确保项目已经通过npm run build构建好，并且生成了静态文件目录（通常是dist目录下）。

接下来，在/etc/nginx/sites-available/目录下创建一个新的配置文件，例如笔者这里创建一个charlee44文件。在这个文件中填入如下内容：

server { # 定义服务器
    listen 80; # 监听80端口
    server_name charlee44.com; # 服务器域名

    root /path/to/your/project/dist; # 项目build后的实际路径
    index index.html; # 主页

    location / {  #位置块，定义路由
        try_files $uri $uri/ /index.html;
    }
}

sites-available目录下创建的配置是可用的配置，要真正启用这个配置需要在sites-enabled目录中，因此创建软链接：

sudo ln -s /etc/nginx/sites-available/charlee44 /etc/nginx/sites-enabled/

最后就是测试Nginx配置并重启服务，在终端输入以下命令：

sudo nginx -t
sudo systemctl restart nginx

2.2 配置

上面的配置很好理解，基本已经注释清楚了，就是位置块部分有点难理解，具体意思是：

• $uri：先看看有没有和请求路径完全一致的文件存在，比如 /about.html
• $uri/：如果没有，再看看是否是一个目录，比如 /about/
• 如果都没有，就返回 /index.html

不太理解也没关系，等以后有需求了再来了解清楚。如果这个配置测试没有问题，在访问主页时页面提示：

500 Internal Server Error
nginx/1.18.0 (Ubuntu)

那么有可能是权限不够，可以检查一下文件/var/log/nginx/error.log是否有类似“Permission denied”的提示。Ubuntu中有些目录是受保护的目录（例如/root目录），可以将build项目移动到nginx可以正常访问的目录，例如/var下目录。

如果想配置HTTPS服务，那么就可以使用如下配置：

# HTTP 跳转 HTTPS
server {
    listen 80;
    server_name charlee44.com;
    return 301 https://$host$request_uri; # 返回301永久重定向，将请求跳转到HTTPS版本
}

# HTTPS 服务
server {
    listen 443 ssl;
    server_name charlee44.com;

    # SSL证书
    ssl_certificate /etc/nginx/ssl/charlee44.com/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/charlee44.com/charlee44.com.key;

    ssl_protocols TLSv1.2 TLSv1.3; # 启用安全的加密协议版本
    ssl_ciphers HIGH:!aNULL:!MD5; # 设置加密套件，禁用不安全的算法

    root /var/www/charlee44.com;
    index index.html;

    location / {
        try_files $uri $uri/ =404; # 尝试查找对应文件或目录，否则返回404页面
    }
}

这段配置的意思是如果用户通过HTTP访问网站，那么就将请求转发到HTTPS的443端口上。另外，HTTPS最重要的一点还有需要申请SSL证书（可以参考笔者之前的文章《在Ubuntu上使用Certbot申请Let’s Encrypt SSL证书》来进行申请）。

2.3 优化

上述HTTPS服务的配置，经过笔者的实际测试，性能比不上Vite提供的预览服务(npm run preview)。原因是因为nginx是高度可配，还有很多优化选项可以配置，具体配置如下：

# HTTP 跳转 HTTPS
server {
    listen 80;
    server_name charlee44.com;
    return 301 https://$host$request_uri;
}

# HTTPS 服务
server {
    listen 443 ssl http2;  #  启用 HTTP/2
    server_name charlee44.com;

    ssl_certificate /etc/letsencrypt/live/charlee44.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/charlee44.com/privkey.pem;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    root /var/www/charlee44.com;
    index index.html;

    #  静态资源缓存 + Cache-Control
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires max;
        add_header Cache-Control "public, immutable";
        log_not_found off;
    }

    #  HTML 文件缓存短一些（可选）
    location ~ \.html$ {
        expires 1h;
    }

    #  默认处理入口
    location / {
        try_files $uri $uri/ =404;
    }

    #  启用 Gzip 压缩
    gzip on;
    gzip_types application/javascript text/css;
    gzip_comp_level 6;

    #  提升文件传输效率
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
}

相比之前的配置，在性能上主要优化了以下几点：

2.3.1 启用HTTP/2

使用HTTP/2协议可以实现多路复用、头部压缩等特性，显著提升加载速度：

listen 443 ssl http2;  #  启用 HTTP/2

2.3.2 静态资源缓存控制

设置浏览器缓存策略，减少重复请求，加快页面加载速度：

#  静态资源缓存 + Cache-Control
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires max;  # 设置些资源永不过期
    add_header Cache-Control "public, immutable";   # 设置缓存策略：公开可缓存，内容不变
    log_not_found off; # 不记录不存在的文件的404日志
}

#  HTML 文件缓存短一些（可选）
location ~ \.html$ {
    expires 1h; # HTML文件可能经常更新，设置较短缓存时间
}

2.3.3 Gzip压缩

启用Gzip并指定压缩类型，以减少传输体积，加快网页加载速度（尤其对 JS/CSS）：

#  启用 Gzip 压缩
gzip on;
gzip_types application/javascript text/css;
gzip_comp_level 6; # 启用 Gzip 压缩时，使用压缩级别 6（共 1 到 9 级）

2.3.4 文件传输优化

提升网络传输效率，降低延迟，提高吞吐量：

#  提升文件传输效率
sendfile on;
tcp_nopush on;  # 合并头部+正文，减少小包数量
tcp_nodelay on;   # 对动态请求或 WebSocket 立即发送数据

3 结语

其实HTTP服务器的性能优化远不止这点内容，针对本篇内容的性能优化配置，笔者就可以想到两点:

1. 静态资源缓存控制的性能优化是通知客户端缓存文件资源，那么是否可以在服务器上缓存文件资源到内存呢？这样当客户端请求过来，就可以不经过硬盘直接传输内存中的数据，这样可以节省一次磁盘IO。
2. 启用Gzip压缩，压缩文件也是算在客户端请求响应时间的，那么是否可以预先将文件按照最高级别进行压缩，然后需要的时候再直接传输出去呢？这样可以节省临时文件的时间，同时也最大程度的减少的文件传输体积。

其实这两个问题，甚至更多的性能优化思路，nginx都有一定程度的解决方案，就留待以后再研究吧。