Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Azure Static Web Apps で実現する Serverless CMS / Serverless CMS with Azure Static Web Apps
Search
miyake
July 15, 2020
Technology
2
1.9k
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
Share
More Decks by miyake
See All by miyake
LLM 時代におさえておきたい Azure Serverless ファミリーまとめ / serverlessdaystokyo2023-llm-aoai
miyake
8
2.1k
Nuxt Studio を使ってみた / nuxt-studio-intro
miyake
0
300
Microsoft Build 2023 で発表された Cosmos DB の注目アップデート / Microsoft Build 2023 Cosmos DB update
miyake
1
610
祝 🎉 両方とも正式リリース! GitHub Codespaces と Nuxt3 で次世代開発体験 / codespaces-nuxt3
miyake
0
1.2k
Static Site Generator でサイト構築 / building sites with static site generator
miyake
1
230
Design and implementation of Cosmos DB Change Feed-centric architecture
miyake
0
770
Well-Architected Framework を活用した Azure 設計パターン / azure-well-architected-framework
miyake
2
1.2k
2020 年下半期 Cosmos DB の更新まとめ
miyake
0
550
Front-end web applications with Azure Static Web Apps
miyake
0
520
Other Decks in Technology
See All in Technology
日本におけるデータエンジニアリングのこれまでとこれから
foursue
12
2.5k
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
150
Algyan イベント振り返り
linyixian
0
190
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.9k
反実仮想機械学習とは何か
usaito
PRO
7
2.3k
テストプロセスで大事にしていること #jasstnano
makky_tyuyan
0
130
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
100
自動生成を活用した、運用保守コストを抑える Error/Alert/Runbook の一元集約管理 / Centralized management of Error/Alert/Runbook to minimize operational costs using automated code generation
biwashi
9
2.1k
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
2k
オブザーバビリティの Primary Signals
onk
PRO
0
550
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
1
300
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
130
Featured
See All Featured
Gamification - CAS2011
davidbonilla
76
4.6k
The Language of Interfaces
destraynor
151
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
What the flash - Photography Introduction
edds
64
11k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Designing for humans not robots
tammielis
247
25k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
A Modern Web Designer's Workflow
chriscoyier
688
190k
Making Projects Easy
brettharned
108
5.5k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Infographics Made Easy
chrislema
237
18k
Transcript
Azure Static Web Apps で実現する Serverless CMS Serverless Meetup Japan
Virtual #2 Kazuyuki Miyake 1
About Me 三宅 和之 @kazuyukimiyake 株式会社ゼンアーキテクツ CTO Microsoft MVP (
for Microsoft Azure ) Vue.js-jp, typescript-jp 運営スタッフ PaaS がかりの部屋(Blog): https://k-miyake.github.io/blog/ 2
Azure Static Web Apps Preview 主な特⻑ スタティックサイトに最適化されたホスティング GitHub Actions と統合された
CI/CD Azure Functions によるサーバーレス API の統合 詳細 公式ドキュメント(⽇本語) de:code 2020 でも関連セッションを公開しています(2D 推奨) 3
デプロイの仕組み GitHub Actions と統合された CI/CD 4
統合された API リポジトリに BFF (APIs) を共存させることが可能 Azure Functions (Node.js) で実装する
5
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
SSG - Static Site Generator 動的コンテンツを 事前にレンダリング し静的ファイルを⽣成する Jekyll, Gatsby,
HUGO, Next.js, Nuxt.js など 7
Git ベースの SSG コンテンツは Git リポジトリで管理 リポジトリ内の markdown 等でコンテンツを作成、更新 データベースや
CMS サーバー が不要 Git の運⽤に慣れた開発者向け 8
nuxt/content による SSG Nuxt.js の Git-based Headless CMS モジュール ->
公式サイト content/ ディレクトリ内にファイルを書き込む Markdown 内で Vue コンポーネントが利⽤可能(︕) 9
DEMO nuxt/content + Azure Static Web Apps 10
SSG(Git-based) + Azure Static Web Apps ⾃動⽣成された GitHub Actions の
YAML を⼀部カスタマイズする app_build_command : フレームワーク指定の Generate コマンドを呼ぶ 11
API-based SSG (JAM Stack) コンテンツは Headless CMS で管理 Headless CMS
提供の管理画⾯でコンテンツを作成、更新 ビルドプロセスの中で CMS の API からコンテンツを取得する ⼀般ユーザーがコンテンツ更新をするのに向いている 12
Contentful Headless CMS サービス -> 公式サイト コンテンツ管理画⾯は提供され、コンテンツ⾃体は API で取得する フロントエンドは⾃分で作る(⾃由度が⾼まる)
個⼈ブログなどを WordPress から移⾏する⼈が増えている 13
DEMO Contentful + Nuxt.js + Azure Static Web Apps 14
JAM Stack + Azure Static Web Apps プレビュー当初に存在していたバグが解消されて実現できるように︕ Webhook トリガーで
GitHub Actions を実⾏するように YAML を構成する 15
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
fin. ご清聴ありがとうございました︕ 17