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

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

Transcript

1. Azure Static Web Apps で実現する Serverless CMS
   Serverless Meetup Japan Virtual #2
   Kazuyuki Miyake
   1
   

   View Slide

2. About Me
   三宅 和之 @kazuyukimiyake
   株式会社ゼンアーキテクツ CTO
   Microsoft MVP ( for Microsoft Azure )
   Vue.js-jp, typescript-jp 運営スタッフ
   PaaS がかりの部屋(Blog): https://k-miyake.github.io/blog/
   2
   

   View Slide

3. Azure Static Web Apps Preview
   主な特⻑
   スタティックサイトに最適化されたホスティング
   GitHub Actions と統合された CI/CD
   Azure Functions によるサーバーレス API の統合
   詳細
   公式ドキュメント（⽇本語）
   de:code 2020 でも関連セッションを公開しています（2D 推奨）
   3
   

   View Slide

4. デプロイの仕組み
   GitHub Actions と統合された CI/CD
   4
   

   View Slide

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

   View Slide

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
   

   View Slide

7. SSG - Static Site Generator
   動的コンテンツを 事前にレンダリング し静的ファイルを⽣成する
   Jekyll, Gatsby, HUGO, Next.js, Nuxt.js など
   7
   

   View Slide

8. Git ベースの SSG
   コンテンツは Git リポジトリで管理
   リポジトリ内の markdown 等でコンテンツを作成、更新
   データベースや CMS サーバー が不要
   Git の運⽤に慣れた開発者向け
   8
   

   View Slide

9. nuxt/content による SSG
   Nuxt.js の Git-based Headless CMS モジュール -> 公式サイト
   content/ ディレクトリ内にファイルを書き込む
   Markdown 内で Vue コンポーネントが利⽤可能（︕）
   9
   

   View Slide

10. DEMO
    nuxt/content + Azure Static Web Apps
    10
    

    View Slide

11. SSG（Git-based） + Azure Static Web Apps
    ⾃動⽣成された GitHub Actions の YAML を⼀部カスタマイズする
    app_build_command : フレームワーク指定の Generate コマンドを呼ぶ
    11
    

    View Slide

12. API-based SSG (JAM Stack)
    コンテンツは Headless CMS で管理
    Headless CMS 提供の管理画⾯でコンテンツを作成、更新
    ビルドプロセスの中で CMS の API からコンテンツを取得する
    ⼀般ユーザーがコンテンツ更新をするのに向いている
    12
    

    View Slide

13. Contentful
    Headless CMS サービス -> 公式サイト
    コンテンツ管理画⾯は提供され、コンテンツ⾃体は API で取得する
    フロントエンドは⾃分で作る（⾃由度が⾼まる）
    個⼈ブログなどを WordPress から移⾏する⼈が増えている
    13
    

    View Slide

14. DEMO
    Contentful + Nuxt.js + Azure Static Web Apps
    14
    

    View Slide

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

    View Slide

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
    

    View Slide

17. fin.
    ご清聴ありがとうございました︕
    17
    

    View Slide