2020年6月21日に行われたチャリティカンファレンス沖縄で使用したスライドです。
チャリティーカンファレンス沖縄株式会社 菅家大地サイトをの構成にリニューアルした話
View Slide
株式会社 フロントエンドエンジニア菅家 大地元デザイナーのフロントエンドエンジニア福島→宮城→東京→宮城仙台フロントエンド
年に ヶ月ほど沖縄に住んでいました
ファイルを事前にレンダリングし、CDNから直接配信することで、Webサーバーの管理や運用の必要性を排除し、高速で安全なサイトやアプリを配信します。 https://jamstack.org/JavaScriptAPIsMarkup
● リニューアルしたサイトの概要● 使っている技術要素の紹介● からのデータ移行● で作ってみてどうだったか● 苦労したポイント今日話すこと
●● ニュースだけページくらい● ニュース以外の更新は非エンジニアでは触れない● を検討● ニュース以外も を導入したい● 社内で の実績がありを使いたい
各技術要素の紹介
● サーバーサイドレンダリング（ ）● シングルページアプリケーション（ ）● 静的ファイルの生成Vue.jsのフレームワーク。さまざまなターゲットをサポート。で からデータ取得すれば、として静的に生成することが可能 のライフサイクル参照
● 静的 生成していてもページ遷移時に にアクセスする→ リリースの で の機能が追加● 以下のようなケースがある場合は気になる？○ のデータ転送量を減らしたい○ セキュリティ面を考慮して隠蔽したい● の遷移は使わずに タグでリンクをするなども可能余談
● テンプレートを持たずに だけ提供するヘッドレス 日本製● インストールなどの手間が不要。アカウント作成してすぐ始められる。● 国産 を使用していてコンテンツ配信が高速。● 機能開発や改善が爆速。参照 https://microcms.io/
● 管理画面の がわかりやすくて使いやすい● 必要な だけを用意できるので更新部分がわかりやすいデフォルトで色々付いてるとここは触らないでみたいなことが● 自動でアップデートされるのは良いが、が変わったりする場合があるのは良し悪し● サポート対応が神使用感 個人的感想
● リッチエディタの使い勝手が少し悪い印象がある● 記事 コンテンツ が増えると管理画面の使い勝手が悪い● 管理画面内での検索などが不十分な印象● 画面プレビュー機能を使うには一手間必要デメリットはありますが、意見を言うと爆速で改善してくれます。総合的にはとても満足しています。使用感 個人的感想
● 静的コンテンツのホスティングサービス● コンテンツは の を使って配信される● のサービスと連携し、 や があったら がビルドやデプロイをしてくれる。とにかく簡単● を使った との連携も簡単● という言葉を提唱したのは の創業者
WordPressからのデータ移行
● 既存 の約 件の記事を移行する必要があった● インポート機能があるが使わなかった○ インポート用に整形する手間 記事がゼロの時しか使えない● で記事を登録することが可能なのでこちらを採用○ のエクスポートした データを整形して○ 用に整形 画像のパス変換● 画像は全選択→ドラッグ ドロップで 分くらいでいけたの を使用して移行
● の元記事のデータが でそのまま のリッチエディタに登録するとうまくいかない● 旧記事 用のフィールドを用意● リッチエディタをチェックボックスで切り替え可能に● 何かあれば 側で対応できるように、移行記事というチェックボックスを用意エディタの互換性の問題
余談：最終的にリッチエディタを使わずに繰り返しフィールドを使用
JAMstackで作ってみてどうだったか
● セキュリティやパフォーマンス面でのメリットは大きい● 各要素が疎結合なので、一部だけ置き換えるなどもしやすい● 開発体験が圧倒的に良かった→ や などの フレームワークを サイト制作で使うという選択肢が持てる体制やコスパの問題はあると思いますがメリットや良かったこと
● 主にサイトの運用面で課題が出てくると感じた● 記事が多いほどビルドにかかる時間が長くなる● そのため公開時間がシビアなものには使いにくい● 基本的に一部だけビルド・配信はできない● 単体ではプレビューできない ビルドしないと確認できない○ では のパラメータをつけると下書きを取得してくれる機能がある 多少の開発が必要に感じたデメリット
現時点での対策開発環境だけSPAにして、ビルドなしのプレビュー環境として使用しています。Netlifyの環境変数を使用することでワンソースで実現可能。
苦労ポイントなど
● 動的ルーティング のような の は自動で生成してくれないので指定する必要がある● に のデータを取得して配列で渡す処理を書く例：● ニュース詳細・カテゴリ・ページング・期間・期間 カテゴリとやっていかないといけないので地味に大変静的 生成時の動的ルーティング
HTML生成失敗時にエラー終了せずにデプロイされる何食わぬ顔で通常終了デプロイされ になるので、イベントをキャッチして、明示的にエラーを返す処理を入れる
/hooks/generate.js/nuxt.config.js
● データ移行をしたら総ページ数が 弱になった● 静的 生成時に に負荷がかかりエラーに● ページ生成時の ページ毎のインターバル時間を設定でき、 秒に設定したら のエラーが起きにくくなった● が、その分ビルドにかかる時間は長くなり、 はビルドの が 分越えると落ちるのでそこで落ちた● 秒にしてなんとか 分くらいに落ち着く エラーはたまに発生ビルド時間と 負荷との戦い
● という仕組みを使い、 生成時にあらかじめデータを渡す設定をすることができる○ ビルド時間が 分くらい 約半分 になりエラーも起きなくなった○ ドキュメントに書いてあるのでちゃんと読みましょう● 参考： ページ弱のトータルデプロイ時間 分 〜 分○ ビルド時間：約 〜 分 の 分の対象はこっち○ の 画像圧縮など 約 分ビルド時間と 負荷との戦い
● でコンテンツが追加・更新されたら に を送りビルドをトリガーするような設定にしていた● 月のビルド時間に制限がある プランによるが今回は 時間● で更新できる部分がかなり増えたので、更新の度に を送ったら、それなりにビルド時間を消費することが予想された● ニュース以外のコンテンツは を送らないことにして、を送るだけのコンテンツを用意したビルド時間と のビルド時間制限との戦い
● はユーザーにも開発者にもメリットがある運用面などの課題はあるが解消する技術や手法は今後出てくると思う● モダンなフロントエンド技術や開発手法が使える場面が増えている● おすすめです！まとめ
ご静聴ありがとうございました
kandai
ymty
niryuu
startree
oracle4engineer
takashi1029
shimap_sampo
bcantrill
ryohatanmonolog
salaboy
kawaguti
.png){kind=avatar}
jisungbin
takahana
iamctodd
dougneiner
shlominoach
garrettdimon
sachag
dotmariusz
edds
carmenintech
gr2m
csswizardry
hatefulcrawdad
davidbonilla