生成 AI 時代のアプリ公開基盤 - Azure Static Web Apps × SwallowKit で整える実用構成

生成 AI 時代のアプリ公開基盤 Azure Static Web Apps × SwallowKit で整える実用構成 第60回 Tokyo Jazug Night 2026/5/21 平林 拓将（ひらりん） himarin269 / himanago

About me ✓ name： 平林 拓将（ひらりん） ✓ work： テクニカルトレーナー＆開発 ✓ award/title: -Microsoft MVP for Azure（2019.11～） -LINE API Expert（2020.3～） ✓ like: -C# / Azure PaaS / serverless ✓ social: - X：@himarin269 GitHub：himanago Blog：https://himanago.hatenablog.com/

• https://twitter.com/himarin269
• https://github.com/himanago/
• https://himanago.hatenablog.com/

はじめに ✓ 生成 AI・コーディングエージェントの登場により Web アプリ開発のハードルは大きく下がった ✓ しかし「どこにどう配置するか」は依然として難しい ✓ 本セッションでは Azure Static Web Apps を中心とした 小〜中規模向けの実用構成と、 それを効率化する「SwallowKit」を紹介します

Web アプリをホストするための Azure 構成 ✓ 小〜中規模から始められ、必要に応じてスケールできる “クラウドネイティブ標準構成”を考えてみた Static Web Apps 静的Webサイトホスティングサービス バックエンドに Azure Functions などを統合可能 フロント配信＋認証統合＋低コスト → 小規模から始めやすい基盤！

Web アプリをホストするための Azure 構成 ✓ 小〜中規模から始められ、必要に応じてスケールできる “クラウドネイティブ標準構成”を考えてみた フロントエンド App Router Next.js Static Web Apps React ベースの Web アプリケーションフレームワーク • SSR / SSG / CSR を使い分け可能 • App Router によるサーバーサイド処理の一体化 • AI / Agent 系ライブラリとの相性もいい • Azure Static Web Apps でサポート ※ただしバックエンドは専用の Web App になる

Web アプリをホストするための Azure 構成 ✓ 小〜中規模から始められ、必要に応じてスケールできる “クラウドネイティブ標準構成”を考えてみた 接続はマネージドID フロントエンド APIの実装・連携のしやすい Azure Functions をバックエンドとして使用 → スケール性能改善＆VNET統合が可能 AppApp Router[BFF] Router Next.js Static Web Apps Azure Functions （Flex Consumption） Next.js バックエンドを BFF（Backend For Frontend）として使う → API 境界をフロント側で制御 責任分離と柔軟な構成を両立！

Web アプリをホストするための Azure 構成 ✓ 小〜中規模から始められ、必要に応じてスケールできる “クラウドネイティブ標準構成”を考えてみた Functions との相性がいい Cosmos DBで 全体をサーバーレスに統一 VNET フロントエンド VNET 統合 AppApp Router[BFF] Router Private Endpoint Next.js Static Web Apps Azure Functions （Flex Consumption） Cosmos DB VNET統合＆マネージド ID でセキュアに接続 セキュアなサーバーレス構成を実現！

Web アプリをホストするための Azure 構成 ✓ 小〜中規模から始められ、必要に応じてスケールできる “クラウドネイティブ標準構成”を考えてみた 構成・デプロイを一貫して自動化！ VNET フロントエンド VNET 統合 AppApp Router[BFF] Router Private Endpoint Next.js Static Web Apps Azure Functions （Flex Consumption） Cosmos DB GitHub Actions CI/CD を構成 Azure Pipelines Bicep インフラも IaC で統一管理

Web アプリをホストするための Azure 構成 ✓ 小〜中規模から始められ、必要に応じてスケールできる “クラウドネイティブ標準構成”を考えてみた スケーラブルかつセキュアなサーバーレス構成を実現！ VNET フロントエンド VNET 統合 AppApp Router[BFF] Router Private Endpoint Next.js Static Web Apps Azure Functions （Flex Consumption） Cosmos DB GitHub Actions Azure Pipelines Bicep Zod による一貫した スキーマ定義

Web アプリをホストするための Azure 構成 ✓ Static Web Apps＋独立 Azure Functions＋Cosmos DB のサーバーレス構成 ✓ マネージド ID・VNET 統合を活用したセキュア構成 ✓ Next.js をフロントエンド/BFF 層として採用し、 保守性の高い Web アプリケーションを実現 ✓ Zod スキーマ共有による型安全なフルスタック開発と開発効率向上 ✓ Bicep による IaC と Azure リソース構成管理の実現 ✓ GitHub Actions / Azure Pipelines による CI/CD Next.js アプリを Azure で動かすなら 最低限これくらいの構成は欲しい！ 毎回アプリを新規に作るたびに この構成を用意するのは大変…

この構成をテンプレ化し開発を加速するツール SwallowKit

SwallowKit とは ✓ 下記 Next.js + Azure 構成を一括生成し開発プロセス全体を支援するツール VNET フロントエンド VNET 統合 AppApp Router[BFF] Router Private Endpoint Next.js Static Web Apps Azure Functions （Flex Consumption） GitHub Actions Azure Pipelines Bicep

SwallowKit とは ✓ 詳細はドキュメントサイトを参照 https://himanago.github.io/swallowkit/ja/

• https://himanago.github.io/swallowkit/ja/

