necco 阿部さんの記事を見て Shifter Headless + Faust.js + Vercel したらかんたんに実装できちゃった話

2021/12/10 Shifter オンラインミートアップ！
https://eventregist.com/e/uULbnS740mav

Transcript

1. Pentaprogram 佐藤あゆみ necco 阿部さんの記事を見て Shifter Headless + Faust.js + Vercel したら かんたんに実装できちゃった話 [12/10 開催] Shifter オンラインミートアップ！
2. ͜Ε·Ͱͷ͋Β͢͡
3. WordPress運用の悩み • WP本体、プラグイン、サーバのアップデート対応がつらい • もたもたしてると、セキュリティちょっと心配 • きちんとしたテーマを作るのがたいへん 
 （ブロックエディタ？FSE？） • ちょっと重いかも…
4. ヘッドレス対応で解消できる（かも） • WP本体、プラグイン、サーバのアップデート対応がつらい • もたもたしてると、セキュリティちょっと心配 ✓WP本体と公開サイトを分離して管理できる • テーマを作るのがたいへん ✓公開サイトは好きな言語を使って自由に色付け • ちょっと重いかも… ✓公開サイトは静的ページにできるほか、やりたい放題
5. いっぽう、残る問題も… • WP本体、プラグイン、サーバのアップデート対応がつらい • ヘッドレス＋Jamstack構成にすると 
 プレビューを実装するのが難しい
6. Shifter Headless で解消できる！ • 本体、プラグイン、サーバのアップデート対応がつらい ✓マネージドホスティングなので、 
 WordPress側はShifterが対応してアップデートしてくれる • ヘッドレス＋Jamstackにすると 
 プレビューを実装するのが難しい https://www.getshifter.io/
7. Faust.js で解消できる！ • 本体、プラグイン、サーバのアップデート対応がつらい ✓マネージドホスティングなので、 
 WordPress側はShifterが対応して適用してくれる • ヘッドレス＋Jamstackにすると 
 プレビューを実装するのが難しい ✓Headless WordPress用フレームワーク Faust.jsが 
 データをよしなに取り回してくれるので、 
 WordPress画面から簡単にプレビューできる https://faustjs.org/
8. Faust.js φχϞ ϫΧϥφΠ… Ͱ΋…
9. ブログ記事があったー！！ しかもすぐ試せるリポジトリもあったー！ • necco 阿部さん執筆のブログ記事 • HAMWORKS Toro_Unitさんの 
 Faust.js初期設定済リポジトリ • 圧倒的感謝 • Shifter Headlessを 
 組み合わせてみよう！ https://necco.co/note/6740
10. この状態がゴール 7日後に自動的に消滅する予定（お試し版なので） https://faustjs-demo.vercel.app/
11. こんな素敵なレイアウトも スタンダードなWordPressでは難しい表現もできる
12. Shifter Headless Ͱ WordPressαΠτΛ࡞Ζ͏ Shifter
17. 後日でOK
18. ϩʔΧϧʹϦϙδτϦΛΫϩʔϯ͠Α͏ Local & Remote
19. ローカルにtoro_unitさんのリポジトリをクローン git clone git@github.com:torounit/faustjs-app.git https://github.com/torounit/faustjs-app _
20. リモートに 
 新規リポジトリを作成 •GitHub •GitLab •Bitbucket Vercelと連携できるならなんでもOK
21. リモートリポジトリにプッシュ cd faustjs-app git remote set-url origin https://github.com/(自分のアカウント名)/faustjs-demo.git git branch -M main git push -u origin main
22. VercelΛॳظηοτΞοϓ͠Α͏ Vercel
23. 新しいプロジェクトを作成する
24. リポジトリをインポートする
25. とりあえずデプロイボタンを押しておく
26. 公開サイトURL
28. Shifter Headless Λઃఆ͠Α͏ Shifter
29. WordPress 管理画面にログインする
30. Headless by WP Engineプラグインを有効化する
31. Headless設定① • Front-end site URLに 
 公開サイト(Vercel)のURLを 
 設定する • Secret Keyをメモする
