直上天雲 - 自動化部屬

老子能夠無為而治，正是因為他掌握了 GitHub Actions 自動化部屬。

自動化部署是 CI/CD 十分重要的一部分，它可以讓你的應用在每次程式更新後自動部署到生產環境。今天，我們將探討如何使用 GitHub Actions 將應用程序自動部署到 AWS S3 或 Heroku。這樣可以實現無縫的部署過程，並確保應用程序的最新版本隨時可用。

當然，如果你使用的是 Zeabur 或是 Vercel 這樣的部屬平台，在 push 之後他們就會自動部屬，這樣也不錯。

今日範例程式：https://github.com/elvisdragonmao/2024-GitHub-Actions/tree/main/14

1. 使用 GitHub Actions 部署到 AWS S3

AWS S3（Simple Storage Service）是一個可靠且可擴充的對象存儲服務。它可以用於存儲靜態網站的內容，例如 HTML、CSS 和 JavaScript 文件。

步驟 1：設定 AWS S3

1. 建立 S3 存儲桶: 登錄到 AWS 管理控制台，導航到 S3 服務，並建立一個新的存儲桶。
2. 設定存儲桶權限: 確儲存儲桶設定為公開，以便你的網站可以被存取。你可以在存儲桶的 “權限” 標籤下配置 CORS（跨來源資源共享）設定。

步驟 2：建立 IAM 用戶並設定存取密鑰

1. 建立 IAM 用戶: 在 AWS 管理控制台，導航到 IAM 服務，建立一個新的用戶，並授予 AmazonS3FullAccess 許可權。
2. 取得存取密鑰: 生成並儲存存取密鑰 ID 和密鑰，稍後將在 GitHub Secrets 中使用。

步驟 3：設定 GitHub Actions 工作流程

在 .github/workflows 目錄下建立一個 YAML 文件，例如 deploy-to-s3.yml。這個工作流程會自動構建你的應用並將其上傳到 AWS S3。

name: Deploy to S3on:  push:    branches:      - main # 當推送到 main 分支時觸發工作流程jobs:  deploy:    runs-on: ubuntu-latest    steps:      - name: Check out code        uses: actions/checkout@v3      - name: Set up Node.js        uses: actions/setup-node@v3        with:          node-version: "20"      - name: Install dependencies        run: npm install      - name: Build application        run: npm run build      - name: Deploy to S3        uses: jakejarvis/s3-sync-action@v0.5.7        with:          args: --acl public-read --follow-symlinks --exclude '.git/*' --exclude 'README.md'        env:          SOURCE_DIR: "./build"          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

步驟 4：設定 GitHub Secrets

在 GitHub 倉庫的 “Secrets and variables” 部分，設定以下 secrets：

• AWS_S3_BUCKET: 你的 S3 存儲桶名稱
• AWS_ACCESS_KEY_ID: 你的 AWS 存取密鑰 ID
• AWS_SECRET_ACCESS_KEY: 你的 AWS 密鑰

2. 使用 GitHub Actions 部署到 Heroku

Heroku 是一個熱門的雲端平台，即時部署應用程序並提供基礎設施管理。雖然現在要錢了，但如果你跟我一樣是學生的話，可以驗證學生身分，每個月都有免費 credits。

步驟 1：設定 Heroku

1. 建立 Heroku 專案: 登錄到 Heroku 儀表板，建立一個新的專案。
2. 取得 Heroku API 密鑰: 在 Heroku 儀表板中，導航到你的帳戶設定，生成並儲存 API 密鑰。

步驟 2：設定 GitHub Actions 工作流程

在 .github/workflows 目錄下建立一個 YAML 文件，例如 deploy-to-heroku.yml。這個工作流程會自動將你的應用部署到 Heroku。

name: Deploy to Herokuon:  push:    branches:      - main # 當推送到 main 分支時觸發工作流程jobs:  deploy:    runs-on: ubuntu-latest    steps:      - name: Check out code        uses: actions/checkout@v3      - name: Set up Node.js        uses: actions/setup-node@v3        with:          node-version: "20"      - name: Install dependencies        run: npm install      - name: Build application        run: npm run build      - name: Deploy to Heroku        uses: akshatp/gh-action-heroku-deploy@v2        with:          api_key: ${{ secrets.HEROKU_API_KEY }}          app_name: ${{ secrets.HEROKU_APP_NAME }}

步驟 3：設定 GitHub Secrets

在 GitHub 倉庫的 “Secrets and variables” 部分，設定以下 secrets：

• HEROKU_API_KEY: 你的 Heroku API 密鑰
• HEROKU_APP_NAME: 你的 Heroku 應用名稱

3. 使用 Vercel 自動預覽部署

Vercel 是一個提供自動化預覽部署的平台。每當你推送程式或建立拉取請求時，Vercel 都會自動生成預覽環境，幫助你檢查和測試變更。我們不需要設定任何工作流程，只需要將程式推送到 GitHub，Vercel 就會自動構建和部署預覽版本。

1. 登錄 Vercel: 使用你的 GitHub 帳戶登錄 Vercel。
2. 連接 GitHub 倉庫: 在 Vercel 儀表板中，連接你的 GitHub 倉庫。
3. 設定部屬步驟: 通常 Vercel 會自動偵測你使用的框架與部屬方式，如果錯誤的話你可以自行進行調整。

Vercel 會自動設定預覽部署，所以只需要推送到你的 GitHub 倉庫，Vercel 就會自動構建和部署預覽版本。

小結

使用 GitHub Actions 進行自動化部署可以顯著提高開發效率，確保每次程式更新後都能自動部署到生產環境。無論是部署到 AWS S3、Heroku 還是使用 Vercel 進行預覽部署，自動化流程都能幫助你維持高效的開發和部署流程。這些技術不僅能減少手動操作的錯誤，還能使你的應用更具一致性和可靠性。希望你能夠充分利用這些技術，將你的應用程序無縫地部署到各種雲端平台。