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
390
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
320
Mirroring Azure Cosmos DB in Microsoft Fabric
miyake
2
230
LLM 時代におさえておきたい Azure Serverless ファミリーまとめ / serverlessdaystokyo2023-llm-aoai
miyake
9
2.8k
Nuxt Studio を使ってみた / nuxt-studio-intro
miyake
1
1.1k
Microsoft Build 2023 で発表された Cosmos DB の注目アップデート / Microsoft Build 2023 Cosmos DB update
miyake
1
870
祝 🎉 両方とも正式リリース! 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
650
Other Decks in Technology
See All in Technology
夢の印税生活 / Life on Royalties
tmtms
0
280
浸透しなさいRFC 5322&7208
hinono
0
120
Evolution on AI Agent and Beyond - AGI への道のりと、シンギュラリティの3つのシナリオ
masayamoriofficial
0
170
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.6k
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
180
Backboneとしてのtimm2025
yu4u
4
1.4k
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
2
200
Understanding Go GC #coefl_go_jp
bengo4com
0
1.1k
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
5
1.5k
モバイルアプリ研修
recruitengineers
PRO
2
220
KiroでGameDay開催してみよう(準備編)
yuuuuuuu168
1
130
あとはAIに任せて人間は自由に生きる
kentaro
3
1.1k
Featured
See All Featured
Faster Mobile Websites
deanohume
309
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
It's Worth the Effort
3n
187
28k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
GraphQLとの向き合い方2022年版
quramy
49
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Thoughts on Productivity
jonyablonski
69
4.8k
Agile that works and the tools we love
rasmusluckow
329
21k
How GitHub (no longer) Works
holman
315
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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