Azure Static Web Apps に Azure Functions で API を追加する

この記事の内容

• Azure Static Web Apps のクイックスタートシリーズ第2回として、API 追加手順を解説します
• Azure Functions を使って HTTP トリガー関数を作成し、Static Web Apps と連携させます
• Visual Studio Code の拡張機能を使ったローカル開発・デバッグの方法を紹介します
• フロントエンドの HTML から API を呼び出すスクリプトの書き方を説明します
• ローカルで動作確認後、GitHub にプッシュして本番環境に反映する流れを紹介します

はじめに

本記事は、Azure Static Web Apps クイックスタートシリーズの第2回です。前回は Static Web Apps を使って静的サイトを初めてデプロイしました。今回はその続きとして、Azure Functions を使って API を追加し、フロントエンドにロジックを組み込む手順を解説します。

前提条件

作業を始める前に、以下のツールや拡張機能がインストールされていることを確認してください。

• Node.js（推奨バージョン: 14.x）
• Visual Studio Code
• Azure Functions 拡張機能（VS Code 向け）
• Azure Static Web Apps 拡張機能（VS Code 向け）

Node.js はバージョンに注意が必要です。最新バージョンではなく、推奨バージョン（14.x） を使用してください。最新版をインストールしてしまうと、Azure Functions のローカル実行時に「サポートされているバージョンを使用してください」というエラーが表示されることがあります。

リポジトリの作成

まず、GitHub 上に新しいリポジトリを作成します。リポジトリが作成されたら、URL をコピーしてローカルにクローンしてください。

git clone <リポジトリURL>
cd <リポジトリ名>

Azure Functions プロジェクトの作成

クローンしたリポジトリ内に api フォルダーを作成し、その中に Azure Functions プロジェクトを作成します。

VS Code のコマンドパレット（Ctrl+Shift+P）を開き、「Azure Functions: Create New Project」 を選択します。

設定項目は以下のとおりです。

プロジェクトが作成されると、api フォルダー内に関数のファイル一式が生成されます。

関数のコードを更新する

次に、api/GetMessage/index.js を開き、関数がメッセージを返すように更新します。デフォルトの実装を以下のように変更し、レスポンスとして "Hello from the API" などのメッセージを返すようにします。

module.exports = async function (context, req) {
    context.res = {
        body: "Hello from the API"
    };
};

これはシンプルなスターター用の実装です。実際のアプリケーションではより複雑なロジックを実装しますが、チュートリアルとして動作確認を優先します。

バインディング設定（function.json）の確認

api/GetMessage/function.json を開き、HTTP トリガーのバインディング設定を確認します。

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get", "post"]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

この設定により、/api/GetMessage というルートで GET・POST リクエストを受け付けます。Static Web Apps では、/api/ 配下のパスが Functions にルーティングされます。

ローカルでの実行と確認

Functions のローカル起動

VS Code でデバッグを開始（F5）すると、Azure Functions のローカルエミュレーターが起動します。初回実行時に必要な npm パッケージのインストールが促される場合があります。

起動後、以下の URL にアクセスして動作を確認できます。

正常に動作していれば、JSON 形式でメッセージが返ってきます。確認できたら Shift+F5 でデバッグを停止します。

プロキシ設定（staticwebapp.config.json）の確認

Static Web Apps のローカル開発では、フロントエンドから API へのリクエストをプロキシする設定が必要です。プロジェクトルートの設定ファイルに以下のような設定が含まれていることを確認してください。

{
  "routes": [
    {
      "route": "/api/*",
      "allowedRoles": ["anonymous"]
    }
  ]
}

フロントエンドから API を呼び出す

index.html を開き、/api/GetMessage にアクセスしてレスポンスをページに表示するスクリプトを追加します。

<script>
  (async function() {
    const response = await fetch('/api/GetMessage');
    const message = await response.text();
    document.querySelector('#message').innerText = message;
  })();
</script>

また、メッセージを表示する HTML 要素を追加します。

<div id="message"></div>

ブラウザで確認すると、API から取得したメッセージがページ上に表示されます。

GitHub にプッシュして本番反映

ローカルでの動作確認が完了したら、変更を GitHub にプッシュします。

git add .
git commit -m "Add Azure Functions API"
git push

プッシュすると、GitHub Actions による CI/CD パイプラインが自動的に実行され、Azure Static Web Apps の本番環境に変更が反映されます。Azure ポータルまたは VS Code の拡張機能からデプロイの状況を確認できます。

まとめ

本記事では、Azure Static Web Apps に Azure Functions を使って API を追加する手順を解説しました。

• Azure Functions プロジェクトを api フォルダー内に作成し、HTTP トリガー関数を実装しました
• function.json のバインディング設定により、/api/ 配下のルートが Functions にルーティングされます
• VS Code の Azure Functions 拡張機能を使ってローカルで実行・デバッグができます
• フロントエンドの JavaScript から fetch で API を呼び出し、レスポンスをページに表示できます
• GitHub にプッシュするだけで本番環境への反映が自動化されています

Static Web Apps と Azure Functions の組み合わせにより、フロントエンドとサーバーレス API を一体的に管理できる構成が手軽に実現できます。ぜひ実際に手を動かして試してみてください。