ブログ構成

Jamstack
- Gatsby
- GraphQL
- React
- microCMS

やりたいこと

ローカルで開発したブログ（ヘッドレスCMS）を久しぶりローカルで実行したい。

実行コマンド

npm run start

実行後のエラー

> 03-microcms@1.0.0 start
> gatsby develop

success open and validate gatsby-configs - 0.087s
success load plugins - 0.263s
success onPreInit - 0.069s
success initialize cache - 0.008s
success copy gatsby files - 0.072s

 ERROR 

Problems with gatsby-source-microcms plugin options:
"apiKey" is required

not finished onPreBootstrap - 0.053s

考えられること

APIKeyの指定方法、記述方法がおかしい
"apiKey" is required とあることからそもそも、keyを認識できていない
gatsby-source-microcms のパッケージに問題がある

APIKEYの設定ファイルを見てみる

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: "Blog",
  },
  plugins: [
    "gatsby-plugin-react-helmet",
    {
      resolve: "gatsby-source-microcms",
      options: {
        // microCMSのAPIキーを環境変数から参照する
        apiKey: process.env.MICROCMS_API_KEY,
        // microCMSのサービスID
        serviceId: "xxx",

        // 省略
      },
    },
  ],
};

解決策

npm run start する際にapiKeyを渡すのを忘れていた

env MICROCMS_API_KEY=[apiKey] npm run start

たとえばapiKeyが abcdefghijklmn だった場合、コマンドは以下となる
apiKeyを忘れた場合は、microCMS の管理画面にて確認できる

env MICROCMS_API_KEY=abcdefghijklmn npm run start

実行後

以下にアクセスして、ブログを確認できたらOK

  http://localhost:8000/