阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 04月15日

使用 GitHub Actions 設定 CI/CD 管道實現自動部署

在本文中，您將學習如何使用 GitHub Actions 在您的儲存庫中實現持續整合和持續交付，以自動化您的開發工作流程。

為了示範這一點，我將使用一個簡單的 Node.js 應用程式作為我們的軟體產品，並將其部署到我的個人 VPS（虛擬專用伺服器）作為託管環境。

但說真的，什麼是 CI/CD 管道，為什麼我們需要它？

好問題！讓我們用簡單的術語來分解它。

什麼是 CI/CD 管道？

每當對儲存庫進行變更時，CI/CD 管道都會自動執行建置、測試和部署程式碼的過程。

•持續整合 (CI)確保新程式碼自動測試和合併。

•持續交付 (CD)自動部署，確保軟體的最新版本始終可供發布。

我們為什麼需要它？

如果沒有 CI/CD，開發人員必須手動測試和部署程式碼，這既time-consuming ， error-prone ，而且inefficient 。 CI/CD 管道加快了開發週期，減少了錯誤，並確保了部署過程的順利進行。

假設您有一個在VPS上託管的專案。

• 使用CI ，每次將程式碼推送到 GitHub 時，它都會自動執行測試來檢查錯誤。

• 使用CD ，如果所有測試通過，您的應用程式將自動部署到您的 VPS，無需人工幹預即可保持最新狀態。

它是如何運作的？

這就是 GitHub Actions 發揮作用的地方！作為一個流行的 CI/CD 平台，GitHub Actions 允許開發人員直接在其 GitHub 儲存庫中自動執行建置、測試和部署應用程式的過程。

Github 操作

GitHub Actions 的核心是工作流程，即執行一個或多個預先定義任務的自動化流程。

工作流程可以根據特定需求進行客製化，例如：

• 對每個拉取請求執行測試。

• 自動將合併的程式碼部署到生產中。

這些工作流程在儲存在您的儲存庫中的 YAML 檔案中定義，確保自動化無縫整合到您的開發工作流程中。

讓我們實踐起來！ 🚀

現在，讓我們逐步介紹使用 GitHub Actions 設定 CI/CD 管道的流程。

步驟 1：建立你的 Node.js 專案

對於本指南，我已經建立了一個 Node js 應用程式。您可以自己建立一個或使用現有專案。

第 2 步：建立 GitHub 儲存庫

• 在您的專案中初始化 Git 儲存庫。

• 將您的專案推送到 GitHub（如果您還沒有這樣做）。

步驟 3：在 GitHub 中設定秘密變數

請依照以下步驟操作：

前往您的 GitHub 儲存庫。
按一下“設定”標籤。
在左側邊欄中，導覽至 Secrets 和變數 →

  Actions.

按一下「新建儲存庫機密」。
輸入金鑰名稱（例如，DEPLOY_SSH_KEY、SERVER_IP、

  DOCKER_USERNAME).

貼上秘密值（例如，SSH 私鑰、API 令牌）

  in the field.

按一下新增機密。

github變數

現在可以使用 ${{ secrets.SECRET_NAME }} 在 GitHub Actions 工作流程中存取這些機密。

步驟 4：建立 GitHub Actions 工作流程

如果尚不存在，請在專案根目錄中建立名為.github/workflows的新目錄。在其中建立一個名為deploy.yml的檔案。

.github/workflows/

現在，在該檔案中定義您的 CI/CD 管道：

deploy.yml

name: Deployment pipeline

on:
  push:
    branches:
      - main
    tags:
      - '*'

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20.8.1'

      - name: Install Dependencies
        run: npm install

      - name: Build Node Project
        run: npm run build

如果您想要新增將建置推送到 Docker Hub 的步驟，您可以建立一個單獨的作業，如下所示。此作業負責建置 Docker 映像並將其推送到您的 Docker Hub 儲存庫。

docker:
    name: Docker Build and Push
    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Log in to Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}

      - name: Build Docker Image
        run: |
          docker build -t ${{ secrets.DOCKER_USERNAME }}/github-action-test:latest .

      - name: Push Docker Image
        run: |
          docker push ${{ secrets.DOCKER_USERNAME }}/github-action-test:latest

若要設定Continuous Delivery (CD) ，您可以使用名為appleboy/ssh-action的 GitHub Action 外掛程式。該插件允許您使用 SSH 憑證在遠端伺服器上執行命令。透過使用此插件，您可以停止並刪除現有的 Docker 容器，從 Docker Hub 中提取最新的映像，並啟動更新的容器，所有操作均自動完成。

deploy:
    name: Deploy to Remote VPS
    runs-on: ubuntu-latest
    needs: docker

    steps:
     - name: Deploy to Remote Server
        uses: appleboy/[email protected]
        with:
            host: ${{ secrets.REMOTE_HOST }}
            username: ${{ secrets.REMOTE_USER }}
            password: ${{ secrets.SSH_PRIVATE_KEY }}
            script: |
              echo "Navigating to the Docker Compose file directory"
              cd /path to your repo/ 
              echo "Stopping and removing any running containers"
              docker stop <container name>
              docker rm <container name>
              echo "Removing the old Docker image"
              docker rmi -f <latest image>|| true
              echo "Logging into Docker Hub on the remote server"
              echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
              echo "Pulling the latest image"
              docker compose up --build -d