32. Headless設定② WP GraphQLΛActiveʹ͢ΔϘλϯΛԡ͢ • WP GraphQLをActiveにする
33. GraphQL設定 WP GraphQLΛActiveʹ͢ΔϘλϯΛԡ͢ • Public Introspectionを 
 有効にする
34. パーマリンクを設定 WP GraphQLΛActiveʹ͢ΔϘλϯΛԡ͢ • /posts/%postname%/ • こだわりがなければslug （postname）がラク https://faustjs.org/docs/next/reference/hooks/usePost
35. Vercel ʹ Shifter Headless ͷ৘ใΛઃఆ͠Α͏ Vercel
36. 環境変数を追加する Settings -> Environment Variables • NEXT_PUBLIC_WORDPRESS_URL: 
 ShifterのURL • WP_HEADLESS_SECRET: 
 メモした文字列
37. ϩʔΧϧ؀ڥΛηοτΞοϓ͠Α͏ Local
38. ͳʹ͸ͱ΋͋Ε npm install
39. .envを編集 ✴このまま push すると.env も push されてしまうので 
 気になる場合は先にリモートから .env を消しておく Shifter Headless のサイトURL Secret Key
40. Shifterの情報をローカルのスキーマに反映させる npm run generate
41. ローカル環境を立ち上げてみる npm run dev
42. リポジトリに変更をプッシュする スキーマを変更したのでリポジトリにPUSHして 
 Vercelに反映させる
43. ͢Δͱ…
44. デプロイでコケる Vercelのデプロイ失敗
45. デプロイでコケる Vercelのデプロイ失敗 • toro_unitさんのリポジトリで はBookというカスタム投稿タイ プを使用 • Shifter上にはBookというカス タム投稿タイプがないのでス キーマにも存在しない • コードには存在するので、エ ラーが出る • そうだ、カスタム投稿を作ろう
46. ΧελϜ౤ߘλΠϓΛઃఆ͠Α͏ Shifter
47. カスタム投稿タイプを設定しよう toro_unitさんのリポジトリを使う場合 • mu-pluginsフォルダにカスタム投稿を設定する記述あり • Shifter Headlessはmu-pluginsに直接ファイルを入れられない 
 （FTPやSSH接続できない） • Code Snippetsプラグインを使って同内容の記述を追加する • CPT UIやAtlas Content Modelerでも登録可
48. https://github.com/torounit/faustjs-app/blob/main/mu-plugins/post-type.php
49. Code Snippetsプラグインを有効化する
50. 新しいスニペットを作成する
51. スニペットを登録する mu-plugins/post-type.phpの内容をコピペ • 内容はそのままでOK • コピペできたら 
 Save Changes and Activate 
 ボタンで保存＆有効化
52. カスタム投稿ができた！
53. ΧελϜ౤ߘλΠϓΛ൓өͤ͞Α͏ Local
54. Shifterの情報をローカルのスキーマに反映させる（再） npm run generate
55. リポジトリに変更をプッシュする（再） スキーマを変更したのでリポジトリにPUSHして 
 Vercelに反映させる
57. ౤ߘΛϓϨϏϡʔͯ͠ΈΑ͏ Shifter
62. ࠷ޙʹ
63. まとめ • 記事にそってぽちぽちするだけで味付け自由な ヘッドレス WordPress サイトを作れる！ • すべて無料で試せる！ • カスタム投稿タイプ設定に注意 
 （※阿部さんの記事執筆後に加わったもので、記 事には記載がありません） • necco 阿部さん、HAMWORKS Toro_Unitさん、 
 ありがとう！！
64. Pentaprogram 佐藤あゆみ ありがとうございました "If you put your mind to it, you can accomplish anything." - Back to the Future