Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
necco 阿部さんの記事を見て Shifter Headless + Faust.js + Vercel したらかんたんに実装できちゃった話
Search
佐藤あゆみ
December 10, 2021
Technology
0
1.8k
necco 阿部さんの記事を見て Shifter Headless + Faust.js + Vercel したらかんたんに実装できちゃった話
2021/12/10 Shifter オンラインミートアップ!
https://eventregist.com/e/uULbnS740mav
佐藤あゆみ
December 10, 2021
Tweet
Share
More Decks by 佐藤あゆみ
See All by 佐藤あゆみ
使えばわかる!Jamstackの前に microCMS × PHP から始めてみる という選択肢
trickstar13
1
2.2k
おきらく!みんなのWeb高速化入門
trickstar13
0
240
Other Decks in Technology
See All in Technology
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
270
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
簡単に始めるSnowflakeの機械学習
nayuts
1
190
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Producing Creativity
orderedlist
PRO
340
39k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Music & Morning Musume
bryan
43
5.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Code Reviewing Like a Champion
maltzj
517
39k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Transcript
Pentaprogram 佐藤あゆみ necco 阿部さんの記事を見て Shifter Headless + Faust.js + Vercel
したら かんたんに実装できちゃった話 [12/10 開催] Shifter オンラインミートアップ!
͜Ε·Ͱͷ͋Β͢͡
WordPress運用の悩み • WP本体、プラグイン、サーバのアップデート対応がつらい • もたもたしてると、セキュリティちょっと心配 • きちんとしたテーマを作るのがたいへん (ブロックエディタ?FSE?) •
ちょっと重いかも…
ヘッドレス対応で解消できる(かも) • WP本体、プラグイン、サーバのアップデート対応がつらい • もたもたしてると、セキュリティちょっと心配 ✓WP本体と公開サイトを分離して管理できる • テーマを作るのがたいへん ✓公開サイトは好きな言語を使って自由に色付け •
ちょっと重いかも… ✓公開サイトは静的ページにできるほか、やりたい放題
いっぽう、残る問題も… • WP本体、プラグイン、サーバのアップデート対応がつらい • ヘッドレス+Jamstack構成にすると プレビューを実装するのが難しい
Shifter Headless で解消できる! • 本体、プラグイン、サーバのアップデート対応がつらい ✓マネージドホスティングなので、 WordPress側はShifterが対応してアップデートしてくれる • ヘッドレス+Jamstackにすると
プレビューを実装するのが難しい https://www.getshifter.io/
Faust.js で解消できる! • 本体、プラグイン、サーバのアップデート対応がつらい ✓マネージドホスティングなので、 WordPress側はShifterが対応して適用してくれる • ヘッドレス+Jamstackにすると
プレビューを実装するのが難しい ✓Headless WordPress用フレームワーク Faust.jsが データをよしなに取り回してくれるので、 WordPress画面から簡単にプレビューできる https://faustjs.org/
Faust.js φχϞ ϫΧϥφΠ… Ͱ…
ブログ記事があったー!! しかもすぐ試せるリポジトリもあったー! • necco 阿部さん執筆のブログ記事 • HAMWORKS Toro_Unitさんの Faust.js初期設定済リポジトリ
• 圧倒的感謝 • Shifter Headlessを 組み合わせてみよう! https://necco.co/note/6740
この状態がゴール 7日後に自動的に消滅する予定(お試し版なので) https://faustjs-demo.vercel.app/
こんな素敵なレイアウトも スタンダードなWordPressでは難しい表現もできる
Shifter Headless Ͱ WordPressαΠτΛ࡞Ζ͏ Shifter
None
None
None
None
後日でOK
ϩʔΧϧʹϦϙδτϦΛΫϩʔϯ͠Α͏ Local & Remote
ローカルにtoro_unitさんのリポジトリをクローン git clone
[email protected]
:torounit/faustjs-app.git https://github.com/torounit/faustjs-app _
リモートに 新規リポジトリを作成 •GitHub •GitLab •Bitbucket Vercelと連携できるならなんでもOK
リモートリポジトリにプッシュ cd faustjs-app git remote set-url origin https://github.com/(自分のアカウント名)/faustjs-demo.git git branch
-M main git push -u origin main
VercelΛॳظηοτΞοϓ͠Α͏ Vercel
新しいプロジェクトを作成する
リポジトリをインポートする
とりあえずデプロイボタンを押しておく
公開サイトURL
None
Shifter Headless Λઃఆ͠Α͏ Shifter
WordPress 管理画面にログインする
Headless by WP Engineプラグインを有効化する
Headless設定① • Front-end site URLに 公開サイト(Vercel)のURLを 設定する •
Secret Keyをメモする
Headless設定② WP GraphQLΛActiveʹ͢ΔϘλϯΛԡ͢ • WP GraphQLをActiveにする
GraphQL設定 WP GraphQLΛActiveʹ͢ΔϘλϯΛԡ͢ • Public Introspectionを 有効にする
パーマリンクを設定 WP GraphQLΛActiveʹ͢ΔϘλϯΛԡ͢ • /posts/%postname%/ • こだわりがなければslug (postname)がラク https://faustjs.org/docs/next/reference/hooks/usePost
Vercel ʹ Shifter Headless ͷใΛઃఆ͠Α͏ Vercel
環境変数を追加する Settings -> Environment Variables • NEXT_PUBLIC_WORDPRESS_URL: ShifterのURL •
WP_HEADLESS_SECRET: メモした文字列
ϩʔΧϧڥΛηοτΞοϓ͠Α͏ Local
ͳʹͱ͋Ε npm install
.envを編集 ✴このまま push すると.env も push されてしまうので 気になる場合は先にリモートから .env
を消しておく Shifter Headless のサイトURL Secret Key
Shifterの情報をローカルのスキーマに反映させる npm run generate
ローカル環境を立ち上げてみる npm run dev
リポジトリに変更をプッシュする スキーマを変更したのでリポジトリにPUSHして Vercelに反映させる
͢Δͱ…
デプロイでコケる Vercelのデプロイ失敗
デプロイでコケる Vercelのデプロイ失敗 • toro_unitさんのリポジトリで はBookというカスタム投稿タイ プを使用 • Shifter上にはBookというカス タム投稿タイプがないのでス キーマにも存在しない
• コードには存在するので、エ ラーが出る • そうだ、カスタム投稿を作ろう
ΧελϜߘλΠϓΛઃఆ͠Α͏ Shifter
カスタム投稿タイプを設定しよう toro_unitさんのリポジトリを使う場合 • mu-pluginsフォルダにカスタム投稿を設定する記述あり • Shifter Headlessはmu-pluginsに直接ファイルを入れられない (FTPやSSH接続できない) •
Code Snippetsプラグインを使って同内容の記述を追加する • CPT UIやAtlas Content Modelerでも登録可
https://github.com/torounit/faustjs-app/blob/main/mu-plugins/post-type.php
Code Snippetsプラグインを有効化する
新しいスニペットを作成する
スニペットを登録する mu-plugins/post-type.phpの内容をコピペ • 内容はそのままでOK • コピペできたら Save Changes and
Activate ボタンで保存&有効化
カスタム投稿ができた!
ΧελϜߘλΠϓΛөͤ͞Α͏ Local
Shifterの情報をローカルのスキーマに反映させる(再) npm run generate
リポジトリに変更をプッシュする(再) スキーマを変更したのでリポジトリにPUSHして Vercelに反映させる
None
ߘΛϓϨϏϡʔͯ͠ΈΑ͏ Shifter
None
None
None
None
࠷ޙʹ
まとめ • 記事にそってぽちぽちするだけで味付け自由な ヘッドレス WordPress サイトを作れる! • すべて無料で試せる! • カスタム投稿タイプ設定に注意
(※阿部さんの記事執筆後に加わったもので、記 事には記載がありません) • necco 阿部さん、HAMWORKS Toro_Unitさん、 ありがとう!!
Pentaprogram 佐藤あゆみ ありがとうございました "If you put your mind to it,
you can accomplish anything." - Back to the Future