Slide 1

Slide 1 text

Static Site Generator でサイト構築 Alternative Architecture DOJO #7 Kazuyuki Miyake

Slide 2

Slide 2 text

About Me 三宅 和之 @kazuyukimiyake 株式会社ゼンアーキテクツ 代表 Microsoft MVP ( for Microsoft Azure ) Vue.js 日本ユーザーグループコアスタッフ PaaS がかりの部屋(Blog): https://k-miyake.github.io/blog/

Slide 3

Slide 3 text

Static Site(静的サイト)構築のトレンド HTML を書いて FTP でアップロードする時代は終わった コンテンツは Markdown で書く Static Site Generator を使って、静的コンテンツを生成する 生成された HTML 等をクラウドにデプロイする Web アプリケーションと同様の開発スタイルになった 3

Slide 4

Slide 4 text

Static Site(静的サイト) のユースケース コーポレートサイト ランディングページ(LP) ドキュメント、マニュアル ブログ など コンテンツが簡単に更新でき、サクサク動くことが求められる 4

Slide 5

Slide 5 text

Static Site によるサイト配信 事前にビルドしてから静的コンテンツのみでサイトを配信 パフォーマンス、スケーラビリティ、セキュリティ面に優れる 5

Slide 6

Slide 6 text

Static Site Generator(SSG) 動的コンテンツを 事前にレンダリング し静的ファイルを生成する Git ベース SSG と API ベース SSG がある Jekyll, Gatsby, HUGO, Next.js, Nuxt.js, VitePress など 6

Slide 7

Slide 7 text

Git ベースの SSG コンテンツは Git リポジトリで管理 リポジトリ内の markdown 等でコンテンツを作成、更新 データベースや CMS サーバー が不要 Git の運用に慣れた開発者向け 7

Slide 8

Slide 8 text

DEMO VitePress でドキュメントサイトを作成する 8

Slide 9

Slide 9 text

API ベースの SSG (Jamstack) コンテンツは Headless CMS で管理 Headless CMS 提供の管理画面でコンテンツを作成、更新 ビルドプロセスの中で CMS の API からコンテンツを取得 一般ユーザーがコンテンツ更新をするのに向いている 9

Slide 10

Slide 10 text

CMS のパラダイムシフト モノリシック型(Wordpress 他)から Jamstack へ 静的サイトの技術スタックを組み合わせたアーキテクチャ 10

Slide 11

Slide 11 text

Jamstack の仕組み フレームワーク x Headless CMS x ホスティング 11

Slide 12

Slide 12 text

Static Site のクラウドホスティング ホスティングサービス / CDN 系 Netlify Vercel Cloudflare Pages クラウドサービス系 AWS Amplify Google Firebase Hosting Azure Static Web Apps 12

Slide 13

Slide 13 text

Azure Static Web Apps 静的サイトに最適化された Azure のホスティングサービス CI/CD と統合された開発体験(DX)を提供 13

Slide 14

Slide 14 text

Azure Static Web Apps の基本機能 静的サイトホスティングに必要な基本機能はすべて揃っている 14

Slide 15

Slide 15 text

DEMO Azure Static Web Apps へのデプロイ 15

Slide 16

Slide 16 text

Azure Static Web Apps の拡張機能 高度なアーキテクチャに対応するサービスとの統合をサポート 16

Slide 17

Slide 17 text

認証/認可の統合 コード追加なしで主要プロバイダーの認証を組み込める AAD B2C 等の OIDC プロバイダーもカスタム認証で対応可能 17

Slide 18

Slide 18 text

DEMO Static Web Apps に認証を組み込む 18

Slide 19

Slide 19 text

ご清聴ありがとうございました DJ タイムもお楽しみに! 19