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
350
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
280
Mirroring Azure Cosmos DB in Microsoft Fabric
miyake
2
180
LLM 時代におさえておきたい Azure Serverless ファミリーまとめ / serverlessdaystokyo2023-llm-aoai
miyake
9
2.7k
Nuxt Studio を使ってみた / nuxt-studio-intro
miyake
1
900
Microsoft Build 2023 で発表された Cosmos DB の注目アップデート / Microsoft Build 2023 Cosmos DB update
miyake
1
840
祝 🎉 両方とも正式リリース! GitHub Codespaces と Nuxt3 で次世代開発体験 / codespaces-nuxt3
miyake
0
1.4k
Design and implementation of Cosmos DB Change Feed-centric architecture
miyake
0
980
Well-Architected Framework を活用した Azure 設計パターン / azure-well-architected-framework
miyake
2
1.4k
2020 年下半期 Cosmos DB の更新まとめ
miyake
0
630
Other Decks in Technology
See All in Technology
Notion x ポストモーテムで広げる組織の学び / Notion x Postmortem
isaoshimizu
1
130
AWSの新機能検証をやる時こそ、Amazon Qでプロンプトエンジニアリングを駆使しよう
duelist2020jp
1
290
PostgreSQL Log File Mastery: Optimizing Database Performance Through Advanced Log Analysis
shiviyer007
PRO
1
140
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
15
5.9k
3D生成AIのための画像生成
kosukeito
2
330
勝手に!深堀り!Cloud Run worker pools / Deep dive Cloud Run worker pools
iselegant
4
530
Linuxのパッケージ管理とアップデート基礎知識
go_nishimoto
0
580
「経験の点」の位置を意識したキャリア形成 / Career development with an awareness of the “point of experience” position
pauli
4
110
AWSで作るセキュアな認証基盤with OAuth mTLS / Secure Authentication Infrastructure with OAuth mTLS on AWS
kaminashi
0
190
技術者はかっこいいものだ!!~キルラキルから学んだエンジニアの生き方~
masakiokuda
2
280
Стильный код: натуральный поиск редких атрибутов по картинке. Юлия Антохина, Data Scientist, Lamoda Tech
lamodatech
0
810
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
200
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building Adaptive Systems
keathley
41
2.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
A better future with KSS
kneath
239
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
We Have a Design System, Now What?
morganepeng
52
7.5k
Building Applications with DynamoDB
mza
94
6.3k
RailsConf 2023
tenderlove
30
1.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
YesSQL, Process and Tooling at Scale
rocio
172
14k
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