秀洲区建设中心小学网站,低代码开发技术,wordpress主题+清新,vps可以多少wordpress1 引言
在之前的文章《Ubuntu云服务器上部署发布Vite项目》中笔者使用了Vite提供的预览服务(npm run preview)来在云服务器上发布Web应用。这样做轻量应用是没问题的#xff0c;不过遇到一些专业的问题就不行了#xff0c;最好还是使用专业的HTTP服务器。除此之外#xff0…1 引言
在之前的文章《Ubuntu云服务器上部署发布Vite项目》中笔者使用了Vite提供的预览服务(npm run preview)来在云服务器上发布Web应用。这样做轻量应用是没问题的不过遇到一些专业的问题就不行了最好还是使用专业的HTTP服务器。除此之外笔者还有一些其他的需求
前后端分离的项目需要将后端的服务转发到前端服务IP相同的端口443端口。子域名的项目需要将服务转发到主域名服务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 nginx2.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/2server_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-Controllocation ~* \.(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/22.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服务器的性能优化远不止这点内容针对本篇内容的性能优化配置笔者就可以想到两点:
静态资源缓存控制的性能优化是通知客户端缓存文件资源那么是否可以在服务器上缓存文件资源到内存呢这样当客户端请求过来就可以不经过硬盘直接传输内存中的数据这样可以节省一次磁盘IO。启用Gzip压缩压缩文件也是算在客户端请求响应时间的那么是否可以预先将文件按照最高级别进行压缩然后需要的时候再直接传输出去呢这样可以节省临时文件的时间同时也最大程度的减少的文件传输体积。
其实这两个问题甚至更多的性能优化思路nginx都有一定程度的解决方案就留待以后再研究吧。
