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

1 拷贝代码

一般来说是Windows环境下开发，Ubuntu环境下部署。因此首先要考虑的问题是如何将Vite项目的源代码拷贝到云服务器上面去。最简单的就是使用像MobaXterm这样的远程连接工具，这样远程连接工具一般都提供文件传输功能。

不过这样做对于更新很麻烦，总不能每次更新一点就将全部代码打包上传一遍。因此最好的方式就是使用Git，将代码上传到Github这样的仓库中，每次更新代码就可以实现增量更新，同时后期也很容易集成CICD。

不过使用Git仓库也很麻烦，大概的问题有以下几个：

1. 如果Git仓库在内网，就要使用代理工具或者内网穿透工具。
2. Github仓库网络不稳定问题，那么就需要使用代理工具或者加速服务。另外，某些情况下修改hosts也是个很有效的方案^[1]。
3. 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项目一般都是想通过域名来访问，并且最好省略端口号。具体步骤如下：

1. 在云服务器提供商的后台配置端口号。一般新的服务器出于安全考虑，端口号都是设置成不对外开放的。以天翼云为例，是在访问控制的安全组中配置端口号的：
   
   
2. 在域名服务商的后台，将域名的解析地址指向云服务器的IP地址。
3. 要省略掉端口号，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)。

---

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