GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする

2020-05-273 min read

目次

  1. 概要
  2. github-actions-について
  3. あらかじめ準備しておくもの
  4. aws-iam-ユーザを環境変数にセットする
  5. workflowの記述
  6. ビルド
  7. バッジを利用する
  8. 終わりに
  9. 参考にしたところ

概要

Gatsbyで作った静的サイトを、GitHub Actions のワークフローで Amazon S3に自動ビルド+デプロイする方法の紹介です。

このサイトも、Gatsby + Amazon S3 + CloudFront の構成なのですが、ビルド & デプロイを手動で行うのは中々退屈なので自動化しようと思いました。

またGatsbyで作ったサイトを「Netlifyにデプロイする」や「GitHub Pagesにアップロードする」みたいな記事はあったもののS3へのデプロイは意外となかったのでこの記事を書きました。

GitHub Actions について

GitHub Actionsは GitHubが提供しているCI/CDツールです。

パブリックのリポジトリなら無料で利用することができ、 プライベートリポジトリでもFreeプランであれば月に2000分利用する事ができます。

GitHub Actions

あらかじめ準備しておくもの

ここで紹介する方法では、次のリソースを利用します。

  • S3バケット
  • AWS IAM ユーザ
    • アクセスキーID
    • シークレットアクセスキー
  • GitHubリポジトリ (Gatsbyのコンテンツ)

AWS IAM ユーザを環境変数にセットする

S3にデプロイする際に、アクセスキーID & シークレットアクセスキーを利用しますが、 ソースへのハードコーディングを避けるためにGitHub Secretsを利用します。

ここでは、以下の値をセットします。

NAME VALUE
AWS_ACCESS_KEY_ID IAMユーザのアクセスキーID
AWS_SECRET_ACCESS_KEY IAMユーザのシークレットアクセスキー
S3_CONTENTS_BUCKET S3のバケット名

workflowの記述

.github/workflows/ 以下にワークフローの定義ファイルを配置します。 ファイルはyml形式で記述します。

.github/workflows/s3-deploy.yml

name: deploy s3

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    timeout-minutes: 5

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

      - name: setup node
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-1

      - name: install
        run: npm ci

      - name: format
        run: npm run format

      - name: test
        run: npm run test

      - name: build
        run: npm run build

      - name: Upload file to S3
        env: 
          S3_CONTENTS_BUCKET: ${{ secrets.S3_CONTENTS_BUCKET }}
        run: |
          aws s3 sync ./public s3://$S3_CONTENTS_BUCKET/ --quiet

この設定はmasterブランチにpushされたらnpm環境を用意して、Gatsbyコンテンツをビルドしたらs3にデプロイするという流れになっています。

ホストランナーには ubunu-latestを利用しています。(windowsやmacなんかも利用する事ができます)

コード内にある、secrets.AWS_ACCESS_KEY_IDsecrets.AWS_SECRET_ACCESS_KEYに上で設定した環境変数が埋め込まれます。

ビルド

ビルドが完了後、任意の完了したワークフローをクリックするとするとこのような画面が表示されます。

成功した部分に緑のチェックマークが表示されます。

▶︎ マークをクリックしてイベントの詳細を閲覧する事ができます。

バッジを利用する

ビルドがうまくいったかを確認しやすくするためにバッジを利用します。

バッジは次の形式のURLで利用する事ができます。

https://github.com/<OWNER>/<REPOSITORY>/workflows/<WORKFLOW_NAME>/badge.svg

終わりに

ここでは、Gatsbyで作った静的サイトを、GitHub Actions のワークフローで Amazon S3に自動ビルド+デプロイする方法を紹介しました。

これで本ブログのビルド&デプロイが自動でできるようになったので、より快適に記事を書け、投稿スピードも上げていくことができるでしょう。

また、個人的にはGitLabを利用する機会が多いので近々GitLab-CIによるデプロイ方法を書けたらなあと思います。

参考にしたところ

Gatsby のサイトを GitHub Actions で GitHub Pages にデプロイ

GitHub ActionsワークフローでAmazon S3のオブジェクトにアクセスする

GitHub Actionsを使ってnuxt.jsで作成した静的WebページをS3に自動デプロイする

Tags
javascript(110)
node.js(54)
linux(54)
amazon%20aws(47)
typescript(45)
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0(36)
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86(30)
html5(29)
php(24)
centos(24)
python(22)
%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0(21)
mac(21)
mysql(20)
canvas(19)
opencv(17)
%E9%9B%91%E8%AB%87(16)
docker(16)
wordpress(15)
atcoder(14)
apache(12)
%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92(12)
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9(12)
amazon%20s3(12)
red%20hat(12)
prisma(12)
ubuntu(11)
github(10)
git(10)
vue.js(10)
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF(10)
mariadb(10)
react(9)
aws%20cdk(9)
css3(8)
%E5%8F%AF%E8%A6%96%E5%8C%96(8)
%E5%B0%8F%E3%83%8D%E3%82%BF(8)
nestjs(8)
amazon%20lightsail(7)
next.js(7)
%E3%83%96%E3%83%AD%E3%82%B0(6)
cms(6)
oracle(6)
perl(6)
gitlab(6)
iam(5)
amazon%20ec2(5)
%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93(5)
aws%20amplify(5)
curl(4)
Author
githubzennqiita
ただの備忘録です。

※外部送信に関する公表事項