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

2020-05-27
amazon%20awsamazon%20s3githubgatsby
    

目次

概要

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

関連記事

GitHubのリポジトリをGitLabに同期する GitLabのミラーリング機能
GitLabのミラーリングについて GitHubのリポジトリをGitLabに反映する その他 参考 GitLabのミラーリング機能によりGitHubなどの外部のリポジトリとのミラーリングを行うことができます。 これを使ってGitHub…

WordPressやめます Gatsbyに移行しました
これまでのWordPress運用 なぜWordPressを捨てるのか? なぜGatsbyを利用するのか? gatsbyについて WordPressから記事の救出 移行対象記事の抽出 記事の置換 Gatsbyテーマの作成 Gatsby…

WordPressのDBから記事データを抽出する
WordPressのDB関連図 公開記事一覧の取得 タグ・カテゴリの取得 サムネイルの取得 おまけ: PHPスクリプト化しました 参考にしたところ WordPressにため込んだデータMarkdown化しGatsby…

AWS BlackBeltを写経する EC2編
問われやすいサービス EC2 AWSサービス別資料 https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/ 問われやすいサービス EC2 Amazon EC2 (201…

WordPressをAmazon S3 + CloudFront構成で月額200円で運用
システム全体の この構成のメリット・デメリット AWSの構成 静的ページを作成するWordPressプラグイン WP2Static WP Offload Media Lite WordPress on Docker環境 まとめ AmazonS…

Gitの初心者向け入門資料を集めてみた
バージョン管理システムとして利用される事が多いGitですが、初心者には意外とハードルが高かったりするため、初心者向け入門資料を集めてみました。 Git入門資料 https://gist.github.com/s-yoshiki/3ef9bfde7c0b…

SAA試験対策 AWS BlackBeltを写経する
はじめに 写経の例 EC2 EBS
AWS Lambdaから EC2起動&停止を行う
大まかな流れの紹介 IAMポリシー作成 IAMロール作成 Lambda作成 動作確認 起動テスト 停止テスト 参考 AWS Lambda から EC2 の起動と停止を行う方法の紹介。 大まかな流れの紹介 LambdaからEC…

S3 + CloudFront でコンテンツをHTTPS配信
S3バケットを作成する オプションの設定 アクセス許可の設定 S3アクセス権限の公開設定 ACM(AWS Certificate Manager) ステップ 1: ドメイン名の追加 ステップ 2: 検証方法の選択 ステップ 3: 確認とリクエスト ステップ…

AWSソリューションアーキテクト参考資料集
ブラックベルト サービス別資料 AWS Well-Architected フレームワーク 特に目を通すべき資料の一覧です。 ブラックベルト https://aws.amazon.com/jp/aws-jp-introduction/ サービス別資料 https://aws…

最新の投稿

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

cloudinaryによる画像ファイルの管理 はじめてみる
目的 cloudinary について 他のサービスとの比較 料金プラン アカウントの登録 利用してみる ダッシュボード 画像の編集 APIベースでのアクセス 感想 参考 画像の管理や配信、さらには加工といった事ができるsaas型のcloud…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス
UIコンポーネント VueSocial CKEditor 5 Vue.Draggable Vuetable 2 vuejs-datepicker Kalendar Vue Apexcharts Vue.js Google Charts vue-cart WebIDE…

GitHubのリポジトリをGitLabに同期する GitLabのミラーリング機能
GitLabのミラーリングについて GitHubのリポジトリをGitLabに反映する その他 参考 GitLabのミラーリング機能によりGitHubなどの外部のリポジトリとのミラーリングを行うことができます。 これを使ってGitHub…

WordPressやめます Gatsbyに移行しました
これまでのWordPress運用 なぜWordPressを捨てるのか? なぜGatsbyを利用するのか? gatsbyについて WordPressから記事の救出 移行対象記事の抽出 記事の置換 Gatsbyテーマの作成 Gatsby…

WordPressのDBから記事データを抽出する
WordPressのDB関連図 公開記事一覧の取得 タグ・カテゴリの取得 サムネイルの取得 おまけ: PHPスクリプト化しました 参考にしたところ WordPressにため込んだデータMarkdown化しGatsby…

ハイフンとかマイナスとかダッシュとか

Tags

Dates

© 2020   404 motivation not found