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通知のおかげで「デプロイ終わったよ！」の連絡も不要になり、チームのコミュニケーションがかなりスムーズになりました
こんな感じで、自動化の力を使うとエンジニアの負担をグッと減らせます。もちろん、これが完成形じゃなくて、もっと効率よくできる方法があるかもしれません！
これを読んで「自分のプロジェクトにも使ってみよう！」と思ってもらえたら嬉しいです