用 CodeBuild 建置 Astro 網站

對於這個部落格，以往我都是在自己的電腦建置再上傳上去，這次試試看讓 AWS 的 CodeBuild 自動建置。因為我實際建置的方法比較複雜，所以我下面介紹的是一般的 Astro 網站如何經過 CodeBuild 建置，然後放到 S3 上。

可能費用

用 AWS 的服務前為了避免付意料外的錢，一定要先算過費用。CodeBuild 的定價跟運算執行個體類型有關，X86 最便宜的類型 general1.small 每分鐘要 0.005 美元。這個服務有免費方案，上述的類型每月可使用 100 分鐘，方案不會在一年後到期。

日誌放在 CloudWatch 或 S3 可能需要費用，但 CloudWatch 一個月有免費 5 GB，不會到期，建議為 CloudWatch 的日誌群組設定一定時間後到期刪除。

快取可能用到 S3，S3 的儲存跟調用 API 都需要費用，在這邊主要是儲存可能付比較多錢。

建立專案

到 CodeBuild 的頁面選擇「建立專案」後，有很多選項，所以我只介紹比較重要的點，沒介紹到的可以維持預設值沒關係。

來源這邊可以選擇各大 Git 平台的儲存庫，如果是私有的儲存庫會需要「連線」，CodeBuild 才能存取。

在環境分頁有一點要注意，點開下面的「其他組態」，在「運算」這邊，記得選「3 GB 記憶體、2 個 vCPU」，這樣才有免費時數可以用。

Buildspec 是記載如何建置的檔案，相當於 GitHub Actions 的 Workflow 或是 CircleCI 的 .circleci/config.yml。可以選擇「使用 Buildspec 檔案」在儲存庫的根目錄放 buildspec.yml，或是選擇「插入建置命令」直接在這邊寫。

成品這邊可以選擇讓建置完後的成品上傳到 S3，不過我是在執行時就上傳建置結果了，所以我選了「無成品」。在這邊還隱藏著快取設定，如果要用到快取，記得點開下面的「其他組態」，設定快取類型是 Amazon S3，然後選擇打算放置快取的儲存貯體。

日誌可以選擇放在 CloudWatch 或 S3，建議至少留一個，所以就用預設值吧。

Buildspec

我先貼範例的 buildspec.yml：

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: latest
    commands:
      - npm install --global corepack@latest
      - corepack enable
      - corepack prepare pnpm@latest-10 --activate
  pre_build:
    commands:
      - pnpm install
  build:
    commands:
      - pnpm build
  post_build:
    commands:
      - aws s3 sync dist s3://<bucket-name>
cache:
  key: astro-cache
  paths:
    - "node_modules/.astro/**/*"

phases 裡的每個項目代表一個階段，能設定的階段就這四個了。每個階段可以設定要執行的指令在 commands 裡。

我在 install 這邊安裝 pnpm，不一定要照我的做法，也可以直接 npm i -g pnpm。

快取我這邊只有放 Astro 的快取，pnpm 我沒有做快取，因為檔案有些大。如果你也想快取 pnpm 的 package，可以參考 Astro 文件。

建置結果我是在 post_build 階段上傳到 S3。因為無論 build 階段是否執行成功都會執行 post_build 階段，所以或許把這個指令放到 build 階段跟建置一起執行會比較好：pnpm build && aws s3 sync dist s3://<bucket-name>，或是也可以直接設定「成品」上傳。

開始建置

最後按「建立建置專案」就可以儲存了。

不過我們還有權限還沒設定。到 IAM > 政策這邊，選 CodeBuildBasePolicy 開頭的政策，編輯許可，加上：

    {
      "Effect": "Allow",
      "Resource": [
        "arn:aws:s3:::<bucket-name>"
      ],
      "Action": [
        "s3:ListBucket"
      ]
    },
    {
      "Effect": "Allow",
      "Resource": [
        "arn:aws:s3:::<bucket-name>/*"
      ],
      "Action": [
        "s3:PutObject",
        "s3:GetObject"
      ]
    },

儲存後回到 CodeBuild 這邊，就可以點「開始建置」試試看了。

結論

用 CodeBuild 跟其他 CI/CD 服務相比比較麻煩，前面要先確認沒有意外的費用，後面還卡到了 AWS 很常見的權限問題。用其他 CI/CD 服務可能比較簡單，除非想用 CodeBuild 100 分鐘免費時數，不然建置一個 Astro 部落格其實不需要用 CodeBuild。

可能費用

建立專案

Buildspec

開始建置

結論

參考資料