Gatsbyのデプロイで発生したエラーまとめ

2019-02-09 Yuki MatsumotoGatsby

Gatsbyの導入で発生したエラーとその解決策に使ったリソースをまとめてみた。
まず自分がGatsbyでブログをはじめるにあたって使ったテンプレートがこちら Gregさんが投稿した gatsby-starter-hero-blog というテンプレート。

デザインがイケてるなーというで選定。 (当初カスタマイズ性のしやすさなどはあまり考慮していなかったため、この後少々苦戦することになる。)

Netlify CMSのログインができない

今回はGatsbyとNetlifyを使ってブログを作るため、せっかくならNetlifyが提供しているCMSを使うことにした。 Netlify CMS を使うとブログのが簡単になるので使わない手段はない。イメージとしてはLivedoorやはてなブログが提供しているような管理ツールを使ってブログの投稿や編集ができる。対して難しい実装をしなくても簡単にできるだろうと思っていたが、これが甘かった。まず、テストとして使っていたテンプレートを元に必要そうなパッケージをインストールし、必要なコードを実装した。

実際に導入したプラグイン "gatsby-plugin-netlify-cms": "^3.0.9"

実装したコード

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
  <script>
    if (window.netlifyIdentity) {
      window.netlifyIdentity.on("init", user => {
        if (!user) {
          window.netlifyIdentity.on("login", () => {
            document.location.href = "/admin/";
          });
        }
      });
    }
  </script>
</body>
</html>

backend:
  name: git-gateway
  branch: master

media_folder: "static/media"
public_folder: "/media"

collections:
  - name: "posts"
    label: "Posts"
    folder: "content/posts"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template", name: "template", widget: "hidden", default: "post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Slug", name: "slug", widget: "string"}
      - {label: "Draft", name: "draft", widget: "boolean", default: true}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text"}
      - {label: "Category", name: "category", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Tags", name: "tags", widget: "list"}

  - name: "pages"
    label: "Pages"
    folder: "content/pages"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Template", name: "template", widget: "hidden", default: "page"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Slug", name: "slug", widget: "string"}
      - {label: "Draft", name: "draft", widget: "boolean", default: true}
      - {label: "Body", name: "body", widget: "markdown"}

Netlifyからのデプロイが問題なく完了し、いざ管理画面からログインをしようと/adminを実行するとログイン画面が表示された。
「よしできたぞー！」と思い、メールアドレスとパスワードを入力したが、「あれ、なにも反応しない。。」この後、ログインができるまでに2日ほど時間を要してしまった。
結果的にログインができない問題はhtml.mdにwidgetがなかったのが原因だった。
bodyタグに以下のコードを追加したらログインができるようになった。

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

ちなみにこのコードはログイン機能そのものを追加する部分で根幹ががっぽり抜けてたのが原因だった。
おかげでログイン周りのエラーはかなり調べ尽くした感がある。
ログイン周りで使ったリソースは結果的に全て英語のリソースになった。

以下は参考にしたリソースの一覧

もし、ログイン画面が出てくるけど、ログインが反応しない場合はここのページが一番役にたつかも
Admin - Login button not working

fix(gatsby-plugin-netlify-cms): ensure login listener is added after logou

fix(netlify-cms): redirect after git gateway login

自分は一番上のヘルプでhtmlファイルにwidgetの追加が必要なことを理解して解決した。

学んだこと

Gatsbyでのブログ開設を通して学んだことはとにかく一次リソースを取りに行くということ。多分できるエンジニアさんたちの間では当たり前のことだと思いますが、見習いエンジニアの自分にとっては身をもって体感した。英語できるのについつい面倒で日本語リソース先にみてたけど、間違いなくサイト提供している一時リソースが一番ためになります。
これは疑いようのない事実だった。
今回のことを通して改めて大事だなと思ったのはとにかく時間がかかっても一時リソースを参照すること。これが結果として実装をよりスムーズに進めてくれると思った。

余談

なんとかCMSへログインができて、ブログのデプロイもできたけど、肝心なファイルがトップページに表示されない。どうやら、CMS経由だとファイルのみが作成されるようなのだが、自分が使っているテンプレートは一投稿ごとにディレクトリの作成が必要な仕様になっており、現状のCMSとの相性がよくないみたい。きっと、CMS経由からの投稿ができる方法はあるはずだけど、ちょっと疲れたので結局VScode経由からブログを投稿してます。そろそろ、Railsでの開発も進めていかないといけないので、Gatsbyブログをいじるのはこれくらいにしておきます。