​​Shifter Static から Shifter Headlessへお引越しして Next.js で Netlify にデプロイしてみたよ

​​WHO AM I

​​
 
User-uploaded image: btn-orign-cleanup.png
​​
​​https://twitter.com/miminari
  • ​​mimi
  • ​​フリーランスのWEBデザイナー
  • ​​CSSに惚れ込んで17年来のお付き合い
  • ​​PHPとJavaScriptとも付き合いは長いですが、お知り合い程度
  • ​​サーバーはApacheで遊んでた程度でバックエンドは基本、プログラマな夫に丸投げなのでサーバー忘れさせてくれるShifterが大好き
  • ​​WordPressとは10年余の腐れ縁
  • ​​Figmaが最新の恋人

​​新しいモノ好きなミーハーなのでJAMStackな頃からJamstackに憧れていましてShifterさんには1年前ぐらいからお世話になっております

​​また去年から月2回ほど「Gutenbergを読む会」というゆるい勉強会もやっています

​​
 
User-uploaded image: -2020-03-04-1.51.39-scaled.jpg
​​主にこんなメンツでやっています（他にもメンバーが居ます）
​​GutenbergというWordPressのエディター開発プロジェクトをネタに、WordPressのテーマ開発者さんが多いのでテーマ開発のこととか、Gutenbergリリース早すぎ無理死ぬとかをうだうだ夜中に喋っています。

​​今回はその勉強会のサイトをHeadlessへお引越しし、Next.jsでNetlifyにデプロイしてみたよ、というお話です

​​でも、もともとShifter Static → Gridsome → Netlify というサイトだったので

​​「Shifter Static から Shifter Headless へお引越し」

​​という謎な作業をしました。
​​
 
User-uploaded image: image.png
​​こちらが元のStaticサイトのShifter管理画面

​​0. パスワードを控えるのが何より大事

​​といっても基本的に、Shifterの公式ブログに書いてあるとおりにAll-in-One WP Migrationを有効化してDBを落としてくれば問題ないのですが、唯一、Shifter Static側の管理画面からパスワードを発行して控えておくということがたぶん大事になります。（他にもやり方があるのかも知れませんが手っ取り早いので私はこの方法でやりました。）
​​
 
User-uploaded image: image.png
​​普通にユーザーのプロフィール管理画面からパスワードを発行してコピーしておきます

​​1. Headlessのトライアルを登録

​​
 
Introducing Shifter Headless
support.getshifter.io
Introducing Shifter Headless • support.getshifter.io
​​
​​こちらの公式のサポートページ書かれている通り、ぽちぽちっと押していけばこういう↓ページに辿り付きます。
​​
 
User-uploaded image: shifter-ss-01.png
​​admin URLからInitialのUsernameとPasswordでログインします

​​3. All-in-One WP Migrationを使ってDBをお引越し

​​あとはこちら（Headless側）のAll-in-One WP Migrationを有効化してさっき落としてきたDBデータをアップロードするだけです。
​​そして、最初にひかえておいたパスワードでログインし直したらOK！

​​?. 画像どうしたらいいの？

​​ちょっとひっかかったのは、そもそも記事数が少ないので画像が数枚しかなかったので手作業でやっちゃってそんなに困らなかったのですが、普通にuploadsを移すだけだと画像が逝ってしまわれるのでどうしたらいいのかなーと思ったりしました。うまいやり方をご存知の方はご教授ください。
​​
​​
​​2020/12/02 追記 Shifterのサポートの方からの情報です
​​● MeidaCDN を使わない場合 (メディアが wp-content/uploads/ 内にある場合)
​​Static 側の前処理
​​1. WordPress に登録されているユーザのアカウント情報をコピーしておく (ID/PW, メールアドレス)
​​2. All-in-One WP Migration でデータをエクスポートする
​​
​​Headless 側の処理
​​1. All-in-One WP Migration でデータをインポートする
​​2. WordPress のダッシュボードへログインする
​​パスワードが分からない場合は再発行をする
​​3. インポートした記事を確認する
​​4. サイトを構築する
​​
​​● Media CDN を使う場合
​​Static 側の前処理
​​1. メディアを CDN → wp-content/uploads/ へ移動する