個人博客快速自動部署到自己的服務器

發佈於 | 分類於 Code

自己之前博客的文章都是使用WebStorm連接上服務器的FTP，打包之後手動提交到服務器，太麻煩，所以想找一個自動部署的方案。

🚀 使用 GitHub Actions 自動部署前端項目到雲服務器 ​

實現前端項目的自動化部署可以顯著提升開發效率。GitHub Actions 提供了強大的自動化能力，讓你能夠在代碼推送至特定分支後，自動完成構建、測試和部署到雲服務器的全過程。

📋 前期準備 ​

  1. 雲服務器配置：
  • 創建對應網站
  • 開放 ssh 對應端口 22
  1. 生成 SSH 密鑰對​：
  • 在本地終端運行 ssh-keygen -t rsa -b 4096 -C "Github Action"生成密鑰對。這將產生一個私鑰（如 id_rsa）和一個公鑰（如 id_rsa.pub） （注意：mac電腦，win沒試）
  1. 配置服務器 SSH 訪問​：
  • 將公鑰內容添加到服務器的 ~/.ssh/authorized_keys 文件中。這可以通過手動編輯文件或使用 ssh-copy-id 命令實現。
  • 下方這條指令把本機用戶目錄下的 id_rsa.pub 文件發送到服務器root用戶的 home 目錄下，並添加到 authorized_keys 文件中
bash
ssh-copy-id -i ~/.ssh/id_rsa.pub root@你的IP
  • 最後測試 SSH 密鑰登錄，確保無需密碼即可連接到服務器：ssh root@你的服務器，如果成功登錄，說明配置成功。
  1. 配置 GitHub Secrets 存儲私鑰：
  • 在 GitHub 倉庫中，導航到 Settings > Secrets and variables > Actions。
  • 點擊 New repository secret，添加以下加密變量（Secrets），這些變量將在工作流文件中使用：
    • SSH_PRIVATE_KEY：你的私鑰內容（id_rsa 文件內容）
    • SSH_HOST：你的服務器 IP 地址
    • SSH_USER：你的服務器用戶名（如 root）
    • SSH_PORT：SSH 端口號（默認 22）
    • TARGET：服務器上部署項目的目標路徑（例如 /var/www/html）

⚙️ 配置 GitHub Actions 工作流 ​

在你的項目根目錄下創建 .github/workflows文件夾，並在其中創建一個 YAML 文件（如 deploy.yml）來定義工作流。

基本工作流示例 (使用 SCP 進行文件傳輸) 以下是一個基礎的工作流配置示例，它在代碼推送到 main 分支時觸發，負責拉取代碼、安裝依賴、構建項目，並通過 SCP 將構建產物傳輸到雲服務器。 工作流文件內容如下：

yaml
name: Deploy to Server  # 工作流的名稱

on:  # 指定觸發工作流的事件
  push:
    branches: [ main ]  # 當代碼推送到 main 分支時觸發

jobs:
  build-and-deploy:  # 定義一個名為 build-and-deploy 的任務
    runs-on: ubuntu-latest  # 使用最新的 Ubuntu 系統作為運行環境

    steps:  # 定義任務中的各個步驟
      - name: Checkout code  # 步驟1：檢出代碼
        uses: actions/checkout@v3  # 使用 GitHub 官方的 checkout Action 來獲取倉庫代碼

      - name: Setup Node.js  # 步驟2：設置 Node.js 環境
        uses: actions/setup-node@v3
        with:
          node-version: '18'  # 指定 Node.js 版本，請根據你的項目要求調整

      - name: Install dependencies and build  # 步驟3：安裝依賴並構建項目
        run: |  # 執行一系列 shell 命令
          npm install
          npm run build

      - name: Deploy to Server  # 步驟4：部署到服務器
        uses: appleboy/scp-action@v0.1.5  # 使用 SCP Action 進行文件傳輸
        with:  # 配置 SCP Action 的參數
          host: ${{ secrets.SERVER_HOST }}  # 服務器 IP，從 Secrets 中讀取
          username: ${{ secrets.SERVER_USER }}  # 服務器用戶名，從 Secrets 中讀取
          key: ${{ secrets.SSH_PRIVATE_KEY }}  # SSH 私鑰，從 Secrets 中讀取
          port: ${{ secrets.PORT }}  # SSH 端口，從 Secrets 中讀取（可選，默認22）
          source: "dist/*"  # 要傳輸的本地文件或目錄（構建產物）
          target: ${{ secrets.TARGET }}  # 服務器上的目標路徑，從 Secrets 中讀取

自此每次編輯好博文提交到git上之後就會自動執行工作流上傳到服務器對應目錄。

#GitHub Actions #自動部署 #雲服務器

覺得有用？請我喝杯咖啡 ☕

如果文章對你有幫助，歡迎支持一下~

赞赏二维码