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 with static site generator
Search
miyake
September 08, 2022
Technology
1
250
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
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
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
Front-end web applications with Azure Static Web Apps
miyake
0
560
Other Decks in Technology
See All in Technology
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
地理情報とAPIのトレンド
nagix
0
160
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.8k
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
BBQ
matthewcrist
82
9k
Unsuck your backbone
ammeep
666
57k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Navigating Team Friction
lara
181
13k
Automating Front-end Workflow
addyosmani
1362
200k
How STYLIGHT went responsive
nonsquared
93
5k
Design by the Numbers
sachag
277
18k
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