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:

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服务器的性能优化远不止这点内容,针对本篇内容的性能优化配置,笔者就可以想到两点:

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

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

相关推荐
ItJavawfc4 小时前
RK-Android11-性能优化-限制App内存上限默认512m
性能优化·heapsize·heapgrowthlimit·虚拟机参数·内存上限
瓜子三百克4 小时前
七、性能优化
flutter·性能优化
脑袋大大的4 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
程序员岳焱7 小时前
Java 与 MySQL 性能优化:Java 实现百万数据分批次插入的最佳实践
后端·mysql·性能优化
游戏开发爱好者89 小时前
iOS App首次启动请求异常调试:一次冷启动链路抓包与初始化流程修复
websocket·网络协议·tcp/ip·http·网络安全·https·udp
2501_915106329 小时前
频繁迭代下完成iOS App应用上架App Store:一次快速交付项目的完整回顾
websocket·网络协议·tcp/ip·http·网络安全·https·udp
CRMEB定制开发9 小时前
【实战】CRMEB Pro 企业版安装教程(附 Nginx 反向代理配置 + 常见问题解决)
nginx·商城系统·微信商城·crmeb
杰尼橙子12 小时前
DPDK BPF:将eBPF虚拟机的灵活性带入到了DPDK的高性能用户态
后端·性能优化
国科安芯14 小时前
【AS32系列MCU调试教程】SPI调试的常见问题解析
单片机·嵌入式硬件·性能优化·硬件架构·硬件工程