Gatsby Cloud + AWS S3 + microCMSのビルドとデプロイ設定

この記事はJamstackその2 Advent Calendar 2020 21日目の記事です。

こんにちはhiro08です。

GatsbyJSのような、SSG(Static Site Generation)の機能を備えたフレームワークは、ビルドが非常に重要になってきます。そして、GatsbyJS向けにビルド周りの足回りや、URLプレビュー機能、アクセスコントロールといった便利な機能を提供しているサービスがあります。それがGatsby Cloudです。

またGatsby Cloudには、SSGにとって課題であったビルド効率の悪さの弱点を解決したIncremental Builds(増分ビルド)も提供されています。

詳しくは以前に書きました。こちらの記事も一読してください。
code-log.hatenablog.com

今回はWeb制作に便利なGatsby Cloudをベースに、microCMSと連携したJamstackなWebサイトをAWS S3にデプロイする構成を解説します。

前提

AWSのアカウントを作成してください

microCMSのアカウントを作成してください
microcms.io

下準備

まずは、Gatsbyのプロジェクトを作成してmicroCMSと連携をしてみましょう。プロジェクトを作成します。

$ npx gatsby new gatsby-cloud-microcms

そして、microCMSにアクセスしてコンテンツを作成します。今回は連携部分の確認なので簡易的なものにします。

エンドポイントをblogにして、APIスキーマのフィールドIDをtitle、種類をテキストフィールドにしてください。

予めコンテンツを入稿しておかないとエラーになる可能性があります。

そして、データの取得にはmicroCMSが公式で出しているライブラリを使います。

$ yarn add -D gatsby-source-microcms

こちらはgatsby-config.jsの内容です。apiKeyとserviceIdを入力してください。

    {
      resolve: "gatsby-source-microcms",
      options: {
        apiKey: "your",
        serviceId: "service_id",
        apis: [
          {
            endpoint: "blog",
          },
        ],
      },
    },

こちらは、データを取得するためのコードです。

pages/index.js

import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout"

const IndexPage = ({ data: { allMicrocmsBlog } }) => (
  <Layout>
    {allMicrocmsBlog.edges.map(({ node }) => (
      <React.Fragment key={node.id}>{node.title}</React.Fragment>
    ))}
  </Layout>
)

export default IndexPage

export const query = graphql`
  query {
    allMicrocmsBlog(sort: { fields: [createdAt], order: DESC }) {
      edges {
        node {
          id
          title
        }
      }
    }
  }
`

GatsbyJSの開発サーバーを立ち上げてみましょう。

$ yarn develop

このような感じでmicroCMSからのデータが表示されてます。

f:id:kamimura-dev:20201106203637p:plain

リポジトリGatsby Cloudを紐付ける

今回のプロジェクトをGitHubに上げてください。そして、作成したプロジェクトとGatsby Cloudを紐付けいきます。まずはプロジェクトを作成してみましょう。Add a siteをクリックします。

www.gatsbyjs.com

f:id:kamimura-dev:20201106204354p:plain

そして、Import from a Git repositoryを選択してNextをクリックします。

f:id:kamimura-dev:20201106204406p:plain

次に、先程上げたGitHubリポジトリを指定してください。

f:id:kamimura-dev:20201106204415p:plain

最後に、環境変数を指定できます。こちらは特に指定せずSaveをクリックしてください。

f:id:kamimura-dev:20201106204426p:plain
すると、ビルドが始まりプレビューURLが発行されます。例えば、本番環境にビルドする前にプレビューで事前に確認できます。

f:id:kamimura-dev:20201106204551p:plain

これで、Gatsby CloudとGitHubを連携することができました。

Gatsby CloudからS3にデプロイ

次に、Gatsby CloudからAWS S3にデプロイします。こちらは事前にAWSAccess Key IDとSecret Access Keyを取得する必要があります。また、GatsbyJSをホスティングするために設定が必要です。こちらの記事を参考にしてください。
docs.aws.amazon.com

そして、AWSでIAMユーザーを作成します。AWSダッシュボードから作成してください。

f:id:kamimura-dev:20201220124128p:plain
アクセス許可の設定をしてください。

f:id:kamimura-dev:20201220124136p:plain


ホスティングサービスはIntegrations -> Hosting integrationsから設定できます。そして、Access Key IDSecret Access Keyを確認することができます。

f:id:kamimura-dev:20201106204711p:plain

先程取得したAWSAccess Key IDSecret Access Keyを入力してSaveをクリックしてください。

f:id:kamimura-dev:20201106205058p:plain

microCMSのビルドをフックに再ビルド

microCMSの更新時に、再ビルドできるように設定します。Site Settings -> WebhookからBuilds Webhookを確認できます。

f:id:kamimura-dev:20201106211249p:plain

そして、microCMSのダッシュボードから先程確認したWebhookを設定してください。すると記事を公開時にビルドが走り、Gatsby Cloud経由でデプロイすることができます。

f:id:kamimura-dev:20201106205318p:plain

最後に

今回はmicroCMSのビルドhookを利用して、Gatsby Cloudでビルド -> AWS S3にデプロイまでを解説しました。これらの構成はJamstackでWebサイトを制作するう場合、運用面での優位性があります。もし、今回の構成を実践する場合ぜひ参考にしてみてください。