Front-end web application development with Azure PaaS & Serverless, 2020 Update!

第27回 Tokyo Jazug Night （https://jazug.connpass.com/event/178501/） のセッション資料です。
Azure Static Web Apps の解説とデモを行いました。

1. Front-end web application development with Azure PaaS & Serverless, 2020 Update! 第27回 Tokyo Jazug Night Kazuyuki Miyake 1
2. About Me 三宅 和之 @kazuyukimiyake 株式会社ゼンアーキテクツ CTO Microsoft MVP ( for Microsoft Azure ) Vue.js-jp, typescript-jp 運営スタッフ PaaS がかりの部屋(Blog): https://k-miyake.github.io/blog/ 2
3. Agenda このセッションでとりあげるトピック Front-end Web アプリケーションの開発パターンあれこれ Azure Static Web Apps について Demo SPA SSG BFF（Option） 3
4. Front-end Web アプリケーションの 開発 SPA が主流だが、 SSG (JAMstack) も増えつつある サイトの特性や規模に応じてパターンを使い分ける 主なアーキテクチャパターン SPA: Single Page Application SSG: Static Site Generator (JAM Stack を含む) SSR: Server-Side Rendering BFF: Backends For Frontends（厳密にはバックエンドのパターン） 4
5. これまでの課題（Azure） Azure にスタティックサイトに適したホスティング環境がなかった SPA と SSG のデプロイ先に困っていた 5
6. Azure Static Web Apps NEW 主な特⻑ スタティックサイトに最適化されたホスティング GitHub Actions と統合された CI/CD Azure Functions によるサーバーレス API の統合 詳細 公式ドキュメント（⽇本語） de:code 2020 でも解説します （以降、 Static Web Apps は SWA と表記する場合があります） 6
7. ビルド & デプロイの仕組み GitHub Actions と統合された CI/CD 7
8. SPA - Single Page Application Web ページを遷移せずに必要な部分だけを切り替えて表⽰する技術や⼿法 8
9. SPA on Azure Static Web Apps Azure Static Web Apps で SPA のホスティングが ようやく 可能に︕ 9
10. Demo: SPA Vue.js Vue CLI 利⽤ TypeScript PR プレビュー環境 10
11. Tips 1. フォールバックの設定が必要になる場合がある（ routes.json ） Vue Router の解説 Azure Static Web Apps プレビューでのルート 2. GitHub Actions ワークフローのカスタマイズも可能 ビルドコマンドの変更 例: app_build_command: 'npm run generate' フロントエンド側の環境変数設定 ユニットテスト実⾏などのジョブ追加 11
12. 現状の主な制限事項 本セッション実施時点（2020.6.10）の制限事項 抜粋 パブリックプレビューのため SLA なし PR プレビュー環境は 1 つ PR が2つ以上あるとワークフローが失敗する Apex ドメイン は設定できない（Cloudflare 利⽤の回避策あり） その他は以下を参照 https://docs.microsoft.com/ja-jp/azure/static-web-apps/quotas 12
13. SSG - Static Site Generator 動的コンテンツを 事前にレンダリング し静的ファイルを⽣成する Git ベース: Markdown などでコンテンツを更新 API ベース: JAMstack（JavaScript, APIs, Markup）ともよばれる 13
14. SSG on Azure Static Web Apps GitHub Actions との統合により静的ファイル⽣成〜ホスティングが可能に 14
15. Demo: SSG Nuxt.js Nuxt/Content で記事作成 GitHub Actions ワークフローで変更を 反映して静的ファイル⽣成 15
16. JAMstack への対応状況（SWA） JAMstack（JavaScript, APIs, Markup） 主要シナリオ: Headless CMS の API を呼んでコンテンツを更新する Contentful WordPress API etc セッション実施時点（2020.6.10）では、Webhook 経由で GitHub Actions を実⾏した場合にデプロイできない問題がある・・ Issue あげてます https://github.com/Azure/static-web-apps/issues/38 16
17. BFF - Backends For Frontends (API) フロントエンド専⽤のバックエンド フロントエンドの都合に合わせた API 群を⽤意する 17
18. BFF on Azure Static Web Apps SWA のリポジトリに BFF (APIs) を共存させることが可能 Azure Functions (Node.js) で実装する 18
19. SSR(Server-Side Rendering) on Azure Azure Static Web Apps では未対応 App Service Web Apps (Linux) を使う: 参考ブログ 19
20. まとめ Front-end Web アプリケーション にはさまざまな開発パターンがある SPA, SSG(JAMstack), BFF, SSR Azure Static Web Apps が登場し、Front-end Web を実装しやすくなった スタティックサイトに最適化されたホスティング GitHub Actions と統合された CI/CD Azure Functions によるサーバーレス API の統合 20
21. fin. ご清聴ありがとうございました︕ 21