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
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
Mirroring Azure Cosmos DB in Microsoft Fabric
miyake
2
67
LLM 時代におさえておきたい Azure Serverless ファミリーまとめ / serverlessdaystokyo2023-llm-aoai
miyake
9
2.3k
Nuxt Studio を使ってみた / nuxt-studio-intro
miyake
1
430
Microsoft Build 2023 で発表された Cosmos DB の注目アップデート / Microsoft Build 2023 Cosmos DB update
miyake
1
700
祝 🎉 両方とも正式リリース! GitHub Codespaces と Nuxt3 で次世代開発体験 / codespaces-nuxt3
miyake
0
1.3k
Static Site Generator でサイト構築 / building sites with static site generator
miyake
1
250
Design and implementation of Cosmos DB Change Feed-centric architecture
miyake
0
820
Well-Architected Framework を活用した Azure 設計パターン / azure-well-architected-framework
miyake
2
1.3k
2020 年下半期 Cosmos DB の更新まとめ
miyake
0
560
Other Decks in Technology
See All in Technology
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.2k
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
160
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
1
150
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
990
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
230
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
720
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
完全に理解した!生成AI自社プロダクトのアジャイル開発の進め方!/ Fully understood! Agile tips for developing our generative AI product!(AOAI Dev Day)
jnymyk
1
150
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
How STYLIGHT went responsive
nonsquared
93
5k
Web Components: a chance to create the future
zenorocha
307
41k
Rails Girls Zürich Keynote
gr2m
93
13k
Side Projects
sachag
451
42k
Fireside Chat
paigeccino
25
2.8k
Debugging Ruby Performance
tmm1
71
11k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Building Adaptive Systems
keathley
34
2k
How to name files
jennybc
67
96k
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