Gatsby+Strapiでブログを構築した話（３） ローカル環境構築 - Gatsby

前回のあらすじ

  • Strapiのローカル環境を構築した。
  • ブラウザから管理画面を見た。

この記事ですること

  • Gatsbyをローカル環境に入れる。
  • Strapi側でデータ構造を作る。
  • Strapiからデータを引っ張って来てページを作成する。
  • ブラウザから確認する。

Gatsby導入

前回作ったStrapiからデータを取ってきて静的サイトを作ってくれるのがGatsbyになる。
導入自体は以下のコマンドで終了。 

yarn global add gatsby-cli
cd ~/dreamer
gatsby new dreamer-gatsby

もちろんディレクトリ名は自由。
このライブラリの良い点はプラグインの豊富さ。
大抵のことはプラグインを入れて設定を少し書けば解決する。
逆にフロントのデザインを出来るだけしたくない身としてはデザインテンプレート的なのが欲しかった。
テーマというのに期待したんだけどデータ構造の縛りがキツくて断念。
作っていて気付くWordpressの偉大さ。

とりあえず動かしてみるわけだが、丁寧なことにインストール後に動かすためのコマンドを表示してくれるのでそのとおりにしてみる。 

cd dreamer-gatsby
gatsby develop

http://localhost:8000にアクセスしてこんな画面が出てきたら成功。

入れたら基本的なプラグインはもう導入してくれている。
追加で最低限必要なものだけを導入していく。 

yarn add gatsby-source-strapi

いかにもなやつで、StrapiとGatsbyをつなげるのを楽にしてくれる優れもの。
これ以外にも入れているプラグインはあるが、本題から逸れるので次回に回す。

インストールしたら設定ファイルに追記。
gatsby-config.js

plugins: [
    ...
    {
        resolve: "gatsby-source-strapi",
        options: {
            apiURL: process.env.API_URL || "http://localhost:1337",
            contentTypes: [
                // List of the Content Types you want to be able to request from Gatsby.
                "article",
                "category",
            ],
            queryLimit: 1000,
        },
    },
    ...
]

ついでにAPIサーバーの設定もしてしまう。
今回はローカルのStrapiを見に行くようにしたいので、その設定を追加。
本番では環境変数を設定することでビルド時にurlを柔軟に変更できる。
contentTypesはStrapiの方の設定と合わせていくことになるので今はとりあえず書いておくだけ。

次に https://strapi.io/blog/build-a-static-blog-with-gatsby-and-strapi によると components/seo.jsとsrc/assets/css/main.cssを作れとのこと。

seo.tsx
main.css
gatsby-config.js

長いのでGithubのリンクを貼る。
あとで記事書くように定期的にバージョンタグをつけるべきだった。
おかげでコミットログを遡るはめになる。

ちなみに少し先に進めた際の全体像はこんな感じ。
詰まったら参考にするといいかもしれない。
https://github.com/Tim0401/dreamer-gatsby/tree/4de130e2d74a74d619a9b4797a58d57afd423fe2

Strapiデータスキーマ作成

さて、データを取得出来る下地は整ったわけだが、どんな形でデータを持ちたいかを設定していく必要がある。
記事(article)ならサムネ(image)と本文(content)が欲しいなどといった形。
前回アクセスしたStrapiの管理画面(http://localhost:1337)を開くと、左側に設定項目がある。

Content-Types Builderというのをクリックすると上のような画面が出る。
ここで先程Gatsbyの方で名前だけ出てきたArticleやCategoryの構造を作っていく。
ここで、Create New Collection Typeから新しい構造が作れる。
画像のような流れで好みに作れるが、フロント側にも影響するので今回は元にした記事にしたがっていく。 

title Text 必須
content Rich Text 必須
image  Media (Single image) 必須
published_at  date 必須

といった形で、構造を作った。

そうしたら次に権限の設定をする。
これをしないと外からデータを取ることが出来ない。

ロールと権限に移動してpublicの方を編集する。
許可内容としては認証していない誰であっても記事一覧と記事を見ることができる、といった感じ。
これでGatsby側から認証なしで記事データを取ることができる。
さて、ようやくこれで記事を書く最低限の準備はできた 。
動作確認も兼ねてテスト記事を作ってみる。もちろんローカル環境なので全世界に公開はされない。

私の記事は昔書いてたものを流用。お好きなものをどうぞ。
保存したらhttp://localhost:1337/articlesにアクセスする。
書いた記事の情報がずらっと並べば成功だ。

ついでにカテゴリも作っておく。

構造同士のリレーションを作る事もできる。
DB設計してる気分になるが、内部で同じことが行われてそう。
記事には一つのカテゴリが設定できる形。
ちなみにタグのように多対多ならこうなる。

カテゴリに関してもArticleと同様に権限設定をしておく。
これを忘れるとカテゴリだけ取得できない謎バグに悩まされることになる。
新しい構造を作った時は忘れずに行うこと。

ここまででバックエンドの作業は一旦完了といっていい。
というわけで今回はここまで。
GatsbyよりStrapiの解説の方が長かったかもしれない。
次は多くの人の目に晒されるフロントエンドのデザイン作業とデータ取得。
デザインはできるだけ楽に済ませたい人なので多くは解説しないが、作ったものが分かりやすく現れる楽しい部分でもあるので自分の好みに合わせてカスタマイズしていってほしい。

次の記事： Gatsby+Strapiでブログを構築した話（４） GatsbyのデザインとStrapiとの連携

Copyright© 2020 akeno