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

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

Ff7f1f76468f46a1c5c84b9238a4b162?s=47 miyake
December 06, 2019

フロントエンド開発ベストプラクティス 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.

Ff7f1f76468f46a1c5c84b9238a4b162?s=128

miyake

December 06, 2019
Tweet

Transcript

  1. None
  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. ご清聴ありがとうございました!