nginx部署发布Vite项目

1 引言

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

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

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

2.1 操作

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

1. sudo apt install nginx

复制代码

然后，准备Vite项目，需要确保项目已经通过npm run build构建好，并且生成了静态文件目录（通常是dist目录下）。
接下来，在/etc/nginx/sites-available/目录下创建一个新的配置文件，例如笔者这里创建一个charlee44文件。在这个文件中填入如下内容：

1. server { # 定义服务器
2.     listen 80; # 监听80端口
3.     server_name charlee44.com; # 服务器域名
5.     root /path/to/your/project/dist; # 项目build后的实际路径
6.     index index.html; # 主页
8.     location / {  #位置块，定义路由
9.         try_files $uri $uri/ /index.html;
10.     }
11. }

复制代码

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

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

复制代码

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

1. sudo nginx -t
2. sudo systemctl restart nginx

复制代码

2.2 配置

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

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

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

1. 500 Internal Server Error
2. nginx/1.18.0 (Ubuntu)

复制代码

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

1. # HTTP 跳转 HTTPS
2. server {
3.     listen 80;
4.     server_name charlee44.com;
5.     return 301 https://$host$request_uri; # 返回301永久重定向，将请求跳转到HTTPS版本
6. }
8. # HTTPS 服务
9. server {
10.     listen 443 ssl;
11.     server_name charlee44.com;
13.     # SSL证书
14.     ssl_certificate /etc/nginx/ssl/charlee44.com/fullchain.pem;
15.     ssl_certificate_key /etc/nginx/ssl/charlee44.com/charlee44.com.key;
17.     ssl_protocols TLSv1.2 TLSv1.3; # 启用安全的加密协议版本
18.     ssl_ciphers HIGH:!aNULL:!MD5; # 设置加密套件，禁用不安全的算法
20.     root /var/www/charlee44.com;
21.     index index.html;
23.     location / {
24.         try_files $uri $uri/ =404; # 尝试查找对应文件或目录，否则返回404页面
25.     }
26. }

复制代码

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

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

1. # HTTP 跳转 HTTPS
2. server {
3.     listen 80;
4.     server_name charlee44.com;
5.     return 301 https://$host$request_uri;
6. }
8. # HTTPS 服务
9. server {
10.     listen 443 ssl http2;  # ✅ 启用 HTTP/2
11.     server_name charlee44.com;
13.     ssl_certificate /etc/letsencrypt/live/charlee44.com/fullchain.pem;
14.     ssl_certificate_key /etc/letsencrypt/live/charlee44.com/privkey.pem;
16.     ssl_protocols TLSv1.2 TLSv1.3;
17.     ssl_ciphers HIGH:!aNULL:!MD5;
19.     root /var/www/charlee44.com;
20.     index index.html;
22.     # ✅ 静态资源缓存 + Cache-Control
23.     location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
24.         expires max;
25.         add_header Cache-Control "public, immutable";
26.         log_not_found off;
27.     }
29.     # ✅ HTML 文件缓存短一些（可选）
30.     location ~ \.html$ {
31.         expires 1h;
32.     }
34.     # ✅ 默认处理入口
35.     location / {
36.         try_files $uri $uri/ =404;
37.     }
39.     # ✅ 启用 Gzip 压缩
40.     gzip on;
41.     gzip_types application/javascript text/css;
42.     gzip_comp_level 6;
44.     # ✅ 提升文件传输效率
45.     sendfile on;
46.     tcp_nopush on;
47.     tcp_nodelay on;
48. }

复制代码

相比之前的配置，在性能上主要优化了以下几点：
2.3.1 启用HTTP/2

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

1. listen 443 ssl http2;  # ✅ 启用 HTTP/2

复制代码

2.3.2 静态资源缓存控制

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

1. # ✅ 静态资源缓存 + Cache-Control
2. location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
3.     expires max;  # 设置些资源永不过期
4.     add_header Cache-Control "public, immutable";   # 设置缓存策略：公开可缓存，内容不变
5.     log_not_found off; # 不记录不存在的文件的404日志
6. }
8. # ✅ HTML 文件缓存短一些（可选）
9. location ~ \.html$ {
10.     expires 1h; # HTML文件可能经常更新，设置较短缓存时间
11. }

复制代码

2.3.3 Gzip压缩

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

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

复制代码

2.3.4 文件传输优化

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

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

复制代码

3 结语

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

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

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

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除