Help us understand the problem. What is going on with this article?

[JAMstack]Gatsby + Netlify + Contentfulの構成を試してみた

何ができるのか

  • Webページを作ってネット上に公開できる
  • Webページに表示するコンテンツを管理コンソール上で編集できる
  • 管理コンソール上でコンテンツを更新すると自動でビルド/デプロイしページを最新化できる

実現できたこと

  • 以下のフローでWebページに表示するコンテンツを更新できる
  1. Contentfulの管理コンソールでコンテンツを登録
    step1.png

  2. Gatsbyで作ったReactアプリをNetlifyでホスティング(ビルド時にContentfulからデータを取得している)
    step2.png

  3. Contentfulの管理コンソールでコンテンツを追加/更新
    step3.png

  4. NetlifyがContentfulの更新をトリガーにbuild/deployを実行
    step4.png

  5. Webページをリロードすると最新版に反映されてる!
    step5.png

登場人物の紹介

Gatsby

  • https://www.gatsbyjs.org/
  • 静的サイトジェネレーター
  • Reactを拡張したフレームワークのようなもの
  • ビルド時に外部からコンテンツを取り込むことができるのが特徴的

Netlify

  • https://www.netlify.com/
  • ホスティングサービス
  • Githubなどのリポジトリと連携しclone/build/deployを行うことができる
  • 指定したブランチにpushされた時やPRが出された時など、簡単にトリガーを設定できるのが便利

Contentful

  • https://www.contentful.com/
  • HeadlessCMS
  • 管理コンソール上でDBのデータを更新できるようなイメージ
  • 登録したデータはAPIでアクセスできる

やったこと

Contentfulにデータを登録

  • Contentfulにログインし以下の手順を実施
  • サイドメニューを開いて+ Create spaceからSpaceを作成する
    スクリーンショット 2019-09-06 8.22.21.png
    スクリーンショット 2019-09-06 8.24.32.png
    スクリーンショット 2019-09-06 8.24.40.png
    スクリーンショット 2019-09-06 8.24.47.png

  • Add content typeからcontent type(RDBのテーブルのような概念)を追加する
    スクリーンショット 2019-09-06 8.27.22.png
    スクリーンショット 2019-09-06 8.28.15.png

  • Add fieldからfieldを追加
    スクリーンショット 2019-09-06 8.28.34.png
    スクリーンショット 2019-09-06 8.29.30.png
    スクリーンショット 2019-09-06 8.29.43.png
    スクリーンショット 2019-09-06 8.30.01.png

  • Add UserからUserを追加する
    スクリーンショット 2019-09-06 18.34.37.png
    スクリーンショット 2019-09-06 18.35.16.png
    スクリーンショット 2019-09-06 18.35.44.png

GatsbyでReactアプリを作成

アプリのを作成

  • GatsbyのCLIをインストール
npm install -g gatsby-cli
  • アプリケーションの雛形を生成
gatsby new gatsby-sample
  • アプリを起動してみる
cd gatsby-sample
npm start
  • ※自分の場合npm startしたときに以下のようなエラーが発生した

エラーの内容
npm ERR! code ELIFECYCLE
npm ERR! errno 7
npm ERR! gatsby-starter-default@0.1.0 develop: `gatsby develop`
npm ERR! Exit status 7
npm ERR!
npm ERR! Failed at the gatsby-starter-default@0.1.0 develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ozaki/.npm/_logs/2019-09-06T09_45_07_039Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 7
npm ERR! gatsby-starter-default@0.1.0 start: `npm run develop`
npm ERR! Exit status 7
npm ERR!
npm ERR! Failed at the gatsby-starter-default@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ozaki/.npm/_logs/2019-09-06T09_45_07_063Z-debug.log

  • /private/etc/hostsに以下の内容を記載することで解決した
127.0.0.1   localhost

ContentfulのAPIキーを取得

  • Contentfulからデータを取得できるように設定を追加する
  • Contentfulの管理コンソールでSettings->API keysからAPIキーを取得する
    スクリーンショット 2019-09-06 18.53.48.png

  • Example Key 1が事前に作られてるのでそれを選択
    スクリーンショット 2019-09-06 18.55.28.png

  • Space IDContent Delivery API - access tokenをこの後使うので控えておく
    スクリーンショット 2019-09-06 18.56.16.png

アプリにContentfulの設定を追加

  • GatsbyのContentfulプラグインを追加
