Ubuntu云服务器上部署发布Vite项目

1 拷贝代码

一般来说是Windows环境下开发，Ubuntu环境下部署。因此首先要考虑的问题是如何将Vite项目的源代码拷贝到云服务器上面去。最简单的就是使用像MobaXterm这样的远程连接工具，这样远程连接工具一般都提供文件传输功能。
不过这样做对于更新很麻烦，总不能每次更新一点就将全部代码打包上传一遍。因此最好的方式就是使用Git，将代码上传到Github这样的仓库中，每次更新代码就可以实现增量更新，同时后期也很容易集成CICD。
不过使用Git仓库也很麻烦，大概的问题有以下几个：

• 如果Git仓库在内网，就要使用代理工具或者内网穿透工具。
  
• Github仓库网络不稳定问题，那么就需要使用代理工具或者加速服务。另外，某些情况下修改hosts也是个很有效的方案[1]。
  
• Git安全策略问题。推荐还是使用SSH登录的方式，只用麻烦一次。HTTP登录方式有时候总会失效，而且每次都要输入账户密码。
  

2 构建部署

接下来就是构建Vite项目，这一步一般可以直接使用脚本，如下所示：

1. #!/bin/bash
3. # 安装
4. npm install
6. # 编译
7. npm run build
9. # 杀掉所有包含 node 的进程（如果存在）
10. PIDS=$(ps aux | grep node | grep -v grep | awk '{print $2}')
12. if [ -n "$PIDS" ]; then
13.     echo "Killing processes: $PIDS"
14.     kill $PIDS
15. else
16.     echo "No matching processes found."
17. fi
19. # 杀掉所有包含 npm 的进程（如果存在）
20. PIDS=$(ps aux | grep npm | grep -v grep | awk '{print $2}')
22. if [ -n "$PIDS" ]; then
23.     echo "Killing processes: $PIDS"
24.     kill $PIDS
25. else
26.     echo "No matching processes found."
27. fi
29. # 启动前端
30. 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中进行如下配置：

1. import { defineConfig, loadEnv } from "vite";
2. import { resolve } from "path"; // 导入 path 模块
4. export default defineConfig(({ mode }) => {
5.   const env = loadEnv(mode, process.cwd(), "");
6.   return {
7.     server: {
8.       host: "0.0.0.0", // 绑定所有网络接口
9.       port: 443, // 自定义开发服务器端口
10.       open: true, // 自动打开浏览器
11.       https: {
12.         key: resolve(__dirname, env.SSL_KEY), // 替换为你的密钥文件路径
13.         cert: resolve(__dirname, env.SSL_CERT), // 替换为你的证书文件路径
14.       },
15.     },
16.     build: {
17.       outDir: "./dist", // 构建输出目录
18.     },
19.     preview: {
20.       host: "0.0.0.0", // 绑定所有网络接口
21.       port: 443, // 预览服务器端口
22.       open: true, // 自动打开浏览器
23.     },
24.   };
25. });

复制代码

这里的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)。

---

• 解决腾讯云轻量服务器国内机器无法使用Github的方法 ↩︎
  

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