Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

miyake

December 06, 2019
Tweet

More Decks by miyake

Other Decks in Technology

Transcript

  1. このセッションについて SPA や Jam Stack などの⼿法を⽤いたフロントエンド開発はもはや Web アプリケーションを構築していく上でのメインストリー ムになりつつあります。しかし、Azure を使った

    Web 開発の世界ではこれらがまだ主流になっているとは⾔えない状況です。こ のセッションは、最新のフロントエンド開発⼿法による Web アプリケーションを Azure を使って構築するためのベストプラクティ スを学ぶことができます。セッション中で紹介するサンプルやデモでは、 Vue.js, TypeScript, VSCode を使って開発し、 Azure DevOps や App Service を使ってデプロイする⽅法を紹介します。 フロントエンド開発 ベストプラクティス on Azure
  2. 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; } } });
  3. SPA on Azure – Vue.js Blob storage SPA アプリ Azure

    CDN フレームワークを使って SPAアプリを構築 Static Website 機能を有効化して Webサイトをホストする 規模に応じてCDN 経由で配信 https://xxx.xxx.web.core.windows.net/
  4. SSR - Server-Side Rendering Client(ブラウザ) Server(Node.js) API Client と同⼀のコンポーネントで HTMLを構築しページを送信する

    画⾯遷移などのタイミングでは、 サーバーにページ取得を要求する このセッションでは 「SSR」 を 「SPA + SSR」 の概念として表現します
  5. SSR on Azure – Nuxt.js Kudu Oryx Azure App Service

    (for Linux) リバース プロキシ Azure Repos (Azure DevOps) Nuxt.js はユニバーサル SSR モードで構築 ブランチのコミットをトリガーに ビルド & デプロイが実⾏される フレームワークに合わせて ビルドスクリプトを⽣成 このセッションでは 「SSR」 を 「SPA + SSR」 の概念として表現します
  6. JAMstack J A M jamstack.org 静的サイト ジェネレーター API or Headless

    CMS Repository 静的サイト ホスティング (+ CDN) HTML JS CSS .md J A M
  7. 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 } }
  8. Gatsby + Contentful による CMS の運⽤ Gatsby Contentful GitHub Actions

    静的サイト ジェネレーター Headless CMS Repository ホスティング
  9. 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'