Ubuntu云服务器上部署发布Vite项目
Ubuntu云服务器上部署发布Vite项目
1 拷贝代码
一般来说是Windows环境下开发，Ubuntu环境下部署。因此首先要考虑的问题是如何将Vite项目的源代码拷贝到云服务器上面去。最简单的就是使用像MobaXterm这样的远程连接工具，这样远程连接工具一般都提供文件传输功能。
不过这样做对于更新很麻烦，总不能每次更新一点就将全部代码打包上传一遍。因此最好的方式就是使用Git，将代码上传到Github这样的仓库中，每次更新代码就可以实现增量更新，同时后期也很容易集成CICD。
不过使用Git仓库也很麻烦，大概的问题有以下几个：
- 如果Git仓库在内网，就要使用代理工具或者内网穿透工具。
- Github仓库网络不稳定问题，那么就需要使用代理工具或者加速服务。另外，某些情况下修改hosts也是个很有效的方案[1]。
- Git安全策略问题。推荐还是使用SSH登录的方式，只用麻烦一次。HTTP登录方式有时候总会失效，而且每次都要输入账户密码。
2 构建部署
接下来就是构建Vite项目，这一步一般可以直接使用脚本，如下所示：
#!/bin/bash
# 安装
npm install
# 编译
npm run build
# 杀掉所有包含 node 的进程（如果存在）
PIDS=$(ps aux | grep node | grep -v grep | awk '{print $2}')
if [ -n "$PIDS" ]; then
echo "Killing processes: $PIDS"
kill $PIDS
else
echo "No matching processes found."
fi
# 杀掉所有包含 npm 的进程（如果存在）
PIDS=$(ps aux | grep npm | grep -v grep | awk '{print $2}')
if [ -n "$PIDS" ]; then
echo "Killing processes: $PIDS"
kill $PIDS
else
echo "No matching processes found."
fi
# 启动前端
setsid npm run preview </dev/null >output.log 2>&1 &这段脚本的意思是先使用npm install安装依赖库，然后再进行构建操作npm run build。接下来是杀掉所有包含node和npm的进程，因为脚本可能需要多次使用，每次使用之前Web服务可能已经启用了。最后使用Vite提供的预览服务(npm run preview)来发布该应用。
3 配置域名
如果是开发环境完成以上步骤就可以结束了，但是在云服务器上部署发布Web项目一般都是想通过域名来访问，并且最好省略端口号。具体步骤如下：
- 在云服务器提供商的后台配置端口号。一般新的服务器出于安全考虑，端口号都是设置成不对外开放的。以天翼云为例，是在访问控制的安全组中配置端口号的：
- 在域名服务商的后台，将域名的解析地址指向云服务器的IP地址。
- 要省略掉端口号，HTTP服务就需要80端口，HTTPS服务需要443端口。国内的云服务器提供商统一要求先备案，才能对外开放80端口和443端口。
4. 配置SSL
如果不想被浏览器提示不安全，那么最好就要使用HTTPS，要使用HTTPS就要申请SSL证书。具体的操作过程可以参看本人的另一篇博文《在Ubuntu上使用Certbot申请Let’s Encrypt SSL证书》。
然后，在Vite项目的vite.config.js中进行如下配置：
import { defineConfig, loadEnv } from "vite";
import { resolve } from "path"; // 导入 path 模块
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), "");
return {
server: {
host: "0.0.0.0", // 绑定所有网络接口
port: 443, // 自定义开发服务器端口
open: true, // 自动打开浏览器
https: {
key: resolve(__dirname, env.SSL_KEY), // 替换为你的密钥文件路径
cert: resolve(__dirname, env.SSL_CERT), // 替换为你的证书文件路径
},
},
build: {
outDir: "./dist", // 构建输出目录
},
preview: {
host: "0.0.0.0", // 绑定所有网络接口
port: 443, // 预览服务器端口
open: true, // 自动打开浏览器
},
};
});这里的env.SSL_KEY和env.SSL_CERT就是《在Ubuntu上使用Certbot申请Let’s Encrypt SSL证书》中申请的证书文件，分别是证书私钥(/etc/letsencrypt/live/charlee44.com-0001/privkey.pem)和完整证书链(/etc/letsencrypt/live/charlee44.com-0001/fullchain.pem)。
腾讯云开发者
