前言

這一篇是為了補齊前篇更進一步的部分，我們要用 github action 的自動化幫助我們打包 image
並且上到我們指定的存放 image 的地方，像是 docker Registry, Habor 或是 AWS ECR
那因為其他都大同小異，我們這裡選用 AWS ECR 去實現相關功能

push to ECR 的 github action workflow

我們這裡在 .github/workflows 裡面新增 push-ecr.yaml

完整的 workflow 在下方

workflow

name: "push to ECR"

on:
  push:
    branches: [main]
    tags: ["v*"]
  workflow_dispatch:

permissions:
  id-token: write
  contents: read

concurrency:
  group: ecr-push-${{ github.ref }}
  cancel-in-progress: true

jobs:
  build-and-push:
    name: "build and push image"
    runs-on: ubuntu-latest

    steps:
      - name: "checkout code"
        uses: "actions/checkout@v4"

      - name: "configure aws credential"
        uses: "aws-actions/configure-aws-credentials@v4"
        with: 
          role-to-assume: ${{ vars.AWS_ROLE_ARN }}
          aws-region: ${{ vars.AWS_REGION }}
          role-session-name: gha-${{ github.run_id }}

      - name: "login intto ECR"
        id: login-ecr
        uses: aws-actions/amazon-ecr-login@v2

      - name: "docker metadata"
        id: meta
        uses: docker/metadata-action@v5
        with:
          images: ${{ steps.login-ecr.outputs.registry }}/${{ vars.ECR_REPOSITORY }}
          tags: |
            type=sha,format=long
            type=ref,event=branch
            type=semver,pattern={{version}}
            type=raw,value=latest,enable={{is_default_branch}}

      - name: "setup docker buildx"
        uses: docker/setup-buildx-action@v3

      - name: "build and push"
        id: build
        uses: docker/build-push-action@v6
        with:
          context: .
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
          cache-from: type=gha
          cache-to: type=gha,mode=max

      - name: "image digest"
        run: echo "push digest = ${{ steps.build.outputs.digest }}"

流程圖

以下為上面的流程圖，這樣看會比較清楚

這裡可以對應 yaml 上面所代表的意思

設定 github variables

這裡應該有注意到我們 github action 有幾個 variable 要設置

• AWS_ROLE_ARN : aws role 的 ARN 這個我們會用 oidc 的方式執行
• AWS_REGION : 你所在的 aws region 代號
• ECR_REPOSITORY : 你需要 push 的 repo 名稱

github 準備作業

我們先建立一個 github repo

• (1) 然後在 repo -> settings -> 找到 Secrets and variables -> Action
• (2) 然後在頁籤的位置找到 Variable

把以下設定進去,

• AWS_ROLE_ARN : 這個記得等一下跑 設置 AWS 的部分可以得到這個
• AWS_REGION : 你所在的 aws region 代號 -> 這個在 aws 右上角的設置可以找得到像是台北是 ap-east-2
• ECR_REPOSITORY : 你需要 push 的 repo 名稱 -> 這個在下方的 AWS 設置可以設置得到

設置 AWS 部分

我們先把 repo 建立出來

我們登入自己的 aws 帳號 並且建立 ECR

操作步驟

1. 去左上角的搜尋框找 ECR
   

2. 這時候可以進到 ECR 的頁面 -> 點擊創建
   

3. 我們在匡選處(1) -> 輸入自己想要的 repo 名稱
   

4. 大功告成 -> 其中這個 repo 名稱就是我們 ECR_REPOSITORY 參數的名稱,後面會用到
   

建立 AWS OIDC 的 role (角色)

我們要建立一個角色給 github action 有相關權限可以 push images 給 我們的 image repo

操作步驟

新增 Identity Provider

• 首先我們這裡要前往 AWS IAM 去設定

• 我們這裡找到 identity provider

• 我們點右上角的 Add provider

• 這裡我們新增我們的 provider(身份提供者)

• step 1 : 首先我們要選 OpenID Connect
• step 2 : ProviderURL : 用 github action 固定的 url : https://token.actions.githubusercontent.com
• step 3 : Audience 的部分輸入 sts.amazonaws.com
• step 4 : 點選 Add Provider

補充說明 : (這個 Provider URL 和 Audience 是固定的 可以在 github doc 找得到 參照 github doc)

新增 Role

• 我們這裡在左側面板點選 role -> 點選橘色按鈕 Create Role

Select trusted entity

• (1) Trusted entity type : Web identity
• (2) Identity provider : <我們選我們建立的那個> => token.actions.githubusercontent.com
• (3) Audience : 這裏就是固定的 sts.amazonaws.com
• (4) GitHub organization : 這裏是 github 的使用者名稱 讀者這裡就填自己的
• (5) GitHub repository : 這裏就是我們事前準備建立的 github repo 名稱

然後就點擊下一步

Attach permissions

我們這裡設置 AmazonEC2ContainerRegistryPowerUser 或是同等能涵蓋 push/pull ECR 的權限的也可以

Name, review, and create

最後一步了

role 的名稱 : 沒有硬性規定我這裡姑且叫做 gha-ecr-push

下方的 json 記得收緊一下權限,我們要在特定tag 才觸發，可以在建立後去 trust relationships 那裡編輯

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Federated": "<這裏是你的 oidc provider 基本上不用改>/token.actions.githubusercontent.com"
      },
      "Action": "sts:AssumeRoleWithWebIdentity",
      "Condition": {
        "StringEquals": {
          "token.actions.githubusercontent.com:aud": "sts.amazonaws.com"
        },
        "StringLike": {
          "token.actions.githubusercontent.com:sub": [
            "<這裏是你的github repo oidc 記得改，不要複製說不能用怪我QQ>:ref:refs/heads/main",
            "<這裏是你的github repo oidc 記得改，不要複製說不能用怪我QQ>:ref:refs/tags/v*"
          ]
        }
      }
    }
  ]
}

repo oidc 那段可以在 github oidc 那裡找得到(如下圖)

接下來我們可以用 tag push 看看結果了

git tag -a v-0.0.1 -m 'demo'

然後 push tag

git push origin v-0.0.1

結尾

我們這裡似乎寫得太多了，目前已經接近尾聲，我們應用的部分大致上也探討完了，
接下來我們要往 bun 不一定有人會用到的部分開始探討了