最終範例程式碼如下，

name: Build and Deploy to Staging

on:
  push:
    branches:
      - main
    tags:
      - '*'

jobs:
  build:
    name: Build node js project
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20.8.1'

      - name: Install Dependencies
        run: npm install

      - name: Build React App
        run: npm run build

  docker:
    name: Docker Build and Push
    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Log in to Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}

      - name: Build Docker Image
        run: |
          docker build -t ${{ secrets.DOCKER_USERNAME }}/github-action-test:latest .

      - name: Push Docker Image
        run: |
          docker push ${{ secrets.DOCKER_USERNAME }}/github-action-test:latest

  deploy:
    name: Deploy to Remote VPS
    runs-on: ubuntu-latest
    needs: docker

    steps:
      - name: Deploy via SSH
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.REMOTE_HOST }}
          username: ${{ secrets.REMOTE_USER }}
          password: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            echo "Navigating to the Docker Compose file directory"
            cd /path to your repo/ 
              echo "Stopping and removing any running containers"
              docker stop <container name>
              docker rm <container name>
              echo "Removing the old Docker image"
              docker rmi -f <latest image>|| true
              echo "Logging into Docker Hub on the remote server"
              echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
              echo "Pulling the latest image"
              docker compose up --build -d

步驟 5：設定跑步者

使用 GitHub Actions 時，執行器是執行工作流程的環境。有兩種類型的跑步者，

GitHub 託管的執行器
自託管執行器

GitHub 託管的執行器

GitHub 所託管的執行器是由 GitHub 提供和管理的虛擬機器。您不需要設定或維護任何東西，GitHub 會自動為您工作流程中的每項工作啟動一個全新、安全且獨立的環境。這些對於大多數 CI/CD 用例來說都非常有用，並且只需很少的努力即可獲得。

您可以選擇以下環境：

• Ubuntu 最新版本

• Windows 最新版本

• macos-最新

由於一切都為您管理，它們非常適合快速設定和標準工作流程。然而，它們提供的定制有限，並且對於資源密集型建置來說可能會更慢。此外，還有使用限制，特別是對於私人儲存庫。

自託管執行器

自託管執行器是您管理的機器，例如您的個人 VPS、本機伺服器或雲端 VM，您可以將它們註冊到您的 GitHub 儲存庫或組織。配置完成後，GitHub 可以將工作流程作業卸載到您自己的基礎架構上。

這使您可以完全控制環境，這意味著您可以預先安裝依賴項，分配更多內存，並根據您的確切需求進行微調。它們在公共 GitHub 託管的執行器不適合的私人或受限環境中特別有用。

由於環境是持久的，它們還為重複建置提供了更快的執行速度，這與每次都會啟動新虛擬機器的 GitHub 託管執行器不同。但請記住，您還要負責執行器的安全性、維護、正常執行時間和可擴展性，所有這些都需要更多的設定和持續管理。

現在，我們將了解如何設定自託管執行器，

請依照以下步驟操作：

前往您的 GitHub 儲存庫。
按一下“設定”標籤。
在左側邊欄中選擇“操作”→“執行器”。

Github 執行者

點選New self-hosted runner按鈕

自託管跑者

選擇跑步者影像
將 GitHub 提供的設定命令複製並貼上到您的伺服器終端，以便將執行器註冊到您的儲存庫或組織

步驟 6：測試您的 CI/CD 管道

現在一切都已設定好：

在您的 Node.js 專案中進行更改。
將其推送到 GitHub 儲存庫的主分支。
導航到 GitHub 儲存庫中的「操作」標籤並觀察工作流程。
如果一切設定正確，GitHub Actions 將透過 SSH 進入您的 VPS 並自動部署最新程式碼。

就是這樣，您剛剛使用 GitHub Actions 建立了一個功能齊全的 CI/CD 管道！從編寫和測試程式碼到建置 Docker 映像並將其部署到您的 VPS，現在一切都已自動化和簡化。

透過設定此工作流程，您已向現代 DevOps 實踐邁出了重要一步。您將花費更少的時間進行手動部署，減少錯誤，並更有信心地更快地交付。此外，借助自訂執行器的靈活性，您的管道可以隨著專案的基礎設施需求而成長。

CI/CD 不再只是大公司的專利——得益於 GitHub Actions 等工具，每個人都可以使用它。因此，繼續進行實驗，並將您的自動化擴展到下一個層級。

感謝閱讀！如果您有任何回饋、問題或建議來改進本文，請隨時發表評論 - 我很樂意聽到您的意見。

祝您編碼愉快，別忘了無論走到哪裡都帶著微笑！ 😄

如果您想聯繫或支持我的工作：

📧 歡迎透過電子郵件與我們聯繫：[email protected]

☕ 如果您發現這有幫助並且想要支持我的內容，您可以捐款：給我買杯咖啡

原文出處：https://dev.to/vishnusatheesh/how-to-set-up-a-cicd-pipeline-with-github-actions-for-automated-deployments-j39

0個讚 0留言 43瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。

阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

阿川私房教材：學 JavaScript 前端，帶作品集去面試！

使用 GitHub Actions 設定 CI/CD 管道實現自動部署

使用 GitHub Actions 設定 CI/CD 管道實現自動部署

阿川私房教材：學 JavaScript 前端，帶作品集去面試！

阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

阿川私房教材：
學 JavaScript 前端，帶作品集去面試！