GitHub ActionsからECSにコンテナをデプロイする #3 GitHub ActionsからECRにDockerイメージをPushする

はじめに

本記事は、GitHub ActionsからECSにコンテナをデプロイするの第3回目の記事となります。

第2回の記事はこちらから

概要

本記事では以下について解説します。GitHub ActionsからAWS ECRへのDockerイメージのPushを行って行こうと思います。設定等は以前の記事（#2 GitHub ActionsとAWSの接続）の状態となっております。

それでは初めていきましょう。

AWSの設定

ECRを作成する

まずDockerイメージをPushするためのECRを作成します。

AWSでECRを開き、リポジトリの作成をクリックします。

好きなリポジトリ名をつけ、保存します。
名前はなんでも良いです。今回は「test-ecr-deploy」としました。

以下のように作成されれば完了です。

IAMロールの設定

次にECRへ接続するためにIAMロールに権限を作成します。前回作成したロールを開いて、「許可を追加」をクリックします。

インラインポリシーを作成をクリック

以下のように、ビジュアルでJSONを選択し以下のような設定にし次へ進みます。

アクセス許可設定

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": "ecr:GetAuthorizationToken",
            "Effect": "Allow",
            "Resource": "*"
        },
        {
            "Action": [
                "ecr:UploadLayerPart",
                "ecr:PutImage",
                "ecr:InitiateLayerUpload",
                "ecr:CompleteLayerUpload",
                "ecr:BatchCheckLayerAvailability"
            ],
            "Effect": "Allow",
            "Resource": "<ECRリポジトリのARN>"
        }
    ]
}

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": "ecr:GetAuthorizationToken",
            "Effect": "Allow",
            "Resource": "*"
        },
        {
            "Action": [
                "ecr:UploadLayerPart",
                "ecr:PutImage",
                "ecr:InitiateLayerUpload",
                "ecr:CompleteLayerUpload",
                "ecr:BatchCheckLayerAvailability"
            ],
            "Effect": "Allow",
            "Resource": "<ECRリポジトリのARN>"
        }
    ]
}

※ECRのARN確認方法

Resourceで利用するECRのARNの見方は以下となります。

ECRのリポジトリを先ほど作成したリポジトリを選択します。その後アクション→概要を開きます。

以下のようにARNが見えます。

次の画面では、任意のポリシー名をつけ、ポリシーの作成をクリックし完了です。

Dockefileを作成する

次にDockerfileを作成していきます。

今回は、GitHub ActionsでAngularをビルドし、そのビルドファイルをDockerfileの中で実行できるようにします。

以下のようにDockerfileを作成します。

Dockerfile

FROM nginx:alpine

COPY dist/プロジェクト名/browser /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

FROM nginx:alpine

COPY dist/プロジェクト名/browser /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

workflow.yml

次にworkflow.ymlに以下の項目を追加します。

・Angularのビルド
・DockerイメージのビルドとECRへPush

.github/workflows/workflow.ymlを開き以下のように修正します。

name: test workflow

on: push

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read

    steps:
      - name: Checkout code
        uses: actions/checkout@v2
    
    #AngularビルのためNode.jsをセットアップ
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
    #Angular build
      - name: Install dependencies
        run: npm install

      - name: Build Angular app
        run: npm run build -- --configuration=production

      # AWSへ接続
      - uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-region: 'ap-northeast-1' 
          role-to-assume: 'arn:aws:iam::<AWSアカウント_ID>:role/<自身が作成したロール名>' 

      # ECR ログイン
      - uses: aws-actions/amazon-ecr-login@v1
        id: login-ecr 

      # Docker イメージを build・push する
      - name: build and push docker image to ecr
        env:
          REGISTRY: ${{ steps.login-ecr.outputs.registry }}
          REPOSITORY: "test-ecr-deploy"
        run: |
          docker build . --tag ${{ env.REGISTRY }}/${{ env.REPOSITORY }}:latest
          docker push ${{ env.REGISTRY }}/${{ env.REPOSITORY }}:latest

name: test workflow

on: push

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read

    steps:
      - name: Checkout code
        uses: actions/checkout@v2
    
    #AngularビルのためNode.jsをセットアップ
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
    #Angular build
      - name: Install dependencies
        run: npm install

      - name: Build Angular app
        run: npm run build -- --configuration=production

      # AWSへ接続
      - uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-region: 'ap-northeast-1' 
          role-to-assume: 'arn:aws:iam::<AWSアカウント_ID>:role/<自身が作成したロール名>' 

      # ECR ログイン
      - uses: aws-actions/amazon-ecr-login@v1
        id: login-ecr 

      # Docker イメージを build・push する
      - name: build and push docker image to ecr
        env:
          REGISTRY: ${{ steps.login-ecr.outputs.registry }}
          REPOSITORY: "test-ecr-deploy"
        run: |
          docker build . --tag ${{ env.REGISTRY }}/${{ env.REPOSITORY }}:latest
          docker push ${{ env.REGISTRY }}/${{ env.REPOSITORY }}:latest

Angularのビルド

Angularビルドが行われているいる部分は以下となります。

#Angular build
  - name: Install dependencies
    run: npm install

  - name: Build Angular app
    run: npm run build -- --configuration=production

#Angular build
  - name: Install dependencies
    run: npm install

  - name: Build Angular app
    run: npm run build -- --configuration=production

Dockerイメージ作成とECRへPush

Dockeイメージの作成とECRにPushしている部分は以下になります

 # Docker イメージを build・push する
      - name: build and push docker image to ecr
        env:
          REGISTRY: ${{ steps.login-ecr.outputs.registry }}
          REPOSITORY: "<作成したECRリポジトリ名>"
          IMAGE_TAG: ${{ github.sha }}
        run: |
          docker build . --tag ${{ env.REGISTRY }}/${{ env.REPOSITORY }}::latest
          docker push ${{ env.REGISTRY }}/${{ env.REPOSITORY }}:${{ env.IMAGE_TAG }}

 # Docker イメージを build・push する
      - name: build and push docker image to ecr
        env:
          REGISTRY: ${{ steps.login-ecr.outputs.registry }}
          REPOSITORY: "<作成したECRリポジトリ名>"
          IMAGE_TAG: ${{ github.sha }}
        run: |
          docker build . --tag ${{ env.REGISTRY }}/${{ env.REPOSITORY }}::latest
          docker push ${{ env.REGISTRY }}/${{ env.REPOSITORY }}:${{ env.IMAGE_TAG }}