1 引言
在之前的文章《Ubuntu云服务器上部署发布Vite项目》中笔者使用了Vite提供的预览服务(npm run preview
)来在云服务器上发布Web应用。这样做轻量应用是没问题的,不过遇到一些专业的问题就不行了,最好还是使用专业的HTTP服务器。除此之外,笔者还有一些其他的需求:
- 前后端分离的项目,需要将后端的服务转发到前端服务IP相同的端口(443端口)。
- 子域名的项目,需要将服务转发到主域名服务IP相同的端口(443端口)。
这个时候就需要使用nginx,毕竟nginx不仅是一款轻量、高性能的HTTP服务器,还支持转发和代理服务功能。不过上述两个问题后面在讨论,本篇就详细记录一下部署发布单个Vite项目的问题。
2 详述
2.1 操作
首先,还是需要先安装nginx:
shell
sudo apt install nginx
然后,准备Vite项目,需要确保项目已经通过npm run build
构建好,并且生成了静态文件目录(通常是dist目录下)。
接下来,在/etc/nginx/sites-available/
目录下创建一个新的配置文件,例如笔者这里创建一个charlee44文件。在这个文件中填入如下内容:
nginx
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
目录中,因此创建软链接:
shell
sudo ln -s /etc/nginx/sites-available/charlee44 /etc/nginx/sites-enabled/
最后就是测试Nginx配置并重启服务,在终端输入以下命令:
shell
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服务,那么就可以使用如下配置:
nginx
# 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是高度可配,还有很多优化选项可以配置,具体配置如下:
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协议可以实现多路复用、头部压缩等特性,显著提升加载速度:
nginx
listen 443 ssl http2; # ✅ 启用 HTTP/2
2.3.2 静态资源缓存控制
设置浏览器缓存策略,减少重复请求,加快页面加载速度:
nginx
# ✅ 静态资源缓存 + 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):
nginx
# ✅ 启用 Gzip 压缩
gzip on;
gzip_types application/javascript text/css;
gzip_comp_level 6; # 启用 Gzip 压缩时,使用压缩级别 6(共 1 到 9 级)
2.3.4 文件传输优化
提升网络传输效率,降低延迟,提高吞吐量:
nginx
# ✅ 提升文件传输效率
sendfile on;
tcp_nopush on; # 合并头部+正文,减少小包数量
tcp_nodelay on; # 对动态请求或 WebSocket 立即发送数据
3 结语
其实HTTP服务器的性能优化远不止这点内容,针对本篇内容的性能优化配置,笔者就可以想到两点:
- 静态资源缓存控制的性能优化是通知客户端缓存文件资源,那么是否可以在服务器上缓存文件资源到内存呢?这样当客户端请求过来,就可以不经过硬盘直接传输内存中的数据,这样可以节省一次磁盘IO。
- 启用Gzip压缩,压缩文件也是算在客户端请求响应时间的,那么是否可以预先将文件按照最高级别进行压缩,然后需要的时候再直接传输出去呢?这样可以节省临时文件的时间,同时也最大程度的减少的文件传输体积。
其实这两个问题,甚至更多的性能优化思路,nginx都有一定程度的解决方案,就留待以后再研究吧。