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 / Se...
Search
miyake
July 15, 2020
Technology
2
2.2k
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
Cosmos DB で持続可能な RAG を実現しよう!~ AOAI Dev Day ふりかえりを添えて / Sustainable RAG with Cosmos DB with recap AOAI Dev Day
miyake
0
250
Mirroring Azure Cosmos DB in Microsoft Fabric
miyake
2
160
LLM 時代におさえておきたい Azure Serverless ファミリーまとめ / serverlessdaystokyo2023-llm-aoai
miyake
9
2.6k
Nuxt Studio を使ってみた / nuxt-studio-intro
miyake
1
820
Microsoft Build 2023 で発表された Cosmos DB の注目アップデート / Microsoft Build 2023 Cosmos DB update
miyake
1
810
祝 🎉 両方とも正式リリース! GitHub Codespaces と Nuxt3 で次世代開発体験 / codespaces-nuxt3
miyake
0
1.4k
Static Site Generator でサイト構築 / building sites with static site generator
miyake
1
320
Design and implementation of Cosmos DB Change Feed-centric architecture
miyake
0
940
Well-Architected Framework を活用した Azure 設計パターン / azure-well-architected-framework
miyake
2
1.4k
Other Decks in Technology
See All in Technology
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
27
15k
ソフトウェアエンジニアと仕事するときに知っておいたほうが良いこと / Key points for working with software engineers
pinkumohikan
1
140
Windows の新しい管理者保護モード
murachiakira
0
200
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
310
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
140
Pwned Labsのすゝめ
ken5scal
0
260
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
330
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
690
デスクトップだけじゃないUbuntu
mtyshibata
0
660
OpenID BizDay#17 みんなの銀行による身元確認結果の活用 / 20250219-BizDay17-KYC-minna-no-ginko
oidfj
0
210
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Code Review Best Practice
trishagee
67
18k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Site-Speed That Sticks
csswizardry
4
400
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Unsuck your backbone
ammeep
669
57k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
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