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.4k
WordPressサイトをNuxt.js × microCMSのJAMstack構成にリニューアルした話
2020年6月21日に行われたチャリティカンファレンス沖縄で使用したスライドです。
Daichi
June 21, 2020
Tweet
Share
More Decks by Daichi
See All by Daichi
Jamstackの実案件で躓いたことや工夫したこと
kandai
0
1.3k
OpenAPIを使ってAPIドキュメントとモックサーバーを良い感じにした話
kandai
3
3.2k
ブラウザの新しいAPIで遊んでみる
kandai
1
1.3k
Gridsome × Headless CMSでJAMstackなWebサイトを作る
kandai
1
920
Media Session APIを使ってPWAの音楽プレイヤーを作る
kandai
0
420
CSS組版で技術書を作った話
kandai
0
330
Web技術だけで作るQRコードリーダー
kandai
2
1.9k
Nuxt.jsとFirebaseでWebアプリを作った話 2nd
kandai
1
640
Nuxt.jsのPWAモジュールは何をやっているのか
kandai
8
3.9k
Other Decks in Technology
See All in Technology
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8.2k
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
スレットハンティングについて知っておきたいこと
hacket
0
130
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
160
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
29
6.1k
BBQ
matthewcrist
82
9k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Navigating Team Friction
lara
181
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Making Projects Easy
brettharned
111
5.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Facilitating Awesome Meetings
lara
46
5.8k
The Language of Interfaces
destraynor
151
23k
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
• はユーザーにも開発者にもメリットがある 運用面などの課題はあるが解消する技術や手法は今後出てくると思う • モダンなフロントエンド技術や開発手法が使える場面が増え ている • おすすめです! まとめ
ご静聴ありがとうございました