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

2020-05-27
amazon%20awsamazon%20s3githubgatsbynode.js
    

目次

概要

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を利用します。

2020 05 27 23 35 44

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

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に上で設定した環境変数が埋め込まれます。

ビルド

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

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

2020 05 27 23 48 34

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

バッジを利用する

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

バッジは次の形式の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に自動デプロイする

    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

JSで32ビット符号付き整数に対してのビット演算でハマった
具体例 参考にしたサイト JSでサブネットマスクの計算を行おうとしたとき、ビット演算でハマりました。その時のメモです。 JSでサブネットマスクの計算 JSでビット演算子を利用する場合 3…

Gitにプロキシを設定する
プロキシを設定する 確認 Gitでプロキシを通しておくメモです。 プロキシを設定する 以下のコマンドでproxyを通します。 ※ がプロキシのURL…

プログラムの数値計算で発生する誤差の種類 丸め誤差・打ち切り誤差・桁落ち
はじめに 誤差の種類 丸め誤差 打ち切り誤差 桁落ち 情報落ち 桁溢れ誤差 参考にしたサイト コンピュータで出てくる誤差はいくつかありますが、 それらをコードに落として整理しました。 はじめに 例えば の計算の答えは 0.6666666666…

JSでサブネットマスクの計算
JSによるサブネットマスク関連の計算 IPv4アドレス文字列をNumber型に変換する CIDR と サブネットの相互変換 ネットワークアドレス と ブロードキャストアドレス クラス 改めて計算方法を整理する 参考にさせていただいたサイト JSでIPv…

Amplify CLI のインストール
Amplify CLI のインストール Amplify CLI の設定 バックエンド環境作成 Amplify CLI のインストールから設定まで Amplify CLI をインストール 設定 Amplify アプリを初期化 Amplify CLI…

AWS Amplify に Next.js (SSG) で作ったアプリをデプロイする
はじめに 操作 Next.js (React) アプリの作成、Gitへのプッシュ AWS Amplifyでプロジェクト作成 参考にしたサイト この記事では、React / Next.js アプリケーションを作成し、AWS Amplify…

Typescriptに入門した
初期作業 とりあえずHello World 初期作業 typescript環境を作っていきます。 とりあえずHello World まず、次のサンプルコードを作成します。 typescriptファイルをビルドします。

Vue/Nuxt.js 触ってた人が Next.js に入門する
はじめに 実施環境 学習ガイド Create a Next.js App Navigate Between Pages ページの作成 リンク Assets, Metadata, and CSS Assets メタデータ CSS…

Amazon S3 と ローカルファイルのチェックサムの比較
s3apiでEtagを取得 検証 マルチアップロード時の注意点 Amazon S3 の Etagを使ってファイルの整合性チェックをする。 s3apiでEtagを取得 S3 APIを利用するとEtagを取得します。この値はmd5のハッシュ値になります。 検証 MD…

github.io / gitlab.ioで公開されている質の高い技術ドキュメント
AWSによるクラウド入門 Pythonプログラミング入門 普通の人が資産運用で99点をとる方法とその考え方 2018年の段階で私が知らないこと github.io / gitlab.io で無料で公開されている興味深いドキュメントのmemo AWS…

最新の投稿

フェールセーフやフェールソフト・フールプルーフ 障害対策用語のまとめ

JSで32ビット符号付き整数に対してのビット演算でハマった
具体例 参考にしたサイト JSでサブネットマスクの計算を行おうとしたとき、ビット演算でハマりました。その時のメモです。 JSでサブネットマスクの計算 JSでビット演算子を利用する場合 3…

Gitにプロキシを設定する
プロキシを設定する 確認 Gitでプロキシを通しておくメモです。 プロキシを設定する 以下のコマンドでproxyを通します。 ※ がプロキシのURL…

JSでIPアドレスがサブネットマスクで指定した範囲内にあるか判定する
IPアドレスが指定した範囲内にあるかどうか判定 参考にしたサイト JSでIPアドレス(IPv4)が指定したサブネットの範囲に含まれるか判定するロジックを作った時の記録です。 IPアドレスが指定した範囲内にあるかどうか判定 処理としては、IP…

プログラムの数値計算で発生する誤差の種類 丸め誤差・打ち切り誤差・桁落ち
はじめに 誤差の種類 丸め誤差 打ち切り誤差 桁落ち 情報落ち 桁溢れ誤差 参考にしたサイト コンピュータで出てくる誤差はいくつかありますが、 それらをコードに落として整理しました。 はじめに 例えば の計算の答えは 0.6666666666…

JSでサブネットマスクの計算
JSによるサブネットマスク関連の計算 IPv4アドレス文字列をNumber型に変換する CIDR と サブネットの相互変換 ネットワークアドレス と ブロードキャストアドレス クラス 改めて計算方法を整理する 参考にさせていただいたサイト JSでIPv…

Homebrew で php7.4 + Xdebug をインストール
php7.4のインストール Xdebugのインストール php.ini に追記 参考にさせていただいたサイト phpunitのカバレッジを算出を行うためにMacにHomebrewでphp7.4をインストールしようとした際の記録です。 php7.…

CentOS で スマートにプロキシを設定する
コマンドライン上で通す よりスマートに設定する 設定ファイルに記述 CentOSでプロキシを通す設定のメモです。 プロキシ環境で yum/dnf でリポジトリを更新する場合や、curl/wget…

MySQL8.0 で利用できるパラメータを表示する方法
オプションの表示 mysql8.0でmy.cnfなどで利用できるパラメータ一覧を出す方法。 オプションの表示 オプションの表示は次のコマンドで実施できます mysqld — The MySQL Server 【MySQLパラメーター比較資料】MySQL 5.…

CentOS に MySQL8.0をインストールする
はじめに 環境 起動 MySQLインストール my.cnf の設定 プロセス立ち上げ エラー The designated data directory /var/lib/mysql/ is unusable. You can remove all files…

Tags

Dates

© 2021   404 motivation not found