代表的なコマンド コマンド npx swallowkit init <アプリ名> npx swallowkit create-model <モデル名> npx swallowkit scaffold <モデル名> npx swallowkit dev npx swallowkit provision -g <リソースグループ名> 説明 新しいプロジェクトを初期化します。最新の Next.js を使用してアプリを作成し、SwallowKit 専用の構成・設定を適用します。 データモデルを作成します。 モデルから CRUD コードを自動生成します。フ ロントエンドの画面に加え、BFF レイヤーと、 Azure Functions バックエンドのコードを生成し ます。 ローカル開発サーバー（Next.js + Azure Functions）を起動します。Cosmos DB Emulator を使用してローカルでの開発・デバッ グが可能です。 init 時に選択された構成をもとに生成された Bicep コードを使用し、Azureにリソースをプロ ビジョニングします。

前提条件 ✓ 共通 • Node.js 22.x • pnpm（任意。npm でも動作します） • Azure CLI (az) • Azure Functions Core Tools 4.x • Azure Cosmos DB Emulator (vNext 推奨) ✓ バックエンド別 • TypeScript/Node.js: 追加要件なし • Python: uv • C#: .NET 10 SDK と Azure Functions Core Tools 4.6.0 以上

Demo： SwallowKit 基本機能

Demo①：swallowkit init 初期生成時に構成を選べる • CI/CD：GitHub Actions / Azure Pipelines • Functions 言語：TypeScript / C# / Python → C#・Python は Zod スキーマが各言語の定義に変換される • Cosmos DB プラン：Free Tier / Serverless • VNET有無

Demo①：swallowkit init

Demo②：swallowkit dev

ローカル開発 ✓ Next.js + Functions を同時起動 • Static Web Apps CLI に似た機能（SWA CLI非依存の独自実装） ✓ Cosmos DB Emulator でローカル再現 • Linux ベース「vNext」の使用推奨 • Dockerで起動 • DB本体とWebUIでポートが異なる＆ 証明書不要なhttp接続 • DB）http://localhost:8081 • WebUI）http://localhost:1234 本番に近い状態での開発を手軽に実現！ https://learn.microsoft.com/ja-jp/azure/cosmos-db/emulator-linux

• https://learn.microsoft.com/ja-jp/azure/cosmos-db/emulator-linux

Demo③：swallowkit create-model / scaffold create-model: ひな形を作成 scaffold: CRUD 画面を生成

さらにローカル開発に便利な機能を搭載 ✓ シードデータ機能：あらかじめ用意した初期データ付きで動作確認できる！ npx swallowkit create-dev-seeds <environment> 任意の名称を指定し、現在のスキーマから JSON のシードテンプレートを生成 npx swallowkit dev --seed-env <environment> シードを指定し、Cosmos DB Emulator に投入した状態でアプリを起動 → 複数パターン作れる＆コードと一緒にチームで共有可能 npx swallowkit create-dev-seeds <environment> --from-emulator --force 現在の Cosmos DB Emulator のデータをシードとして保存 動作確認・デバッグが高速化！

Demo④：dev-seeds

Demo④：swallowkit provision まずはコードを GitHub へ上げる その後、Actions を止める

Demo④：swallowkit provision provision コマンドを実行し リージョンを指定 （メインと SWA 用） ※事前に az login と az account set が必要

Demo④：swallowkit provision

Demo⑤：CI/CD CI/CD の設定に必要な 各種シークレット情報を ターミナルに出力してくれる → GitHub Actions に設定

Demo⑤：CI/CD

VS Code 拡張機能 ✓ 各コマンドを VS Code のコマンドパレット等から使用できる拡張機能 https://marketplace.visualstudio.com/items?itemName=himanago.swallowkit-vscode

• https://marketplace.visualstudio.com/items?itemName=himanago.swallowkit-vscode

SwallowKit 導入によって： ≪Before≫ ≪After≫ • 毎回フロント＋API＋インフラを 手作業で構築 • 構成がテンプレ化/初期コストゼロ化 • ローカルとクラウドの差異が大きい • 構成バリエーションごとに 再設計が必要 これは小規模でも意外と重い • IaC・CI/CD 込みで即スタート • ローカル環境も含めて再現性あり • 設計のブレを抑制 「開発そのもの」に集中できる！

SwallowKit のコンセプト ✓ フレームワークではない • 生成されたプロジェクトは SwallowKit に依存しないため開発を縛らない ✓ あくまでも初期構成の自動生成ツール兼開発ツール • 「ベストプラクティスを早く再現する」ためのもの ✓ 想定ユースケース • 業務用の小〜中規模 Web アプリ • PoC / MVP • 社内ツール・LINEミニアプリなどの軽量サービス

さらに：AI フレンドリーな開発ツールキット ✓ コーディングエージェントに SwallowKit の思想を理解して 設計・実装を進めてもらうため、各種ドキュメントと MCP サーバーを標準装備 • コーディングエージェント向けの AGENTS.md 等を init 時に作成 • MCP 経由での機能呼び出しで決定論的にリソース・コードを生成 コーディングエージェントを利用して開発する場合でも、 プロジェクトやモデル作成、Scaffold、Bicep定義などが 決定論的に生成されることには大きな意味を持つ

Demo： コーディングエージェント連携

Demo⑥：GitHub Copilot CLI からの MCP 呼び出し

まとめ

AI が“コード”を速くする。SwallowKitが“構成”を速くする。 ✓ 「AI で作れる」時代にこそ“決定論的に再現できる基盤”に価値がある • AI に任せるほど構成はブレる ✓ SwallowKit が構成を自動化 ＆ コーディングエージェントとの連携までカバー • MCP・ドキュメント同梱で、コーディングエージェントが迷いにくい • コードや Azure リソースを決定論的に生成 • 成果物はツールに縛られないため AI コーディングの自由度を損ねない ✓ まずはここから： npx swallowkit init <app-name> （もし他に推しの定番構成があるなら、自分だけの CLI ツールを作ってみるのもアリかも）