vue.jsのCI/CD環境を構築してアプリケーション開発に集中する#2

目標

前記事はこちら→vue.jsのCI/CD環境を構築してアプリケーション開発に集中する#1

GitHub Actionsを用いてVue.jsをS3の静的ウェブサイトホスティングとして公開する
この際AWSマネジメントコンソールでの作業を限りなく0にする
今回使ったGitHubのリポジトリのリンクはこちら！

前記事からの修正点

GitHub ActionsからS3へリソースをデプロイするためには、OpenID Connectの設定が必要だが、これをAWSマネジメントコンソールで行った。
この設定もTerraformでコード化する。

手順

1. 静的ウェブサイトホスティング用S3バケットを作成(terraform)
2. OpenID Connectの設定(terraform)
3. GitHub ActionsでVue.jsをbuild&deploy準備
4. ブラウザからデフォルトページが表示されることを確認

尚、前記事と重複する部分にはついては当記事では記載しない

Step.0

前記事で作成したIDプロバイダ、IAM role, IAM PolicyをAWSマネジメントコンソールから削除しておく。

Step.1 OpenID Connectの設定(terraform)

Terraformで提供されているモジュールを利用する

oidc.tf

module "oidc-with-github-actions" {
  source  = "thetestlabs/oidc-with-github-actions/aws"
  version = "0.1.4"

  github_org = "<アカウント名 or 組織名>"
  github_repositories = [
    "<レポジトリ名>",
  ]

  iam_role_description = "${var.project}-${var.environment} IAM role to enable GitHub OIDC access"
  iam_role_name        = "${var.project}-${var.environment}-GitHubOIDC-Role"
  iam_role_policy      = "AmazonS3FullAccess"
}

Step.2 GitHub ActionsでVue.jsをbuild&deploy準備

frontend.yml

name: frontend CI/CD

on:
  push:
    branches:
      - main
    paths:
      - 'frontend/**'
      - '.github/**'

defaults:
  run:
    working-directory: frontend

permissions:
  id-token: write
  contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: checkout repository
        uses: actions/checkout@v3

      - name: Use Node.js 18.x
        uses: actions/setup-node@v3
        with:
          node-version: '18.x'

      - name: npm install, build and test
        run: |
          npm ci
          npm run build --if-present

      - name: Archive production artifacts
        uses: actions/upload-artifact@v3
        with:
          name: dist
          path: frontend/dist


  deploy:
    needs: build
    if: github.event_name == 'push'
    runs-on: ubuntu-latest
    steps:
      - name: Download production artifacts
        uses: actions/download-artifact@v3
        with:
          name: dist
          path: frontend/dist

      - name: settings deployment role
        uses: aws-actions/configure-aws-credentials@v2
        with:
          role-to-assume: arn:aws:iam::146193870787:role/vuejs-on-s3-oidc-prod-GitHubOIDC-Role
          aws-region: ap-northeast-1
      
      - name: deployment artifact
        run: aws s3 sync ./dist s3://vuejs-on-s3-oidc-prod-static-bucket-mm9r9u --exact-timestamps --region ap-northeast-1

Step3. ブラウザからデフォルトページが表示されることを確認

無事にデプロイされていることがS3から確認できる。