---
title: 生成 AI 時代のアプリ公開基盤 - Azure Static Web Apps × SwallowKit で整える実用構成
tags:  #azure  
author: [Takumasa Hirabayashi](https://docswell.com/user/himanago)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LELM8D197R.jpg?width=480
description: 第60回 Tokyo Jazug Night での登壇資料です。 https://jazug.connpass.com/event/391733/
published: May 21, 26
canonical: https://docswell.com/s/himanago/Z4NJVN-swallowkit
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LELM8D197R.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4JMY6PWVJW.jpg)

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/


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PJR9P1YW79.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/PEXQ3YGVJX.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/3EK9Y345ED.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/L73W9GL175.jpg)

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 境界をフロント側で制御
責任分離と柔軟な構成を両立！


# Page. 7

![Page Image](https://bcdn.docswell.com/page/87DKG1NKJG.jpg)

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 でセキュアに接続
セキュアなサーバーレス構成を実現！


# Page. 8

![Page Image](https://bcdn.docswell.com/page/VJPK3Q53E8.jpg)

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 で統一管理


# Page. 9

![Page Image](https://bcdn.docswell.com/page/2EVV45PNEQ.jpg)

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 による一貫した
スキーマ定義


# Page. 10

![Page Image](https://bcdn.docswell.com/page/57GL16P5EL.jpg)

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 で動かすなら
最低限これくらいの構成は欲しい！
毎回アプリを新規に作るたびに
この構成を用意するのは大変…


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EQYD42LJP.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/KJ4WZQL571.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LE1YRPL27G.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GEWG12V2J2.jpg)

代表的なコマンド
コマンド
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にリソースをプロ
ビジョニングします。


# Page. 15

![Page Image](https://bcdn.docswell.com/page/47ZLPD44J3.jpg)

前提条件
✓ 共通
• 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 以上


# Page. 16

![Page Image](https://bcdn.docswell.com/page/YJ6WM13GJV.jpg)

Demo：
SwallowKit 基本機能


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GJ5MZ4LXJ4.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/LE3W9GL4E5.jpg)

Demo①：swallowkit init


# Page. 19

![Page Image](https://bcdn.docswell.com/page/8EDKG1N57G.jpg)

Demo②：swallowkit dev


# Page. 20

![Page Image](https://bcdn.docswell.com/page/V7PK3Q5DJ8.jpg)

ローカル開発
✓ 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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/2JVV45PGJQ.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/5EGL16QDJL.jpg)

さらにローカル開発に便利な機能を搭載
✓ シードデータ機能：あらかじめ用意した初期データ付きで動作確認できる！
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 のデータをシードとして保存
動作確認・デバッグが高速化！


# Page. 23

![Page Image](https://bcdn.docswell.com/page/4JQYD4KX7P.jpg)

Demo④：dev-seeds


# Page. 24

![Page Image](https://bcdn.docswell.com/page/K74WZQP2E1.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/LJ1YRP9KEG.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/GJWG12QP72.jpg)

Demo④：swallowkit provision


# Page. 27

![Page Image](https://bcdn.docswell.com/page/4EZLPDW673.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/Y76WM1GL7V.jpg)

Demo⑤：CI/CD


# Page. 29

![Page Image](https://bcdn.docswell.com/page/G75MZ4VM74.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/9J29RV3RER.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/DEY4D315JM.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/VJNY6V2478.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/YE9PL614J3.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/GE8DXZ4VED.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/LELM8D6R7R.jpg)

まとめ


# Page. 36

![Page Image](https://bcdn.docswell.com/page/4JMY6P5PJW.jpg)

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