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
WordPressサイトをNuxt.js × microCMSのJAMstack構成にリニュー...
Search
Daichi
June 21, 2020
Technology
1
1.5k
WordPressサイトをNuxt.js × microCMSのJAMstack構成にリニューアルした話
2020年6月21日に行われたチャリティカンファレンス沖縄で使用したスライドです。
Daichi
June 21, 2020
Tweet
Share
More Decks by Daichi
See All by Daichi
◯◯◯◯◯◯◯◯◯◯を使って簡単なゲームを作ってみた
kandai
0
4
Jamstackの実案件で躓いたことや工夫したこと
kandai
0
1.4k
OpenAPIを使ってAPIドキュメントとモックサーバーを良い感じにした話
kandai
3
3.3k
ブラウザの新しいAPIで遊んでみる
kandai
1
1.3k
Gridsome × Headless CMSでJAMstackなWebサイトを作る
kandai
1
1k
Media Session APIを使ってPWAの音楽プレイヤーを作る
kandai
0
480
CSS組版で技術書を作った話
kandai
0
360
Web技術だけで作るQRコードリーダー
kandai
2
2k
Nuxt.jsとFirebaseでWebアプリを作った話 2nd
kandai
1
700
Other Decks in Technology
See All in Technology
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
12k
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
310
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
組織成長を加速させるオンボーディングの取り組み
sudoakiy
2
220
Storybook との上手な向き合い方を考える
re_taro
2
300
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
200
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
The Rise of LLMOps
asei
9
1.7k
心が動くエンジニアリング ── 私が夢中になる理由
16bitidol
0
100
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.5k
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
700
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Ruby is Unlike a Banana
tanoku
97
11k
Music & Morning Musume
bryan
46
6.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Unsuck your backbone
ammeep
668
57k
Why Our Code Smells
bkeepers
PRO
334
57k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Designing the Hi-DPI Web
ddemaree
280
34k
GitHub's CSS Performance
jonrohan
1030
460k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Transcript
チャリティーカンファレンス沖縄 株式会社 菅家大地 サイトを の 構成にリニューアルした話
株式会社 フロントエンドエンジニア 菅家 大地 元デザイナーのフロントエンドエンジニア 福島→宮城→東京→宮城 仙台フロントエンド
年に ヶ月ほど 沖縄に住んでいました
None
None
ファイルを事前にレンダリングし、CDNから直接配信するこ とで、Webサーバーの管理や運用の必要性を排除し、高速 で安全なサイトやアプリを配信します。 https://jamstack.org/ JavaScript APIs Markup
• リニューアルしたサイトの概要 • 使っている技術要素の紹介 • からのデータ移行 • で作ってみてどうだったか • 苦労したポイント
今日話すこと
None
None
• • ニュースだけ ページくらい • ニュース以外の更新は 非エンジニアでは触れない • を検討 •
ニュース以外も を 導入したい • 社内で の実績があり を使いたい
None
各技術要素の紹介
• サーバーサイドレンダリング( ) • シングルページアプリケーション( ) • 静的ファイルの生成 Vue.jsのフレームワーク。 さまざまなターゲットをサポート。
で からデータ取得すれば、 として静的に生成することが可能 のライフサイクル 参照
• 静的 生成していてもページ遷移時に にアクセスする → リリースの で の機能が追加 • 以下のようなケースがある場合は気になる?
◦ のデータ転送量を減らしたい ◦ セキュリティ面を考慮して隠蔽したい • の遷移は使わずに タグでリンクをするなども可能 余談
• テンプレートを持たずに だけ提供 するヘッドレス 日本製 • インストールなどの手間が不要。 アカウント作成してすぐ始められる。 • 国産
を使用していて コンテンツ配信が高速。 • 機能開発や改善が爆速。 参照 https://microcms.io/
• 管理画面の がわかりやすくて使いやすい • 必要な だけを用意できるので更新部分がわかりやすい デフォルトで色々付いてるとここは触らないでみたいなことが • 自動でアップデートされるのは良いが、 が変わったりする場合があるのは良し悪し
• サポート対応が神 使用感 個人的感想
• リッチエディタの使い勝手が少し悪い印象がある • 記事 コンテンツ が増えると管理画面の使い勝手が悪い • 管理画面内での検索などが不十分な印象 • 画面プレビュー機能を使うには一手間必要
デメリットはありますが、意見を言うと爆速で改善してくれます。総合的に はとても満足しています。 使用感 個人的感想
None
• 静的コンテンツのホスティングサービス • コンテンツは の を使って配信される • のサービスと連携し、 や があったら
がビルドや デプロイをしてくれる。とにかく簡単 • を使った との連携も簡単 • という言葉を提唱したのは の創業者
WordPressからのデータ移行
• 既存 の約 件の記事を移行する必要があった • インポート機能があるが使わなかった ◦ インポート用に整形する手間 記事がゼロの時しか使えない •
で記事を登録することが可能なのでこちらを採用 ◦ のエクスポートした データを整形して ◦ 用に整形 画像のパス変換 • 画像は全選択→ドラッグ ドロップで 分くらいでいけた の を使用して移行
• の元記事のデータが でそ のまま のリッチエディタに登録す るとうまくいかない • 旧記事 用のフィールドを用意 •
リッチエディタをチェックボックスで 切り替え可能に • 何かあれば 側で対応できるように、移 行記事というチェックボックスを用意 エディタの互換性の問題
余談:最終的にリッチエディタを使わずに繰り返しフィールドを使用
JAMstackで作ってみてどうだったか
• セキュリティやパフォーマンス面でのメリットは大きい • 各要素が疎結合なので、一部だけ置き換えるなどもしやすい • 開発体験が圧倒的に良かった → や などの フレームワークを
サイト制作で使うという 選択肢が持てる 体制やコスパの問題はあると思いますが メリットや良かったこと
• 主にサイトの運用面で課題が出てくると感じた • 記事が多いほどビルドにかかる時間が長くなる • そのため公開時間がシビアなものには使いにくい • 基本的に一部だけビルド・配信はできない • 単体ではプレビューできない
ビルドしないと確認できない ◦ では のパラメータをつけると下書きを取得してく れる機能がある 多少の開発が必要 に感じたデメリット
現時点での対策 開発環境だけSPAにし て、ビルドなしのプレ ビュー環境として使用し ています。 Netlifyの環境変数を使 用することでワンソース で実現可能。
苦労ポイントなど
• 動的ルーティング のような の は 自動で生成してくれないので指定する必要がある • に のデータを取得して配列で渡す処理を書く 例:
• ニュース詳細・カテゴリ・ページング・期間・期間 カテゴリとやっていか ないといけないので地味に大変 静的 生成時の動的ルーティング
HTML生成失敗時に エラー終了せずに デプロイされる 何食わぬ顔で通常終了デプロイされ に なるので、イベントをキャッチして、明示的に エラーを返す処理を入れる
/hooks/generate.js /nuxt.config.js
• データ移行をしたら総ページ数が 弱になった • 静的 生成時に に負荷がかかりエラーに • ページ生成時の ページ毎のインターバル時間を設定でき、
秒に設定 したら のエラーが起きにくくなった • が、その分ビルドにかかる時間は長くなり、 はビルドの が 分 越えると落ちるのでそこで落ちた • 秒にしてなんとか 分くらいに落ち着く エラーはたまに発生 ビルド時間と 負荷との戦い
• という仕組みを使い、 生成時にあらかじめデータを渡す設 定をすることができる ◦ ビルド時間が 分くらい 約半分 になりエラーも起きなくなった ◦
ドキュメントに書いてあるのでちゃんと読みましょう • 参考: ページ弱のトータルデプロイ時間 分 〜 分 ◦ ビルド時間:約 〜 分 の 分の対象はこっち ◦ の 画像圧縮など 約 分 ビルド時間と 負荷との戦い
• でコンテンツが追加・更新されたら に を送りビ ルドをトリガーするような設定にしていた • 月のビルド時間に制限がある プランによるが今回は 時間 •
で更新できる部分がかなり増えたので、更新の度に を 送ったら、それなりにビルド時間を消費することが予想された • ニュース以外のコンテンツは を送らないことにして、 を送るだけのコンテンツを用意した ビルド時間と のビルド時間制限との戦い
None
• はユーザーにも開発者にもメリットがある 運用面などの課題はあるが解消する技術や手法は今後出てくると思う • モダンなフロントエンド技術や開発手法が使える場面が増え ている • おすすめです! まとめ
ご静聴ありがとうございました