Codex × GitHub Actions × Azure Storageで実現する静的サイト構築と自動デプロイ

-- Views

September 13, 26

スライド概要

2026年9月12日 第5回 JAZUG Shizuoka 登壇枠(静岡県民枠)で発表した資料になります。
https://jazug.connpass.com/event/400263/

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

Codex × GitHub Actions × Azure Storage で実現する 静的サイト構築と自動デプロイ Michihiro Tsukano / 束野 通洋 2026/09/12 第5回 JAZUG Shizuoka

2.

自己紹介 Michihiro Tsukano / 束野 通洋 Cloud Engineer / クラウドエンジニア 経歴 • • 2026.07~現在 ヤマハ株式会社 2020.04~2026.06 ローランド ディー.ジー.株式会社 JAZUG Shizuoka 登壇 • • 2025.06 第2回 JAZUG Shizuoka 2025.02 第1回 JAZUG Shizuoka リブートイベント Microsoft Azure 02

3.

概要 個人サイト構築 これまでの経験や実績を整理するために Microsoft Entra ID 認証 Codex GitHub Actions Azure Storage フロント開発・Git操作 変更を検知してデプロイ 静的Webサイトを公開 本日は公開先から順に:Azure Storage → 認証・認可 → GitHub Actions → Codex 03

5.

Azure Storageの静的Webサイト機能 $webに配置し、専用のWebエンドポイントで公開 HTML / CSS / JavaScript / 画像を、そのまま配信 アクセス 返すファイル / index.html(既定ページ) 存在しないパス 404.html(設定したエラーページ) 通常のBlobとの違い 通常はファイル単位の取得。既定ページ・404ドキュメントの設定はない。 04

7.

認証:Microsoft Entra ID 「誰としてアクセスするか」を確認する GitHub Actionsが、デプロイ用アプリとしてAzureへ接続するための認証。 01 アプリを登録 Microsoft Entra IDでアプリを登録し、Client IDとTenant IDを取得する。 02 資格情報を設定 クライアントシークレット、またはフェデレーション資格情報を設定する。 03 アクセストークンを取得 Entra IDが資格情報を検証。認証後、Azure向けのアクセストークンを発行する。 05

8.

認証方式の比較 観点 クライアントシークレット フェデレーション資格情報 仕組み 秘密の文字列を提示 GitHub発行のOIDCトークンを提示 メリット 仕組みが分かりやすい 多くの環境で利用できる Azure用の長期シークレット不要 保管・定期更新の負担を減らせる デメリット 安全な保管・期限管理が必要 漏洩すると不正利用のリスク 信頼条件の正確な設定が必要 今回はフェデレーション資格情報を採用 長期シークレットを持たずに、自動デプロイを実現できるため。 06

10.

認可:Azure RBAC 「何を、どこまで操作してよいか」を決める 割り当て先 デプロイ用アプリのサービスプリンシパル ロール ストレージ Blob データ共同作成者 スコープ 公開先のストレージアカウント 対象ストレージアカウント → アクセス制御(IAM)で設定 サブスクリプション全体には付けず、権限の範囲を限定。 09

12.

GitHub Actionsによる自動デプロイ YAMLに「いつ実行するか」と「何を実行するか」を定義 on: push: branches: [main] paths: - "codex/**" - ".github/workflows/deploy-azure-storage.yml" workflow_dispatch: permissions: contents: read id-token: write concurrency: group: azure-storage-production cancel-in-progress: true GitHub側の事前設定 Settings → Secrets and variables → Actions Secrets AZURE_CLIENT_ID AZURE_TENANT_ID AZURE_SUBSCRIPTION_ID Variables AZURE_STORAGE_ACCOUNT 10

14.
[beta]
GitHub ActionsからAzureへアップロード
env:
AZURE_STORAGE_ACCOUNT: ${{ vars.AZURE_STORAGE_ACCOUNT }}
steps:
- uses: actions/checkout@v4
- uses: azure/login@v2
with:
client-id: ${{ secrets.AZURE_CLIENT_ID }}
tenant-id: ${{ secrets.AZURE_TENANT_ID }}
subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
- run: |
az storage blob upload-batch \
--account-name "$AZURE_STORAGE_ACCOUNT" \
--auth-mode login \
--destination '$web' \
--source codex \
--overwrite true

1 取得
checkoutで
サイトのファイルを取得

2 認証
OIDCでAzureへログイン
長期シークレットは不要

3 配置
codex → $web
同名ファイルを上書き
11

15.

Codexを活用した開発 「個人サイトを作ってください」からスタート プロンプトで指示 プッシュ 確認・修正を 繰り返す Codexが作業 コミット 12

17.

まとめ 開発から公開まで、更新を続けられる仕組みに Codex プロンプトで開発を進め、Git操作まで依頼 GitHub Actions プッシュをきっかけに静的ファイルを自動デプロイ Azure Storage 静的Webサイト機能で公開 認証はフェデレーション資格情報、認可は対象ストレージに限定。 13