Azure Static Web Apps でウェブアプリをホストする

2026-01-31

構成

Static Web Apps でフロントエンドアプリをホストして、
Azure Functions を呼び出してみます。

構築手順

1. 作成

はじめに Static Web Apps を作成します。
Azure コンソールにて「静的 Wweb アプリ」を開き、作成ボタンを押しましょう。

プランは Free を選びます。
デプロイ方法は「その他」にします。トークンを使用してデプロイする方式です。

作成ボタンを押し、しばらく待ちます。
構築できたら「リソースに移動」というボタンを押して、リソースの詳細を確認しましょう。

2. デプロイトークンを取得

デプロイに必要なトークンを取得します。
「デプロイトークンを管理」というボタンを押すと、パネルが開きトークンを確認できます。

アプリを作成

コードを書きましょう。
ここでは下記のような構成にしました。

・フロントエンド: Vite, React Router v7 (SPA)
・バックエンド: Python

コード

</>

メモ

Static Web Apps の設定ファイルです。
ここでリダイレクト等を制御できます。

Static Web Apps CLI の設定ファイルです。
ビルドコマンドを記述します。

ここでは Python の依存パッケージをダウンロードしてます。

AWS Lambda にて、デプロイ時にコードを zip ファイルへ固める作業がありますが、それとだいたい一緒です。

ここでバックエンドを呼び出します。

バックエンドのコードです。
GET /api/info を実装します。

ビルドしましょう。

</>

$ pnpm i
$ pnpm build

デプロイ

デプロイしましょう。
手順2で取得したトークンをセットしてください。

</>

$ pnpm swa deploy --env production --deployment-token <DEPLOYMENT_TOKEN>

なお Static Web Apps には production 環境と preview 環境の2つがあります。
デフォルトでは preview 環境へデプロイされます。production 環境へデプロイするには --env production を渡す必要があります。

動作確認

ブラウザで確認しましょう。
Azure Functions で返している文字列が表示されているので、うまくデプロイできてそうです。

Azure コンソールも確認しましょう。
Azure Functions のデプロイに成功すると、コンソールに関数名が表記されます。

Links