# gatsby-sampleディレクトリ内で実行
npm install --save gatsby-source-contentfule
  • アプリのプロジェクト直下に.envというファイルを作成する
    スクリーンショット 2019-09-06 19.02.19.png

  • 上の作業で控えたSpace IDContent Delivery API - access tokenを設定する
    スクリーンショット 2019-09-06 19.12.53.png

  • gatsby-config.jsを修正する

// ファイルの先頭に以下の内容を追加
const dotenv = require("dotenv")

if (process.env.ENVIRONMENT !== "production") {
  dotenv.config()
}


// 下から3行目に以下の内容を追加
    {
      resolve: "gatsby-source-contentful",
      options: {
        spaceId: process.env.spaceId,
        accessToken: process.env.accessToken,
      },
    },
  • 左に緑の線がついている行が追加したところ
    スクリーンショット 2019-09-06 19.16.38.png

  • src/pages/index.jsを以下のように修正する

import React from "react"
// importを追記
import { useStaticQuery, graphql, Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => {
  // queryの取得処理を追加
  const data = useStaticQuery(graphql`
    query allContentfulUser {
      allContentfulUser {
        nodes {
          id
          name
          age
        }
      }
    }
  `)
  return (
    <Layout>
      <SEO title="Home" />
      <h1>Hi people</h1>
      {/* 取得したデータを表示する処理を追加 */}
      {data.allContentfulUser.nodes.map(({ id, name, age }) => (
        <h3 key={id}>
          {name}({age}歳)
        </h3>
      ))}
      <p>Welcome to your new Gatsby site.</p>
      <p>Now go build something great.</p>
      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
        <Image />
      </div>
      <Link to="/page-2/">Go to page 2</Link>
    </Layout>
  )
}

export default IndexPage

Contentfulから取得したデータをアプリで表示する

  • ここまでの設定が終わったらアプリを起動する
npm start
  • 以下のようにContentfulに登録したデータが表示される
    スクリーンショット 2019-09-06 19.29.34.png

  • ※アプリを起動しようとすると実行ログの途中でとまってしまい処理が進まなくなることがあった

    • その時はContentfulの管理コンソールのMediaに適当な画像をアップロードすると解消された(謎)

Contentfulから取得できるQueryの確認

  • アプリを起動した状態で以下のURLにアクセスするとGraphQLのPlaygroundが表示される

  • どのようなQueryがたたけるかここで試してから実装すると効率がよさそう

    • 今回は上のコードでallContentfulUserを使った

Netlifyでホスティング

GithubへPushする

  • ここまで開発したアプリをGithubにPushする
  • リポジトリの作成手順やPush手順は割愛

NetlifyとGithubのリポジトリ連携

  • New site from Gitを選択
    スクリーンショット 2019-09-06 19.43.00.png

  • Githubを選択しNetlifyからのアクセスを許可する
    スクリーンショット 2019-09-06 19.43.27.png

  • アプリをPushしたリポジトリを検索し選択する
    スクリーンショット 2019-09-06 19.44.49.png

  • Show advancedからNew variableを選択
    スクリーンショット 2019-09-06 19.46.24.png
    スクリーンショット 2019-09-06 19.46.53.png

  • .envに記載した項目2つと同じ値を設定しDeploy siteを選択
    スクリーンショット 2019-09-06 19.48.03.png

ホスティングしたページにアクセス

  • デプロイ直後は以下のようにSite deploy in progressと表示される
    スクリーンショット 2019-09-06 19.48.58.png

  • デプロイが完了するとURLが表示されアクセスするとアプリにアクセスできる
    スクリーンショット 2019-09-06 19.51.26.png

Contentfulの更新をトリガーにでプロイできるようにする

  • Netlifyの管理画面でSettings -> Build & Deploy -> Build hooksAdd build hookを選択
    スクリーンショット 2019-09-06 19.52.56.png

  • 適当な名前をつけてSaveし保存後に表示されるURLを控えておく
    スクリーンショット 2019-09-06 19.54.22.png

  • Contentfulの管理画面でSettings -> Webhooksを選択
    スクリーンショット 2019-09-06 19.55.38.png

  • Netlifyのアイコン横のaddを選択し控えておいたURLを入力しCreateする
    スクリーンショット 2019-09-06 19.56.19.png
    スクリーンショット 2019-09-06 19.56.27.png

  • ここまでできると冒頭の説明のようにContentfulのデータを更新するとNetlifyのbuild/deployが走りWebページが最新化されるようになった!

ozaki25
React, ReacNative, PWA
mdc
”自己研鑽のサイクル”を応援するコミュニティです。外の世界に発信&フィードバックを受け、コミュニティの仲間と共に頑張りましょう。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした