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

Azure Static Web Apps で実現する Serverless CMS / Serverless CMS with Azure Static Web Apps

Ff7f1f76468f46a1c5c84b9238a4b162?s=47 miyake
July 15, 2020

Azure Static Web Apps で実現する Serverless CMS / Serverless CMS with Azure Static Web Apps

Serverless Meetup Japan Virtual #2 のセッション資料です。
https://serverless.connpass.com/event/181523/

Ff7f1f76468f46a1c5c84b9238a4b162?s=128

miyake

July 15, 2020
Tweet

Transcript

  1. Azure Static Web Apps で実現する Serverless CMS Serverless Meetup Japan

    Virtual #2 Kazuyuki Miyake 1
  2. About Me 三宅 和之 @kazuyukimiyake 株式会社ゼンアーキテクツ CTO Microsoft MVP (

    for Microsoft Azure ) Vue.js-jp, typescript-jp 運営スタッフ PaaS がかりの部屋(Blog): https://k-miyake.github.io/blog/ 2
  3. Azure Static Web Apps Preview 主な特⻑ スタティックサイトに最適化されたホスティング GitHub Actions と統合された

    CI/CD Azure Functions によるサーバーレス API の統合 詳細 公式ドキュメント(⽇本語) de:code 2020 でも関連セッションを公開しています(2D 推奨) 3
  4. デプロイの仕組み GitHub Actions と統合された CI/CD 4

  5. 統合された API リポジトリに BFF (APIs) を共存させることが可能 Azure Functions (Node.js) で実装する

    5
  6. Azure Static Web Apps のユースケース SPA: Single Page Application ブラウザ上で実⾏される(サーバーランタイムが不要の)Web

    アプリ SSG: Static Site Generator (JAM Stack を含む) プレレンダリングされた静的コンテンツベースの Web アプリ その他 BFF(Backends For Frontends)は統合 API 機能を利⽤して実現可能 SSR(Server-Side Rendering)には対応していない 6
  7. SSG - Static Site Generator 動的コンテンツを 事前にレンダリング し静的ファイルを⽣成する Jekyll, Gatsby,

    HUGO, Next.js, Nuxt.js など 7
  8. Git ベースの SSG コンテンツは Git リポジトリで管理 リポジトリ内の markdown 等でコンテンツを作成、更新 データベースや

    CMS サーバー が不要 Git の運⽤に慣れた開発者向け 8
  9. nuxt/content による SSG Nuxt.js の Git-based Headless CMS モジュール ->

    公式サイト content/ ディレクトリ内にファイルを書き込む Markdown 内で Vue コンポーネントが利⽤可能(︕) 9
  10. DEMO nuxt/content + Azure Static Web Apps 10

  11. SSG(Git-based) + Azure Static Web Apps ⾃動⽣成された GitHub Actions の

    YAML を⼀部カスタマイズする app_build_command : フレームワーク指定の Generate コマンドを呼ぶ 11
  12. API-based SSG (JAM Stack) コンテンツは Headless CMS で管理 Headless CMS

    提供の管理画⾯でコンテンツを作成、更新 ビルドプロセスの中で CMS の API からコンテンツを取得する ⼀般ユーザーがコンテンツ更新をするのに向いている 12
  13. Contentful Headless CMS サービス -> 公式サイト コンテンツ管理画⾯は提供され、コンテンツ⾃体は API で取得する フロントエンドは⾃分で作る(⾃由度が⾼まる)

    個⼈ブログなどを WordPress から移⾏する⼈が増えている 13
  14. DEMO Contentful + Nuxt.js + Azure Static Web Apps 14

  15. JAM Stack + Azure Static Web Apps プレビュー当初に存在していたバグが解消されて実現できるように︕ Webhook トリガーで

    GitHub Actions を実⾏するように YAML を構成する 15
  16. Reference Microsoft Docs – Azure Static Web Apps 公式ドキュメント https://docs.microsoft.com/ja-jp/azure/static-web-apps/

    サンプルコード集 - Azure Static Web Apps Gallery Community Projects https://github.com/microsoft/static-web-apps-gallery-code-samples Microsfot Learn Azure Static Web Apps で Angular、React、Svelte、または Vue の JavaScript アプリと API を発⾏する Gatsby と Azure Static Web Apps で静的 Web アプリを作成して発⾏する 16
  17. fin. ご清聴ありがとうございました︕ 17