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

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

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/

miyake

July 15, 2020
Tweet

More Decks by miyake

Other Decks in Technology

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