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
Technology
2
1.5k

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

See All by miyake
祝 🎉 両方とも正式リリース！ GitHub Codespaces と Nuxt3 で次世代開発体験 / codespaces-nuxt3
miyake
0
870
Static Site Generator でサイト構築 / building sites with static site generator
miyake
1
98
Design and implementation of Cosmos DB Change Feed-centric architecture
miyake
0
540
Well-Architected Framework を活用した Azure 設計パターン / azure-well-architected-framework
miyake
2
1k
2020 年下半期 Cosmos DB の更新まとめ
miyake
0
440
Front-end web applications with Azure Static Web Apps
miyake
0
420
Hack Azure! #1 - Azure Serverless でオンライン決済基盤をつくる / hack-azure-1
miyake
1
470
Azure PaaS/Serverless の最新情報をキャッチアップしよう / Azure PaaS and Serverless Update
miyake
1
1.3k
Front-end web application development with Azure PaaS & Serverless, 2020 Update!
miyake
2
700

Other Decks in Technology

See All in Technology
ユーザーテストガイドライン VERSION 2.0
kouzoukaikaku
0
1.5k
NGINXENG JP#2 - 1-NGINX-エンジニアリング勉強会-きょうの見どころ
hiropo20
0
120
都市ARの作り方 PLATEAU ✖︎ Geospatial API
41h0_shiho
0
250
スクラム導入して変わったチーム、組織のありかた
yumechi
0
200
API連携に伴う規制と対応 / Regulations and responses to API linkage
moneyforward
0
160
あつめたデータをどう扱うか
skrb
2
160
日経電子版だけじゃない！ 日経の新規Webメディアの開発 - NIKKEI Tech Talk #3
sztm
0
340
OPENLOGI Company Profile
hr01
0
12k
Cloudflare Workersで動くOG画像生成器
aiji42
1
500
DNS権威サーバのクラウドサービス向けに行われた攻撃および対策 / DNS Pseudo-Random Subdomain Attack and mitigations
kazeburo
5
1.3k
ChatGPT for Hacking
anugrahsr
0
4.6k
開発者と協働できるメトリクスダッシュボードを作ろう！/SRE Lounge 2023
lmi
3
520

Featured

See All Featured
The Cult of Friendly URLs
andyhume
69
5.1k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
9.1k
Gamification - CAS2011
davidbonilla
75
4.1k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Designing with Data
zakiwarfel
91
4.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Git: the NoSQL Database
bkeepers
PRO
419
60k
Fantastic passwords and where to find them - at NoRuKo
philnash
32
1.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
840
Java REST API Framework Comparison - PWX 2021
mraible
PRO
13
5.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k

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