Gatsby.jsサイトでNetlify CMSにサブドメインからログインする

動機

Netlify CMS用のライブラリがcode splitingの妨げになっている可能性が高かったので(ライブラリの動的インポートが、CMSのプレビュー機能のために意味なくなっていた。CMSが根こそぎライブラリを必要とするためっぽい)サブドメインにCMSだけ分離しようとしていた。

また、はじめGithub backendを使用しており、元はexample.com/adminにアクセスすることでCMSを動かしていたが、これをcms.example.com/adminに分離したかった。

ダメだったやつ

まず考えたのがmasterからcmsブランチを切ってNetlifyの設定でサブドメインとして登録するというもの。一番シンプルだが、これだとなぜかcms.example.com/adminにアクセスした後のGithubでの認証が、example.comの方で行われてしまい、cms.example.com/adminにアクセスできないみたい。

できたやつ

Netlify CMSのbackendをGit-gatewayに変更した。こちらなどを参考にgit-gatewayでのログイン設定をして、サブドメイン用のブランチcmsの/static/config.ymlにNetlify CMS用の以下の記述を追加

static/config.yml

backend:
    name: git-gateway
    accept_roles:
        - admin

なお、サブドメインでcmsを使う際は、なぜかeditorial workflow(下書き機能)を有効にしているとsaveに失敗します。しょうがないのでeditorial workflowに関する設定は消しておきましょう。(参考)

gatsby-config.jsにnetlify-cms用のidentityWidgetの項目があることを確認。以下は自分の設定です。参考までに。

gatsby-config.js

{
    resolve: `gatsby-plugin-netlify-cms`,
    options: {
        modulePath: `${__dirname}/src/cms/cms.tsx`, // for custom preview in the Netlify CMS
        enableIdentityWidget: true,
	publicPath: `admin`,
	htmlTitle: `Content Manager`,
	manualInit: true
	}
},

こんな感じの設定をしてからcmsブランチに変更分をpushしてサブドメインのcms.example.com/adminにアクセスすると、メールでの認証を求められるので登録したメールアドレスとパスワードでログイン。

これでできるはずです。

まとめ

Gatsby.jsでブログ作ってると、Reactで詰まるより圧倒的にCMSとかで詰まることの方が多いんですよね...😇