GitHub ActionsでSPA（CloudFront + S3）にVueアプリをデプロイする

はじめに

GitHub Actionsで vueアプリをビルドしてS3にデプロイする

GIthub Actons

OIDCプロバイダを作成

AWSでGitHub ActionsのOIDCプロバイダを作成する方法については以下に記載しています。 yhidetoshi.hatenablog.com

AWSの設定

IAMロールに付与する権限は以下の通り。CloudFrontとS3の設定については省略します。

• S3にアップロードするために必要なIAMポリシー

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:DeleteObject",
                "s3:ListBucket",
                "s3:PutObjectAcl"
            ],
            "Resource": "*"
        }
    ]
}

• CloudFrontのキャッシュ削除に必要なポリシー

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "cloudfront:CreateInvalidation",
                "cloudfront:GetInvalidation",
                "cloudfront:GetDistribution",
                "cloudfront:GetDistributionConfig",
                "cloudfront:GetStreamingDistribution",
                "cloudfront:ListDistributions",
                "cloudfront:ListInvalidations",
                "cloudfront:ListStreamingDistributions"
            ],
            "Effect": "Allow",
            "Resource": "*"
        }
    ]
}

GitHub Actionsのコード

用意した Vue.jsのコードは以下のサイトを参考に用意しました。

Vue-RouterでSPAを作る - Qiita

ディレクトリ構成は以下の通り

❯ tree -L 1
.
├── README.md
├── build
├── config
├── dist
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
└── static

1 vue.jsをビルドする

yarn run build

• package.jsonの "scripts" の抜粋

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

2 S3にアップロードする

aws s3 sync --exact-timestamps --delete ./dist s3://${{ env.AWS_BUCKET_NAME }}/

3 CloudFrontのキャッシュを削除する

aws cloudfront create-invalidation --distribution-id ${{ env.CF_DISTRIBUTION_ID }} --paths "/*"

利用するgithub-actionsのライブラリ

• checkout

  • GitHub - actions/checkout: Action for checking out a repo

• node環境を用意

  • GitHub - actions/setup-node: Set up your GitHub Actions workflow with a specific version of node.js

• awsの認証情報を設定

  • GitHub - aws-actions/configure-aws-credentials: Configure AWS credential environment variables for use in other GitHub Actions.

• aws-cli環境を用意

  • GitHub - unfor19/install-aws-cli-action: Install AWS CLI on a GitHub Actions Linux host

• .github/workflows/deploy.yaml

name: Deploy SPA
on:
  push:
    branches:
      - main
    paths:
      - ./**
      - .github/workflows/deploy.yaml

env:
  NODE_VERSION: '16'
  AWS_REGION: "ap-northeast-1"
  IAM_ROLE_ARN: ${{ secrets.IAM_ROLE_ARN }}
  AWS_BUCKET_NAME: "INPUT_BUCKET_NAME"
  CF_DISTRIBUTION_ID: "INPUT_CF_DISTRIBUTION_ID"

permissions:
  id-token: write
  contents: read

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - uses: actions/setup-node@v2
      with:
        node-version: ${{ env.NODE_VERSION }}
        cache: 'yarn'
        cache-dependency-path: ./package-lock.json
    - run: yarn install && yarn run build

    - name: Configure AWS Credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-region: ${{ env.AWS_REGION }}
        role-to-assume: ${{ env.IAM_ROLE_ARN}}
  
    - name: Setup aws cli
      uses: unfor19/install-aws-cli-action@v1
      with:
        version: 2
        verbose: false
        arch: amd64

    - name: Upload files to S3 and Clear CF cache
      run: |
        aws s3 sync --exact-timestamps --delete ./dist s3://${{ env.AWS_BUCKET_NAME }}/
        aws cloudfront create-invalidation --distribution-id ${{ env.CF_DISTRIBUTION_ID }} --paths "/*"