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

この記事はJamstackその２ 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からのデータが表示されてます。

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

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

www.gatsbyjs.com

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

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

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

すると、ビルドが始まりプレビューURLが発行されます。例えば、本番環境にビルドする前にプレビューで事前に確認できます。

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

Gatsby CloudからS3にデプロイ

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

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

アクセス許可の設定をしてください。

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

先程取得したAWSでAccess Key IDとSecret Access Keyを入力してSaveをクリックしてください。

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

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

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

最後に

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