フロントエンド開発ベストプラクティス on Azure / Best Practices for Front-End Web Development on Azure

In front-end web development, techniques such as SPA and Jam Stack are becoming mainstream for modern web applications. However, when it comes to web development on Azure, these are far from being common. In this session, you will learn best practices how to build front-end web applications on Azure. Through samples and demos introduced during the session, you will learn how to develop using Vue.js, TypeScript, VSCode and deploy using Azure DevOps or App Service.

Transcript

2. About Me 株式会社ゼンアーキテクツ https://k-miyake.github.io/blog/
3. このセッションについて SPA や Jam Stack などの⼿法を⽤いたフロントエンド開発はもはや Web アプリケーションを構築していく上でのメインストリー ムになりつつあります。しかし、Azure を使った Web 開発の世界ではこれらがまだ主流になっているとは⾔えない状況です。こ のセッションは、最新のフロントエンド開発⼿法による Web アプリケーションを Azure を使って構築するためのベストプラクティ スを学ぶことができます。セッション中で紹介するサンプルやデモでは、 Vue.js, TypeScript, VSCode を使って開発し、 Azure DevOps や App Service を使ってデプロイする⽅法を紹介します。 フロントエンド開発 ベストプラクティス on Azure
4. フロントエンドのアーキテクチャ
5. Azure へのデプロイ⽅法もさまざま Blob storage SPA アプリ Azure CDN Azure App Service （for Linux） Azure Repos (Azure DevOps)
6. SPA（Single Page Application）
7. SPA - Single Page Application クライアント（SPA） ブラウザ ナビゲーションなどの共通 コンポーネント 現在表⽰されているページコン ポーネント 別のアクションで表⽰されるコン ポーネント JavaScript API
8. SPA の特性
9. Vue.js + TypeScript <script lang="ts"> 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; } } });
10. SPA on Azure – Vue.js Blob storage SPA アプリ Azure CDN フレームワークを使って SPAアプリを構築 Static Website 機能を有効化して Webサイトをホストする 規模に応じてCDN 経由で配信 https://xxx.xxx.web.core.windows.net/
11. Demo: SPA
12. SSR（Server-Side Rendering）
13. SSR - Server-Side Rendering Client（ブラウザ） Server（Node.js） API Client と同⼀のコンポーネントで HTMLを構築しページを送信する 画⾯遷移などのタイミングでは、 サーバーにページ取得を要求する このセッションでは 「SSR」 を 「SPA + SSR」 の概念として表現します
14. SSR の特性 Vue SSR ガイド https://nextjs.org/features/server-side-rendering https://nuxtjs.org/guide#server-rendered-universal-ssr- このセッションでは 「SSR」 を 「SPA + SSR」 の概念として表現します
15. SSR on Azure – Nuxt.js Kudu Oryx Azure App Service （for Linux） リバース プロキシ Azure Repos (Azure DevOps) Nuxt.js はユニバーサル SSR モードで構築 ブランチのコミットをトリガーに ビルド & デプロイが実⾏される フレームワークに合わせて ビルドスクリプトを⽣成 このセッションでは 「SSR」 を 「SPA + SSR」 の概念として表現します
16. Azure App Service を利⽤する利点
17. Demo: SSR
18. JAMstack - JavaScript, APIs, Markup
19. JAMstack J A M jamstack.org 静的サイト ジェネレーター API or Headless CMS Repository 静的サイト ホスティング （+ CDN） HTML JS CSS .md J A M
20. JAMstack の特性
21. 静的サイトジェネレーター Jekyll Hugo Next.js Nuxt.js Gatsby
22. 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 } }
23. Gatsby + Contentful による CMS の運⽤ Gatsby Contentful GitHub Actions 静的サイト ジェネレーター Headless CMS Repository ホスティング
24. Demo: JAMstack
25. BFF（Backends For Frontends）
26. BFF 各クライアントは 汎⽤的な API 群 を実⾏する デスクトップクライアントに最 適化されたAPI群を使う モバイルクライアントに 最適化されたAPI群を 使う https://samnewman.io/patterns/architectural/bff/
27. BFF の特性 フロント エンド⽤バックエンドのパターン - Cloud Design Patterns
28. Serverless BFF BFF on Serverless Develop BFF APIs @nestjs/azure-func-http
29. 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'
30. Demo: BFF
31. CI/CD（継続的インテグレーション／継続的デリバリー） いつ導⼊する？ Visual Studio Code Azure Extensions App Service の Deployment Center 本格的な CI/CD サービスの利⽤ Azure Pipelines GitHub Actions
32. 参考: フロントエンド on Azure その他の考慮事項 Data Store Network
33. まとめ
34. ご清聴ありがとうございました！