2020-03-19

Netlify CMS がローカルで起動できるらしい(Beta)

Netlify CMSをローカルで起動する機能(Beta版)が先月から公開されていた。

結論

まず結論から言えば私の環境では起動はできるもののリアルタイムプレビューでエラーが出る。

2020/05/14追記：プレビューでエラーは出るがgatsby developモードを表示しながら行えば保存するたびレンダリングされるので十分実用的だと考えている。

ただ残念ながら5/14現在もNetlify CMS(オンライン版も同様)では日本語入力中に文字が消えていく不具合が残っているため現在は使用していない。

テストした経緯

まずNetlify CMSはビルド時間の無料枠を圧迫する可能性があり少し前から目をつけていた。

前回の記事を読んでいただければ分かる通り、ビルド時間制限に関しては問題ないと認識してはいるが、サーバーの反応が非常に遅い点も含めローカルで起動できることは魅力的であった。

公式ページ

Beta Featuresに情報が掲載されている。

使用方法は簡単

すでにNetlify CMSを利用している場合たった1行追加ですぐに利用できる。インストールも不要。

ただし公式に注意があるようにnetlify-cms@2.10.17 / netlify-cms-app@2.11.14以上のバージョンが必要だ。

ローカルに保存してあるNetlify CMSのコンフィグファイル config.yml に次の1行を挿入する。

local_backend: true

★もしポート番号をカスタマイズしたい場合は別の記述となるが余計な情報は省略する(公式を参照)

トップレベルプライオリティに記述することと注意があるので、設定のbackend:の項目が直下が良いかと思う。

分かりにくいかもしれないので例を掲載する。私の場合次のようになる。

#backendの中に書いてしまうとエラーになると思われるので注意
backend:
  name: git-gateway
  branch: master
  commit_messages:
    create: 'Create {{collection}} “{{slug}}”'
    update: 'Update {{collection}} “{{slug}}”'
    delete: 'Delete {{collection}} “{{slug}}”'
    uploadMedia: '[skip ci] Upload “{{path}}”'
    deleteMedia: '[skip ci] Delete “{{path}}”'

#ここに挿入
local_backend: true

#ここ以降は初めからあった記述
public_folder: img
publish_mode: editorial_workflow

CMSサーバーを実行

ymlファイルが保存できたら次のコマンドでサーバー側を実行する。特別なオプションは必要ない。

npx netlify-cms-proxy-server

npxはインストールなしで一時的にnpmから取得して実行するお手軽コマンドだ。

毎回ダウンロードが走るがpackage.jsonを変更しない(ディレクトリを汚さない)ため便利である。

gatsby developを実行

続けてgatsby developを実行する。注意点は上記サーバーは起動しっぱなしの状態が必要なので、コマンドプロンプトを別プロセスで分けて実行する必要がある。

gatsby develop

ローカルのCMSにアクセス

http://localhost:いつものポート番号/adminにアクセスすれば既に起動できているはずだ。

残念ながらプレビューが利用できない

私の環境ではエラーとなる。β版のため仕方ない。

エラー内容

Details Error: The result of this StaticQuery could not be fetched. This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues

詳しくは分からないがGraphQLを実行したが結果が得られなかったといった感じだろうか。

Gatsbyのバグなので公式の報告を開けとあるがGatsbyではなくNetlify CMSのバグだろう。

執筆途中 gatsby-plugin-netlify-cms のバージョン 4.1.42 が 4.1.43 にアップデートされていたため両バージョン試したが結果は変わらずだった。

ベータ版であり正常動作するのは一部の環境だけである考え、あまり深くは追わない。