Next.js実装をGithubActionsでS3に自動デプロイして静的ウェブサイトホスティングやる雑メモ

https://dev.classmethod.jp/articles/github-actions-oidc-configure-aws-credentials/#toc-1
AWS IAMのIDプロバイダーを利用することで、GitHub ActionsにAWSユーザーアクセスキーなど永続的なクレデンシャルを渡すことなく、IAMロールをベースとした権限管理によってAWSリソースの操作ができるようになる

1.IAM > アクセス管理 > IDプロバイダからOpenID ConnectでGithubの登録

プロバイダのタイプ: OpenIDConnect
プロバイダのURL: https://token.actions.githubusercontent.com
対象者: sts.amazonaws.com

2.IAMロール作成

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "Federated": "arn:aws:iam::721814306249:oidc-provider/token.actions.githubusercontent.com"
            },
            "Action": "sts:AssumeRoleWithWebIdentity",
            "Condition": {
                "StringLike": {
                    "token.actions.githubusercontent.com:sub": "repo:ta9to/.com:*"
                }
            }
        }
    ]
}

3.Github Actionsで実行するNext.jsアプリのビルドジョブ設定

.github/workflows/deploy.yml

name: Deploy to S3
on:
  push:
    branches: [main]
env:
  AWS_ROLE_ARN: arn:aws:iam::721814306249:role/ta9to.com-GithubActions-DeployToS3
  AWS_REGION : ap-northeast-1
  BUCKET_NAME : ta9to.com
permissions:
  id-token: write
  contents: read
jobs:
  deploy-to-s3:
    runs-on: ubuntu-latest
    steps:
      - name: Git clone the repository
        uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 16.x
      - run: npm install
      - run: npm run export
      - name: configure aws credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          role-to-assume: ${{ env.AWS_ROLE_ARN }}
          role-session-name: github-oidc-role-session
          aws-region: ${{ env.AWS_REGION }}
      - run: aws s3 sync ./out s3://${{ env.BUCKET_NAME }}/

4.S3の静的サイトホスティング設定

5.CloudFront,証明書,Route53設定

6.完成

ハマりどこメモ

• CloudFrontの代替ドメイン名 (CNAME)設定するの忘れてハマった
  • ここが設定できてないとRoute53で登録してるドメインにAレコードをエイリアスで登録する時にCloudFrontのディストリビューションがサジェストされないのでサジェストない時は↑これ