$30 off During Our Annual Pro Sale. View Details »

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

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

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

佐藤あゆみ

December 10, 2021
Tweet

More Decks by 佐藤あゆみ

Other Decks in Technology

Transcript

  1. Pentaprogram 佐藤あゆみ
    necco 阿部さんの記事を見て


    Shifter Headless + Faust.js + Vercel したら


    かんたんに実装できちゃった話
    [12/10 開催] Shifter オンラインミートアップ!

    View Slide

  2. ͜Ε·Ͱͷ͋Β͢͡

    View Slide

  3. WordPress運用の悩み
    • WP本体、プラグイン、サーバのアップデート対応がつらい


    • もたもたしてると、セキュリティちょっと心配


    • きちんとしたテーマを作るのがたいへん

    (ブロックエディタ?FSE?)


    • ちょっと重いかも…

    View Slide

  4. ヘッドレス対応で解消できる(かも)
    • WP本体、プラグイン、サーバのアップデート対応がつらい


    • もたもたしてると、セキュリティちょっと心配


    ✓WP本体と公開サイトを分離して管理できる


    • テーマを作るのがたいへん


    ✓公開サイトは好きな言語を使って自由に色付け


    • ちょっと重いかも…


    ✓公開サイトは静的ページにできるほか、やりたい放題

    View Slide

  5. いっぽう、残る問題も…
    • WP本体、プラグイン、サーバのアップデート対応がつらい


    • ヘッドレス+Jamstack構成にすると

    プレビューを実装するのが難しい

    View Slide

  6. Shifter Headless で解消できる!
    • 本体、プラグイン、サーバのアップデート対応がつらい


    ✓マネージドホスティングなので、

    WordPress側はShifterが対応してアップデートしてくれる


    • ヘッドレス+Jamstackにすると

    プレビューを実装するのが難しい
    https://www.getshifter.io/

    View Slide

  7. Faust.js で解消できる!
    • 本体、プラグイン、サーバのアップデート対応がつらい


    ✓マネージドホスティングなので、

    WordPress側はShifterが対応して適用してくれる


    • ヘッドレス+Jamstackにすると

    プレビューを実装するのが難しい


    ✓Headless WordPress用フレームワーク Faust.jsが

    データをよしなに取り回してくれるので、

    WordPress画面から簡単にプレビューできる
    https://faustjs.org/

    View Slide

  8. Faust.js φχϞ ϫΧϥφΠ…
    Ͱ΋…

    View Slide

  9. ブログ記事があったー!!
    しかもすぐ試せるリポジトリもあったー!
    • necco 阿部さん執筆のブログ記事


    • HAMWORKS Toro_Unitさんの

    Faust.js初期設定済リポジトリ


    • 圧倒的感謝


    • Shifter Headlessを

    組み合わせてみよう!
    https://necco.co/note/6740

    View Slide

  10. この状態がゴール
    7日後に自動的に消滅する予定(お試し版なので)
    https://faustjs-demo.vercel.app/

    View Slide

  11. こんな素敵なレイアウトも
    スタンダードなWordPressでは難しい表現もできる

    View Slide

  12. Shifter Headless Ͱ WordPressαΠτΛ࡞Ζ͏
    Shifter

    View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. 後日でOK

    View Slide

  18. ϩʔΧϧʹϦϙδτϦΛΫϩʔϯ͠Α͏
    Local &
    Remote

    View Slide

  19. ローカルにtoro_unitさんのリポジトリをクローン
    git clone [email protected]:torounit/faustjs-app.git
    https://github.com/torounit/faustjs-app


    _

    View Slide

  20. リモートに

    新規リポジトリを作成
    •GitHub


    •GitLab


    •Bitbucket


    Vercelと連携できるならなんでもOK

    View Slide

  21. リモートリポジトリにプッシュ
    cd faustjs-app


    git remote set-url origin https://github.com/(自分のアカウント名)/faustjs-demo.git


    git branch -M main


    git push -u origin main


    View Slide

  22. VercelΛॳظηοτΞοϓ͠Α͏
    Vercel

    View Slide

  23. 新しいプロジェクトを作成する

    View Slide

  24. リポジトリをインポートする

    View Slide

  25. とりあえずデプロイボタンを押しておく

    View Slide

  26. 公開サイトURL

    View Slide

  27. View Slide

  28. Shifter Headless Λઃఆ͠Α͏
    Shifter

    View Slide

  29. WordPress 管理画面にログインする

    View Slide

  30. Headless by WP Engineプラグインを有効化する

    View Slide

  31. Headless設定①
    • Front-end site URLに

    公開サイト(Vercel)のURLを

    設定する


    • Secret Keyをメモする

    View Slide

  32. Headless設定②
    WP GraphQLΛActiveʹ͢ΔϘλϯΛԡ͢
    • WP GraphQLをActiveにする

    View Slide

  33. GraphQL設定
    WP GraphQLΛActiveʹ͢ΔϘλϯΛԡ͢
    • Public Introspectionを

    有効にする

    View Slide

  34. パーマリンクを設定
    WP GraphQLΛActiveʹ͢ΔϘλϯΛԡ͢
    • /posts/%postname%/


    • こだわりがなければslug
    (postname)がラク
    https://faustjs.org/docs/next/reference/hooks/usePost

    View Slide

  35. Vercel ʹ Shifter Headless ͷ৘ใΛઃఆ͠Α͏
    Vercel

    View Slide

  36. 環境変数を追加する
    Settings -> Environment Variables
    • NEXT_PUBLIC_WORDPRESS_URL:

    ShifterのURL


    • WP_HEADLESS_SECRET:

    メモした文字列

    View Slide

  37. ϩʔΧϧ؀ڥΛηοτΞοϓ͠Α͏
    Local

    View Slide

  38. ͳʹ͸ͱ΋͋Ε
    npm install

    View Slide

  39. .envを編集
    ✴このまま push すると.env も push されてしまうので

    気になる場合は先にリモートから .env を消しておく
    Shifter Headless のサイトURL
    Secret Key

    View Slide

  40. Shifterの情報をローカルのスキーマに反映させる
    npm run generate

    View Slide

  41. ローカル環境を立ち上げてみる
    npm run dev

    View Slide

  42. リポジトリに変更をプッシュする
    スキーマを変更したのでリポジトリにPUSHして

    Vercelに反映させる

    View Slide

  43. ͢Δͱ…

    View Slide

  44. デプロイでコケる
    Vercelのデプロイ失敗

    View Slide

  45. デプロイでコケる
    Vercelのデプロイ失敗
    • toro_unitさんのリポジトリで
    はBookというカスタム投稿タイ
    プを使用


    • Shifter上にはBookというカス
    タム投稿タイプがないのでス
    キーマにも存在しない


    • コードには存在するので、エ
    ラーが出る


    • そうだ、カスタム投稿を作ろう

    View Slide

  46. ΧελϜ౤ߘλΠϓΛઃఆ͠Α͏
    Shifter

    View Slide

  47. カスタム投稿タイプを設定しよう
    toro_unitさんのリポジトリを使う場合
    • mu-pluginsフォルダにカスタム投稿を設定する記述あり


    • Shifter Headlessはmu-pluginsに直接ファイルを入れられない

    (FTPやSSH接続できない)


    • Code Snippetsプラグインを使って同内容の記述を追加する


    • CPT UIやAtlas Content Modelerでも登録可

    View Slide

  48. https://github.com/torounit/faustjs-app/blob/main/mu-plugins/post-type.php

    View Slide

  49. Code Snippetsプラグインを有効化する

    View Slide

  50. 新しいスニペットを作成する

    View Slide

  51. スニペットを登録する
    mu-plugins/post-type.phpの内容をコピペ
    • 内容はそのままでOK


    • コピペできたら

    Save Changes and Activate

    ボタンで保存&有効化

    View Slide

  52. カスタム投稿ができた!

    View Slide

  53. ΧελϜ౤ߘλΠϓΛ൓өͤ͞Α͏
    Local

    View Slide

  54. Shifterの情報をローカルのスキーマに反映させる(再)
    npm run generate

    View Slide

  55. リポジトリに変更をプッシュする(再)
    スキーマを変更したのでリポジトリにPUSHして

    Vercelに反映させる

    View Slide

  56. View Slide

  57. ౤ߘΛϓϨϏϡʔͯ͠ΈΑ͏
    Shifter

    View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. ࠷ޙʹ

    View Slide

  63. まとめ
    • 記事にそってぽちぽちするだけで味付け自由な
    ヘッドレス WordPress サイトを作れる!


    • すべて無料で試せる!


    • カスタム投稿タイプ設定に注意

    (※阿部さんの記事執筆後に加わったもので、記
    事には記載がありません)


    • necco 阿部さん、HAMWORKS Toro_Unitさん、

    ありがとう!!

    View Slide

  64. Pentaprogram 佐藤あゆみ
    ありがとうございました
    "If you put your mind to it, you can accomplish anything."


    - Back to the Future

    View Slide