介紹了如何將Vite項目從開發(fā)環(huán)境部署到云服務(wù)器，涵蓋了代碼拷貝、構(gòu)建部署、域名配置及SSL證書申請等關(guān)鍵步驟。

1 拷貝代碼

一般來說是Windows環(huán)境下開發(fā)，Ubuntu環(huán)境下部署。因此首先要考慮的問題是如何將Vite項目的源代碼拷貝到云服務(wù)器上面去。最簡單的就是使用像MobaXterm這樣的遠程連接工具，這樣遠程連接工具一般都提供文件傳輸功能。

不過這樣做對于更新很麻煩，總不能每次更新一點就將全部代碼打包上傳一遍。因此最好的方式就是使用Git，將代碼上傳到Github這樣的倉庫中，每次更新代碼就可以實現(xiàn)增量更新，同時后期也很容易集成CICD。

不過使用Git倉庫也很麻煩，大概的問題有以下幾個：

1. 如果Git倉庫在內(nèi)網(wǎng)，就要使用代理工具或者內(nèi)網(wǎng)穿透工具。
2. Github倉庫網(wǎng)絡(luò)不穩(wěn)定問題，那么就需要使用代理工具或者加速服務(wù)。另外，某些情況下修改hosts也是個很有效的方案^[1]。
3. Git安全策略問題。推薦還是使用SSH登錄的方式，只用麻煩一次。HTTP登錄方式有時候總會失效，而且每次都要輸入賬戶密碼。

2 構(gòu)建部署

接下來就是構(gòu)建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安裝依賴庫，然后再進行構(gòu)建操作npm run build。接下來是殺掉所有包含node和npm的進程，因為腳本可能需要多次使用，每次使用之前Web服務(wù)可能已經(jīng)啟用了。最后使用Vite提供的預(yù)覽服務(wù)(npm run preview)來發(fā)布該應(yīng)用。

3 配置域名

如果是開發(fā)環(huán)境完成以上步驟就可以結(jié)束了，但是在云服務(wù)器上部署發(fā)布Web項目一般都是想通過域名來訪問，并且最好省略端口號。具體步驟如下：

1. 在云服務(wù)器提供商的后臺配置端口號。一般新的服務(wù)器出于安全考慮，端口號都是設(shè)置成不對外開放的。以天翼云為例，是在訪問控制的安全組中配置端口號的：
   
2. 在域名服務(wù)商的后臺，將域名的解析地址指向云服務(wù)器的IP地址。
3. 要省略掉端口號，HTTP服務(wù)就需要80端口，HTTPS服務(wù)需要443端口。國內(nèi)的云服務(wù)器提供商統(tǒng)一要求先備案，才能對外開放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"; // 導(dǎo)入 path 模塊

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    server: {
      host: "0.0.0.0", // 綁定所有網(wǎng)絡(luò)接口
      port: 443, // 自定義開發(fā)服務(wù)器端口
      open: true, // 自動打開瀏覽器
      https: {
        key: resolve(__dirname, env.SSL_KEY), // 替換為你的密鑰文件路徑
        cert: resolve(__dirname, env.SSL_CERT), // 替換為你的證書文件路徑
      },
    },
    build: {
      outDir: "./dist", // 構(gòu)建輸出目錄
    },
    preview: {
      host: "0.0.0.0", // 綁定所有網(wǎng)絡(luò)接口
      port: 443, // 預(yù)覽服務(wù)器端口
      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. 解決騰訊云輕量服務(wù)器國內(nèi)機器無法使用Github的方法 ??