v-tokyo #13 6月16日

ViteでStatic Site Generatorの事例について

Transcript

1. Vite でSSG の本番運用をやってみた 事例：特定保健指導サービスの紹介ページ JAMES ROBERTS 　 v-tokyo #13 2021-06-16
2. James Roberts robjamdev Frontend Engineer @MedPeer Vue, Typescript, Cloud Architecture が大好き 自炊も大好き🌮
3. 特定保健指導サービスは 食事・運動等の生活の習慣を見直して、生活習慣病の発症リスクを低減させる国の制度 専門職（管理栄養士、保健師）と共に目標を立て、数カ月の支援を受ける。
4. 紹介ページ(before) アナログなオペレーション… ユーザー（利用店舗）より電話で変更依頼 弊社スタッフは手動編集 電話で変更確認 全て、自動化！ 紹介ページは外部のWeb ページ作成サービスを利用 特定保険指導の予約可能の店舗(350+) 情報を表示
5. 紹介ページ Architecture (after) ユーザー（利用店舗）が店舗の情報を自分で編集 紹介ページを更新する API Server がLambda(Vite のSSG) を実行する Lambda の実行の内容 html をrender する script を削除する Client Side Hydration のfragment 削除する 生成した結果をS3 に保存
6. なぜVite? prerendering(SSR) が必要 本体のproject はNuxtJs なのでに移行しやすい Vite で検証できるプロジェクト Vite は早いから
7. Vite のSSR `main.js` にLambda のイベントデータを渡す NodeJs の環境でrequire のimport が必須 `provide/inject` で `App.vue` に参照できるようにする Vite dev の場合はES6 のimport で良い https://Vitejs.dev/guide/ssr.html 開発時点 v1.0.0-rc13 ` ` export const createApp = (context) => { // main.js if (isSSR) { const app = createSSRApp(App); app.provide('subdomain', context.subdomain); // ... return app; } else { const app = createClientApp(App); app.provide('subdomain', context.subdomain); 　 return app; } } if(!isSSR) { createApp(context).mount('#app'); }
8. Vite のSSR からSSG Lambda の入り口 先の `main.js` の createApp SSR のコンテンツ 正規表現で必要ないものを削除する 開発時点 v1.0.0-rc13 ` ` exports.handler = async (event) => { const renderer = require('@vue/server-renderer'); const { createApp } = require('ssr/_assets/index.js'); const app = createApp(event); const content = await renderer.renderToString(app); content.replace(/<!--[\[-\]]-->/g, ''); // js script を削除する // S3 にupload }
9. まとめ 顧客と弊社スタッフの高評価 PaaS で最適なソリューションはよかった Vite がいいぞ！（V2 だともっと簡単） Vite でserverless はいい感じ！
10. Credits スライドはslidev で作りました🎉 スライド: https://speakerdeck.com/robjam/v-tokyo-6yue-16ri エンジニア募集しています! ありがとうございます