Pro Yearly is on sale from $80 to $50! »

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

Ff7f1f76468f46a1c5c84b9238a4b162?s=47 miyake
June 10, 2020

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 の解説とデモを行いました。

Ff7f1f76468f46a1c5c84b9238a4b162?s=128

miyake

June 10, 2020
Tweet

Transcript

  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