bravesoft株式会社でフロントエンドエンジニアをしているみくと申します。
今回、アドベントカレンダーの記事として、Nuxt3で作成したSSGのサイトを自動化した話をまとめてみました
この自動化を行う前は、デプロイ権限を持ったエンジニアが多い時1日に複数回デプロイをしなくてはならなかったのですが、自動化後はデプロイの手間はもちろん、デプロイ後の連絡不要になったので、かなり負荷が減りました！

この記事でできること

SSGのNuxt3を自動デプロイ
Slackにデプロイ成功時/失敗時、通知を送る

前提

Nuxt3のSSG
GitHub
AWSのS3権限を持ったaccess_keyとsecret_keyを発行してあること

構築

Slackアプリを作成

https://api.slack.com/apps
CreateNewAppから選択

From scratchで作成する

サイドバーのOAuth & Permissionsから、Scopesでincoming-webhookを追加

サイドバーのIncoming WebhooksからAdd New Webhook to WorkspaceでWebhookのURLを追加する。発行されたURLはコピーしておく

GitHubの設定

リポジトリの設定ページのサイドバーからSecrets and variablesのActionsへ

New repository secretから各キーを追加する

環境変数名	説明
`AWS_ACCESS_KEY_ID`	AWSの `access_key_id`。S3へのアクセスに必要。
`AWS_SECRET_ACCESS_KEY`	AWSの `secret_access_key`。S3へのアクセスに必要。
`AWS_S3_CONTENTS_BUCKET_DEV`	開発環境用のS3バケット名。
`AWS_S3_CONTENTS_BUCKET_STG`	ステージング環境用のS3バケット名。
`SLACK_INCOMING_WEBHOOK_URL`	Slackアプリを作成で作成したWebhookのURL。

ymlの追加をする

プロジェクトのルート直下に.github>workflows>deploy.ymlを追加する。

name: Build and Deploy Workflow

on:
  pull_request:
    branches:
      - develop
  push:
    branches:
      - develop
      - staging

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16.13.2'

      - name: Install dependencies
        run: npm install

      - name: Generate static files
        id: generate
        run: npm run generate
        continue-on-error: true

      - name: Check if generation successful
        id: check_generation
        run: |
          if [ $? -eq 0 ]; then
            echo "Generation successful!"
            echo "::set-output name=status::success"
          else
            echo "Generation failed!"
            echo "::set-output name=status::failure"
            exit 1
          fi
        continue-on-error: true

      - name: Slack Notification - Build Failure
        if: steps.generate.outcome == 'failure'
        uses: rtCamp/action-slack-notify@v2
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}
          SLACK_COLOR: '#dc143c'
          SLACK_LINK_NAMES: true
          SLACK_TITLE: 'Build Failed :boom:'
          SLACK_MESSAGE: |
            @team-devops @team-frontend
            Repository: ${{ github.repository }}

      - name: Deploy to Development
        if: github.event_name == 'push' && github.ref == 'refs/heads/develop'
        id: deploy_dev
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: aws s3 sync --delete --region ap-northeast-1 ./dist s3://${{ secrets.AWS_S3_CONTENTS_BUCKET_DEV }}/
        continue-on-error: true

      - name: Deploy to Staging
        if: github.event_name == 'push' && github.ref == 'refs/heads/staging'
        id: deploy_stg
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: aws s3 sync --delete --region ap-northeast-1 ./dist s3://${{ secrets.AWS_S3_CONTENTS_BUCKET_STG }}/
        continue-on-error: true

      - name: Slack Notification - Deploy Success
        if: steps.deploy_dev.outcome == 'success' || steps.deploy_stg.outcome == 'success'
        uses: rtCamp/action-slack-notify@v2
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}
          SLACK_COLOR: '#5cb85c'
          SLACK_LINK_NAMES: true
          SLACK_TITLE: 'Deploy Successful :rocket:'
          SLACK_MESSAGE: |
            @team-devops @team-frontend
            Repository: ${{ github.repository }}

      - name: Slack Notification - Deploy Failure
        if: steps.deploy_dev.outcome == 'failure' || steps.deploy_stg.outcome == 'failure'
        uses: rtCamp/action-slack-notify@v2
        env:
          SLACK_WEBHOOK: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}
          SLACK_COLOR: '#dc143c'
          SLACK_LINK_NAMES: true
          SLACK_TITLE: 'Deploy Failed :boom:'
          SLACK_MESSAGE: |
            @team-devops @team-frontend
            Repository: ${{ github.repository }}

解説

ワークフローのトリガー

on:
  pull_request:
    branches:
      - develop
  push:
    branches:
      - develop
      - staging

develop ブランチ：プッシュとプルリクエストの両方をトリガーします。プルリクエスト時はビルドできるかどうかのみをチェックしています。これを行うことで、ビルドできないプルリクエストをマージすることを防ぐことができます。
staging ブランチ：プッシュ時のみトリガーします。

ビルドを行い、生成が成功したかを確認

- name: Generate static files
  id: generate
  run: npm run generate
  continue-on-error: true

npm run generate が失敗しても、続行できるようにしています。

- name: Check if generation successful
  id: check_generation
  run: |
    if [ $? -eq 0 ]; then
      echo "Generation successful!"
      echo "::set-output name=status::success"
    else
      echo "Generation failed!"
      echo "::set-output name=status::failure"
      exit 1
    fi

$? を使い、成功か失敗かを確認します。
Slack通知
ビルドやデプロイの成否をSlackに通知

- name: Slack Notification - Build Failure
  if: steps.generate.outcome == 'failure'
  uses: rtCamp/action-slack-notify@v2
  env:
    SLACK_WEBHOOK: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}
    SLACK_COLOR: '#dc143c'
    SLACK_TITLE: 'Build Failed :boom:'

失敗時には赤色で通知 (SLACK_COLOR: '#dc143c')
成功時には緑色 (SLACK_COLOR: '#5cb85c') で通知

S3へのデプロイ
aws s3 sync を使って S3 にファイルを同期

run: aws s3 sync --delete --region ap-northeast-1 ./dist s3://${{ secrets.AWS_S3_CONTENTS_BUCKET_DEV }}/

おわりに

この記事では、Nuxt3で作成したSSGサイトをGitHub Actionsで自動デプロイする方法と、Slack通知でデプロイの成否をみんなにお知らせする仕組みを紹介しました！
手動でやっていたデプロイ作業がなくなり、Slack通知のおかげで「デプロイ終わったよ！」の連絡も不要になり、チームのコミュニケーションがかなりスムーズになりました

こんな感じで、自動化の力を使うとエンジニアの負担をグッと減らせます。もちろん、これが完成形じゃなくて、もっと効率よくできる方法があるかもしれません！
これを読んで「自分のプロジェクトにも使ってみよう！」と思ってもらえたら嬉しいです