No content

About Me 株式会社ゼンアーキテクツ https://k-miyake.github.io/blog/

このセッションについて SPA や Jam Stack などの⼿法を⽤いたフロントエンド開発はもはや Web アプリケーションを構築していく上でのメインストリー ムになりつつあります。しかし、Azure を使った Web 開発の世界ではこれらがまだ主流になっているとは⾔えない状況です。こ のセッションは、最新のフロントエンド開発⼿法による Web アプリケーションを Azure を使って構築するためのベストプラクティ スを学ぶことができます。セッション中で紹介するサンプルやデモでは、 Vue.js, TypeScript, VSCode を使って開発し、 Azure DevOps や App Service を使ってデプロイする⽅法を紹介します。 フロントエンド開発 ベストプラクティス on Azure

フロントエンドのアーキテクチャ

Azure へのデプロイ⽅法もさまざま Blob storage SPA アプリ Azure CDN Azure App Service （for Linux） Azure Repos (Azure DevOps)

SPA（Single Page Application）

SPA - Single Page Application クライアント（SPA） ブラウザ ナビゲーションなどの共通 コンポーネント 現在表⽰されているページコン ポーネント 別のアクションで表⽰されるコン ポーネント JavaScript API

SPA の特性

Vue.js + TypeScript import Vue from "vue"; import axios, { AxiosResponse } from "axios"; export default Vue.extend({ data() { return { apiPrefix: "{YOUR‐PREFIX}" }; }, methods: { async invokeTranslator(text: string): Promise<TranslatorResult> { const res: AxiosResponse = await axios.post( "https://" + this.apiPrefix + "‐vue.azurewebsites.net/api/translate", { target: text } ); return res.data; } } });

SPA on Azure – Vue.js Blob storage SPA アプリ Azure CDN フレームワークを使って SPAアプリを構築 Static Website 機能を有効化して Webサイトをホストする 規模に応じてCDN 経由で配信 https://xxx.xxx.web.core.windows.net/

Demo: SPA

SSR（Server-Side Rendering）

SSR - Server-Side Rendering Client（ブラウザ） Server（Node.js） API Client と同⼀のコンポーネントで HTMLを構築しページを送信する 画⾯遷移などのタイミングでは、 サーバーにページ取得を要求する このセッションでは 「SSR」 を 「SPA + SSR」 の概念として表現します

SSR の特性 Vue SSR ガイド https://nextjs.org/features/server-side-rendering https://nuxtjs.org/guide#server-rendered-universal-ssr- このセッションでは 「SSR」 を 「SPA + SSR」 の概念として表現します

SSR on Azure – Nuxt.js Kudu Oryx Azure App Service （for Linux） リバース プロキシ Azure Repos (Azure DevOps) Nuxt.js はユニバーサル SSR モードで構築 ブランチのコミットをトリガーに ビルド & デプロイが実⾏される フレームワークに合わせて ビルドスクリプトを⽣成 このセッションでは 「SSR」 を 「SPA + SSR」 の概念として表現します

Azure App Service を利⽤する利点

Demo: SSR

JAMstack - JavaScript, APIs, Markup

JAMstack J A M jamstack.org 静的サイト ジェネレーター API or Headless CMS Repository 静的サイト ホスティング （+ CDN） HTML JS CSS .md J A M

JAMstack の特性

静的サイトジェネレーター Jekyll Hugo Next.js Nuxt.js Gatsby

Headless CMS { "fields": { "title": { "en‐US": "Hello, World!" }, "body": { "en‐US": "Bacon is healthy!" } }, "sys": { "id": "5KsDBWseXY6QegucYAoacS", "type": "Entry", "version": 1, "space": { "sys": { "type": "Link", "linkType": "Space", "id": "yadj1kx9rmg0" } }, "contentType": { "sys": { "type": "Link", "linkType": "ContentType", "id": "hfM9RCJIk0wIm06WkEOQY" } }, "createdAt": "2016‐12‐20T10:43:35.772Z", "updatedAt": "2016‐12‐20T10:43:35.772Z", "revision": 1 } }

Gatsby + Contentful による CMS の運⽤ Gatsby Contentful GitHub Actions 静的サイト ジェネレーター Headless CMS Repository ホスティング

Demo: JAMstack

BFF（Backends For Frontends）

BFF 各クライアントは 汎⽤的な API 群 を実⾏する デスクトップクライアントに最 適化されたAPI群を使う モバイルクライアントに 最適化されたAPI群を 使う https://samnewman.io/patterns/architectural/bff/

BFF の特性 フロント エンド⽤バックエンドのパターン - Cloud Design Patterns

Serverless BFF BFF on Serverless Develop BFF APIs @nestjs/azure-func-http

GitHub Actions の YAML例 (NestJS + Azure Functions) jobs: build‐and‐deploy: runs‐on: windows‐latest steps: （途中省略） ‐ name: "Run npm" shell: pwsh run: | pushd .¥bff npm install npm run build ‐‐if‐present popd ‐ name: "Run Azure Functions Action" uses: Azure/functions‐action@v1 id: fa with: app‐name: bff‐demo package: '.¥bff'

Demo: BFF

CI/CD（継続的インテグレーション／継続的デリバリー） いつ導⼊する？ Visual Studio Code Azure Extensions App Service の Deployment Center 本格的な CI/CD サービスの利⽤ Azure Pipelines GitHub Actions

参考: フロントエンド on Azure その他の考慮事項 Data Store Network

まとめ

ご清聴ありがとうございました！