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

Slide 1

Slide 1 text

Pentaprogram 佐藤あゆみ necco 阿部さんの記事を見て Shifter Headless + Faust.js + Vercel したらかんたんに実装できちゃった話 [12/10 開催] Shifter オンラインミートアップ！

Slide 2

Slide 2 text

͜Ε·Ͱͷ͋Β͢͡

Slide 3

Slide 3 text

WordPress運用の悩み • WP本体、プラグイン、サーバのアップデート対応がつらい • もたもたしてると、セキュリティちょっと心配 • きちんとしたテーマを作るのがたいへん   （ブロックエディタ？FSE？） • ちょっと重いかも…

Slide 4

Slide 4 text

ヘッドレス対応で解消できる（かも） • WP本体、プラグイン、サーバのアップデート対応がつらい • もたもたしてると、セキュリティちょっと心配 ✓WP本体と公開サイトを分離して管理できる • テーマを作るのがたいへん ✓公開サイトは好きな言語を使って自由に色付け • ちょっと重いかも… ✓公開サイトは静的ページにできるほか、やりたい放題

Slide 5

Slide 5 text

いっぽう、残る問題も… • WP本体、プラグイン、サーバのアップデート対応がつらい • ヘッドレス＋Jamstack構成にすると   プレビューを実装するのが難しい

Slide 6

Slide 6 text

Shifter Headless で解消できる！ • 本体、プラグイン、サーバのアップデート対応がつらい ✓マネージドホスティングなので、   WordPress側はShifterが対応してアップデートしてくれる • ヘッドレス＋Jamstackにすると   プレビューを実装するのが難しい https://www.getshifter.io/

Slide 7

Slide 7 text

Faust.js で解消できる！ • 本体、プラグイン、サーバのアップデート対応がつらい ✓マネージドホスティングなので、   WordPress側はShifterが対応して適用してくれる • ヘッドレス＋Jamstackにすると   プレビューを実装するのが難しい ✓Headless WordPress用フレームワーク Faust.jsが   データをよしなに取り回してくれるので、   WordPress画面から簡単にプレビューできる https://faustjs.org/

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ブログ記事があったー！！しかもすぐ試せるリポジトリもあったー！ • necco 阿部さん執筆のブログ記事 • HAMWORKS Toro_Unitさんの   Faust.js初期設定済リポジトリ • 圧倒的感謝 • Shifter Headlessを   組み合わせてみよう！ https://necco.co/note/6740

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

後日でOK

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

リモートに   新規リポジトリを作成 •GitHub •GitLab •Bitbucket Vercelと連携できるならなんでもOK

Slide 21

Slide 21 text

リモートリポジトリにプッシュ cd faustjs-app git remote set-url origin https://github.com/(自分のアカウント名)/faustjs-demo.git git branch -M main git push -u origin main

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

公開サイトURL

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Shifter Headless Λઃఆ͠Α͏ Shifter

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Headless設定① • Front-end site URLに   公開サイト(Vercel)のURLを   設定する • Secret Keyをメモする

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

GraphQL設定 WP GraphQLΛActiveʹ͢ΔϘλϯΛԡ͢ • Public Introspectionを   有効にする

Slide 34

Slide 34 text

パーマリンクを設定 WP GraphQLΛActiveʹ͢ΔϘλϯΛԡ͢ • /posts/%postname%/ • こだわりがなければslug （postname）がラク https://faustjs.org/docs/next/reference/hooks/usePost

Slide 35

Slide 35 text

Vercel ʹ Shifter Headless ͷ৘ใΛઃఆ͠Α͏ Vercel

Slide 36

Slide 36 text

環境変数を追加する Settings -> Environment Variables • NEXT_PUBLIC_WORDPRESS_URL:   ShifterのURL • WP_HEADLESS_SECRET:   メモした文字列

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

ͳʹ͸ͱ΋͋Ε npm install

Slide 39

Slide 39 text

.envを編集 ✴このまま push すると.env も push されてしまうので   気になる場合は先にリモートから .env を消しておく Shifter Headless のサイトURL Secret Key

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

リポジトリに変更をプッシュするスキーマを変更したのでリポジトリにPUSHして   Vercelに反映させる

Slide 43

Slide 43 text

͢Δͱ…

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

デプロイでコケる Vercelのデプロイ失敗 • toro_unitさんのリポジトリではBookというカスタム投稿タイプを使用 • Shifter上にはBookというカスタム投稿タイプがないのでスキーマにも存在しない • コードには存在するので、エラーが出る • そうだ、カスタム投稿を作ろう

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

カスタム投稿タイプを設定しよう toro_unitさんのリポジトリを使う場合 • mu-pluginsフォルダにカスタム投稿を設定する記述あり • Shifter Headlessはmu-pluginsに直接ファイルを入れられない   （FTPやSSH接続できない） • Code Snippetsプラグインを使って同内容の記述を追加する • CPT UIやAtlas Content Modelerでも登録可

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

スニペットを登録する mu-plugins/post-type.phpの内容をコピペ • 内容はそのままでOK • コピペできたら   Save Changes and Activate   ボタンで保存＆有効化

Slide 52

Slide 52 text

カスタム投稿ができた！

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

リポジトリに変更をプッシュする（再）スキーマを変更したのでリポジトリにPUSHして   Vercelに反映させる

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

࠷ޙʹ

Slide 63

Slide 63 text

まとめ • 記事にそってぽちぽちするだけで味付け自由なヘッドレス WordPress サイトを作れる！ • すべて無料で試せる！ • カスタム投稿タイプ設定に注意   （※阿部さんの記事執筆後に加わったもので、記事には記載がありません） • necco 阿部さん、HAMWORKS Toro_Unitさん、   ありがとう！！

Slide 64

Slide 64 text

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