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
Static Site Generator でサイト構築 / building sites w...
Search
miyake
September 08, 2022
Technology
1
370
Static Site Generator でサイト構築 / building sites with static site generator
Alternative Architecture DOJO #7 のセッション資料です
miyake
September 08, 2022
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
290
Mirroring Azure Cosmos DB in Microsoft Fabric
miyake
2
200
LLM 時代におさえておきたい Azure Serverless ファミリーまとめ / serverlessdaystokyo2023-llm-aoai
miyake
9
2.7k
Nuxt Studio を使ってみた / nuxt-studio-intro
miyake
1
950
Microsoft Build 2023 で発表された Cosmos DB の注目アップデート / Microsoft Build 2023 Cosmos DB update
miyake
1
850
祝 🎉 両方とも正式リリース! GitHub Codespaces と Nuxt3 で次世代開発体験 / codespaces-nuxt3
miyake
0
1.5k
Design and implementation of Cosmos DB Change Feed-centric architecture
miyake
0
1k
Well-Architected Framework を活用した Azure 設計パターン / azure-well-architected-framework
miyake
2
1.5k
2020 年下半期 Cosmos DB の更新まとめ
miyake
0
640
Other Decks in Technology
See All in Technology
医療業界に特化した音声認識モデル構築のためのアノテーションの実態
thickstem
0
520
Digitization部 紹介資料
sansan33
PRO
1
4k
20250514_未経験から Fintech実務参画まで。学生エンジニアの挑戦録
hideto1008
0
890
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
6.8k
入門 ESlint Typegen #TSKaigi #TSKaigi2025_kataritai
bengo4com
0
2k
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.4k
組織とセキュリティ文化と、自分の一歩
maimyyym
3
1.4k
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
34
19k
AI とペアプロしてわかった 3 つのヒューマンエラー
takahiroikegawa
1
560
バクラクのモノレポにおける AI Coding のための環境整備と {Roo,Claude} Code活用事例 / AI Coding in Bakuraku's Monorepo: Environment Setup & Case Studies with {Roo, Claude} Code
upamune
8
3.7k
AWS Lambdaでサーバレス設計を学ぼう_ベンダーロックインの懸念を超えて-サーバレスの真価を探る
fukuchiiinu
4
950
Whats_new_in_Podman_and_CRI-O_2025-06
orimanabu
3
130
Featured
See All Featured
Become a Pro
speakerdeck
PRO
28
5.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
4 Signs Your Business is Dying
shpigford
183
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
What's in a price? How to price your products and services
michaelherold
245
12k
Transcript
Static Site Generator でサイト構築 Alternative Architecture DOJO #7 Kazuyuki Miyake
About Me 三宅 和之 @kazuyukimiyake 株式会社ゼンアーキテクツ 代表 Microsoft MVP ( for
Microsoft Azure ) Vue.js 日本ユーザーグループコアスタッフ PaaS がかりの部屋(Blog): https://k-miyake.github.io/blog/
Static Site(静的サイト)構築のトレンド HTML を書いて FTP でアップロードする時代は終わった コンテンツは Markdown で書く Static
Site Generator を使って、静的コンテンツを生成する 生成された HTML 等をクラウドにデプロイする Web アプリケーションと同様の開発スタイルになった 3
Static Site(静的サイト) のユースケース コーポレートサイト ランディングページ(LP) ドキュメント、マニュアル ブログ など コンテンツが簡単に更新でき、サクサク動くことが求められる 4
Static Site によるサイト配信 事前にビルドしてから静的コンテンツのみでサイトを配信 パフォーマンス、スケーラビリティ、セキュリティ面に優れる 5
Static Site Generator(SSG) 動的コンテンツを 事前にレンダリング し静的ファイルを生成する Git ベース SSG と
API ベース SSG がある Jekyll, Gatsby, HUGO, Next.js, Nuxt.js, VitePress など 6
Git ベースの SSG コンテンツは Git リポジトリで管理 リポジトリ内の markdown 等でコンテンツを作成、更新 データベースや
CMS サーバー が不要 Git の運用に慣れた開発者向け 7
DEMO VitePress でドキュメントサイトを作成する 8
API ベースの SSG (Jamstack) コンテンツは Headless CMS で管理 Headless CMS
提供の管理画面でコンテンツを作成、更新 ビルドプロセスの中で CMS の API からコンテンツを取得 一般ユーザーがコンテンツ更新をするのに向いている 9
CMS のパラダイムシフト モノリシック型(Wordpress 他)から Jamstack へ 静的サイトの技術スタックを組み合わせたアーキテクチャ 10
Jamstack の仕組み フレームワーク x Headless CMS x ホスティング 11
Static Site のクラウドホスティング ホスティングサービス / CDN 系 Netlify Vercel Cloudflare
Pages クラウドサービス系 AWS Amplify Google Firebase Hosting Azure Static Web Apps 12
Azure Static Web Apps 静的サイトに最適化された Azure のホスティングサービス CI/CD と統合された開発体験(DX)を提供 13
Azure Static Web Apps の基本機能 静的サイトホスティングに必要な基本機能はすべて揃っている 14
DEMO Azure Static Web Apps へのデプロイ 15
Azure Static Web Apps の拡張機能 高度なアーキテクチャに対応するサービスとの統合をサポート 16
認証/認可の統合 コード追加なしで主要プロバイダーの認証を組み込める AAD B2C 等の OIDC プロバイダーもカスタム認証で対応可能 17
DEMO Static Web Apps に認証を組み込む 18
ご清聴ありがとうございました DJ タイムもお楽しみに! 19