$30 off During Our Annual Pro Sale. View Details »

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

miyake
September 08, 2022

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

Alternative Architecture DOJO #7 のセッション資料です

miyake

September 08, 2022
Tweet

More Decks by miyake

Other Decks in Technology

Transcript

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

  2. About Me 三宅 和之 @kazuyukimiyake 株式会社ゼンアーキテクツ 代表 Microsoft MVP ( for

    Microsoft Azure ) Vue.js 日本ユーザーグループコアスタッフ PaaS がかりの部屋(Blog): https://k-miyake.github.io/blog/
  3. Static Site(静的サイト)構築のトレンド HTML を書いて FTP でアップロードする時代は終わった コンテンツは Markdown で書く Static

    Site Generator を使って、静的コンテンツを生成する 生成された HTML 等をクラウドにデプロイする Web アプリケーションと同様の開発スタイルになった 3
  4. Static Site(静的サイト) のユースケース コーポレートサイト ランディングページ(LP) ドキュメント、マニュアル ブログ など コンテンツが簡単に更新でき、サクサク動くことが求められる 4

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

  6. Static Site Generator(SSG) 動的コンテンツを 事前にレンダリング し静的ファイルを生成する Git ベース SSG と

    API ベース SSG がある Jekyll, Gatsby, HUGO, Next.js, Nuxt.js, VitePress など 6
  7. Git ベースの SSG コンテンツは Git リポジトリで管理 リポジトリ内の markdown 等でコンテンツを作成、更新 データベースや

    CMS サーバー が不要 Git の運用に慣れた開発者向け 7
  8. DEMO VitePress でドキュメントサイトを作成する 8

  9. API ベースの SSG (Jamstack) コンテンツは Headless CMS で管理 Headless CMS

    提供の管理画面でコンテンツを作成、更新 ビルドプロセスの中で CMS の API からコンテンツを取得 一般ユーザーがコンテンツ更新をするのに向いている 9
  10. CMS のパラダイムシフト モノリシック型(Wordpress 他)から Jamstack へ 静的サイトの技術スタックを組み合わせたアーキテクチャ 10

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

  12. Static Site のクラウドホスティング ホスティングサービス / CDN 系 Netlify Vercel Cloudflare

    Pages クラウドサービス系 AWS Amplify Google Firebase Hosting Azure Static Web Apps 12
  13. Azure Static Web Apps 静的サイトに最適化された Azure のホスティングサービス CI/CD と統合された開発体験(DX)を提供 13

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

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

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

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

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

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