Static Site Generator でサイト構築 / building sites with static site generator

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