Slide 1

Slide 1 text

Front-end web application development with Azure PaaS & Serverless, 2020 Update! 第27回 Tokyo Jazug Night Kazuyuki Miyake 1

Slide 2

Slide 2 text

About Me 三宅 和之 @kazuyukimiyake 株式会社ゼンアーキテクツ CTO Microsoft MVP ( for Microsoft Azure ) Vue.js-jp, typescript-jp 運営スタッフ PaaS がかりの部屋(Blog): https://k-miyake.github.io/blog/ 2

Slide 3

Slide 3 text

Agenda このセッションでとりあげるトピック Front-end Web アプリケーションの開発パターンあれこれ Azure Static Web Apps について Demo SPA SSG BFF(Option) 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

これまでの課題(Azure) Azure にスタティックサイトに適したホスティング環境がなかった SPA と SSG のデプロイ先に困っていた 5

Slide 6

Slide 6 text

Azure Static Web Apps NEW 主な特⻑ スタティックサイトに最適化されたホスティング GitHub Actions と統合された CI/CD Azure Functions によるサーバーレス API の統合 詳細 公式ドキュメント(⽇本語) de:code 2020 でも解説します (以降、 Static Web Apps は SWA と表記する場合があります) 6

Slide 7

Slide 7 text

ビルド & デプロイの仕組み GitHub Actions と統合された CI/CD 7

Slide 8

Slide 8 text

SPA - Single Page Application Web ページを遷移せずに必要な部分だけを切り替えて表⽰する技術や⼿法 8

Slide 9

Slide 9 text

SPA on Azure Static Web Apps Azure Static Web Apps で SPA のホスティングが ようやく 可能に︕ 9

Slide 10

Slide 10 text

Demo: SPA Vue.js Vue CLI 利⽤ TypeScript PR プレビュー環境 10

Slide 11

Slide 11 text

Tips 1. フォールバックの設定が必要になる場合がある( routes.json ) Vue Router の解説 Azure Static Web Apps プレビューでのルート 2. GitHub Actions ワークフローのカスタマイズも可能 ビルドコマンドの変更 例: app_build_command: 'npm run generate' フロントエンド側の環境変数設定 ユニットテスト実⾏などのジョブ追加 11

Slide 12

Slide 12 text

現状の主な制限事項 本セッション実施時点(2020.6.10)の制限事項 抜粋 パブリックプレビューのため SLA なし PR プレビュー環境は 1 つ PR が2つ以上あるとワークフローが失敗する Apex ドメイン は設定できない(Cloudflare 利⽤の回避策あり) その他は以下を参照 https://docs.microsoft.com/ja-jp/azure/static-web-apps/quotas 12

Slide 13

Slide 13 text

SSG - Static Site Generator 動的コンテンツを 事前にレンダリング し静的ファイルを⽣成する Git ベース: Markdown などでコンテンツを更新 API ベース: JAMstack(JavaScript, APIs, Markup)ともよばれる 13

Slide 14

Slide 14 text

SSG on Azure Static Web Apps GitHub Actions との統合により静的ファイル⽣成〜ホスティングが可能に 14

Slide 15

Slide 15 text

Demo: SSG Nuxt.js Nuxt/Content で記事作成 GitHub Actions ワークフローで変更を 反映して静的ファイル⽣成 15

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

BFF - Backends For Frontends (API) フロントエンド専⽤のバックエンド フロントエンドの都合に合わせた API 群を⽤意する 17

Slide 18

Slide 18 text

BFF on Azure Static Web Apps SWA のリポジトリに BFF (APIs) を共存させることが可能 Azure Functions (Node.js) で実装する 18

Slide 19

Slide 19 text

SSR(Server-Side Rendering) on Azure Azure Static Web Apps では未対応 App Service Web Apps (Linux) を使う: 参考ブログ 19

Slide 20

Slide 20 text

まとめ Front-end Web アプリケーション にはさまざまな開発パターンがある SPA, SSG(JAMstack), BFF, SSR Azure Static Web Apps が登場し、Front-end Web を実装しやすくなった スタティックサイトに最適化されたホスティング GitHub Actions と統合された CI/CD Azure Functions によるサーバーレス API の統合 20

Slide 21

Slide 21 text

fin. ご清聴ありがとうございました︕ 21