- 既存CMSからmicroCMSに移行できるのか気になった
- 個人でCMSを持ってないので、はてなブログをmicroCMSにデータ移行をやってみた
- データ移行だけ試してみるだけなのでこのブログは引き続きはてなブログで運営する
- 題材のブログは読書記録ブログの方
※諸注意
はてなブログからデータをexport
microCMSにデータをインポートする
悩みポイント
- exportした本文がHTML形式の場合、リッチエディタにいれてしまうと、HTMLタグがそのまま出力されてしまう
- microCMSデフォルトのデータであるpublishAtがimport日時になってしまう
- publishAtはUIからは変更ができるが、インポートは不可
- 近い悩みを抱える人を発見 WordPressからmicroCMSに記事を移行した時の覚え書き
解決方法の模索
- 先人から『importデータを別枠で隔離した方がわかりやすくなる』とアドバイスをもらったので、カスタムスキーマにimportデータを隔離し、『importデータがあれば優先して表示、なければ新規データを読み込む』とした。
- カスタムスキーマはCSVでimportできないが、 先の記事 と同じくPOSTならデータを入れることができるので、複数回POSTを叩くことでデータの移行を実現する
CSVの追加作業
- カテゴリのmicroCMS上のIDを発番したいので、『カテゴリのみのCSVデータ』を作成
- カテゴリのCSVデータをUI上からimportする
- カテゴリ一覧のJSONを取得し、先に作ったCSVのカテゴリ名をIDで置き換えを実施
- 置換のスクリプトはコチラ
POSTの実行
- POSTの実行の前にmicroCMSのAPI keyの権限をPOST許容に変更
- 移行作業が終わったら不可に戻しておく
- POSTのスクリプトはコチラ
- 1回実行ごとに5秒sleep
- 制限はないようだが、気持ち的に
'fieldId' : 'importData',は必須publishDateはmicroCMSはISO formatに変換。何もつけないとUTCになってしまうため、+09:00も追加。- 投稿の古い順からPOSTする
- こうしておくとGETするときに
publishedAtでソートするだけで投稿順に取得できる
- こうしておくとGETするときに
- 1回実行ごとに5秒sleep
UI構築
- importデータと新データの共存確認のためにUIも作ってみる
- 公式のmicroCMS + Next.jsでJamstackブログを作ってみよう | microCMSブログ を参考にやっていく。ついでにApp Routerにもしておく。
- 記事ページはこんな感じ
??を利用し、データがなければ新データ、という流れにした
【メモ】App RouterでmicroCMS構築
- 公式の構築記事からの主な変更点は下記
pages/blog/[id].tsxからpages/blog/[id]/page.tsxに変更getStaticPathsはgenerateStaticParamsに変更getStaticPropsはawaitでコンポーネント内で呼び出して良い
- Next.jsの公式を参照するときは、左上は青のApp Routerになっていることを確認
- キャッシュが消えない時は
.nextのcacheを消してdev環境を再起動するといける
悩み
- 新規記事の作成でもimportデータの欄が表示されてしまう
- importデータと共存のために、本来ならrequiredにしたい本文をrequiredにできていない
おわり
- リッチエディタ（HTML形式でexportされる）をリッチエディタに取り込めないのは移行を勧めるにあたってひっかかるポイントになってしまいそうなので手段を見つけたい
- App Routerは今回はじめてじっくり触ったが、しっくりくる使い心地で良い。getStaticPropsをコンポーネント内でただのデータfetchのように書ける点がとても好き
- App Routerの影響なのか、今回開発するときにdev環境のAPIのキャッシュがすごい強く、CMSのデータを更新してリロードしてもデータが変わらない事象に遭遇した。
.nextのcacheを消して再起動で解消したが、もっと良い方法がある気がする。 - 【リマインド】microCMSのAPIキーのPOSTの権限をOFFを忘れずに！
