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.3k
OpenAPIを使ってAPIドキュメントとモックサーバーを良い感じにした話
kandai
3
3.3k
ブラウザの新しいAPIで遊んでみる
kandai
1
1.3k
Gridsome × Headless CMSでJAMstackなWebサイトを作る
kandai
1
990
Media Session APIを使ってPWAの音楽プレイヤーを作る
kandai
0
460
CSS組版で技術書を作った話
kandai
0
360
Web技術だけで作るQRコードリーダー
kandai
2
2k
Nuxt.jsとFirebaseでWebアプリを作った話 2nd
kandai
1
690
Other Decks in Technology
See All in Technology
Gradle: The Build System That Loves To Hate You
aurimas
2
140
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
240
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
300
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
460
初心者に Vue.js を 教えるには
tsukuha
5
390
使えそうで使われないCloudHSM
maikamibayashi
0
170
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
フルカイテン株式会社 採用資料
fullkaiten
0
36k
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
170
Featured
See All Featured
Building Applications with DynamoDB
mza
90
6.1k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Testing 201, or: Great Expectations
jmmastey
38
7k
GraphQLとの向き合い方2022年版
quramy
43
13k
BBQ
matthewcrist
85
9.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
A Tale of Four Properties
chriscoyier
156
23k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Visualization
eitanlees
144
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
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
• はユーザーにも開発者にもメリットがある 運用面などの課題はあるが解消する技術や手法は今後出てくると思う • モダンなフロントエンド技術や開発手法が使える場面が増え ている • おすすめです! まとめ
ご静聴ありがとうございました