Azure Functions を使用して Azure Static Web Apps に API を追加する

[アーティクル]
05/13/2024

Azure Functions が提供する Azure Static Web Apps に、サーバーレス API を追加することができます。この記事では、Azure Static Web Apps サイトに API を追加してデプロイする方法について説明します。

Note

Static Web Apps で既定で提供されている機能は、セキュリティで保護された API エンドポイントを提供するようにあらかじめ構成されており、HTTP トリガーの機能のみをサポートしています。スタンドアロンの Azure Functions アプリとの違いについては、Azure Functions での API のサポートを参照してください。

前提条件

アクティブなサブスクリプションを使う Azure アカウント。
- アカウントがない場合は、アカウントを無料で作成できます。
Visual Studio Code。
Visual Studio Code 用 Azure Static Web Apps 拡張機能。
Visual Studio Code 用 Azure Functions 拡張機能。
フロントエンドアプリと API を実行するための Node.js v18。

ヒント

nvm ツールを使用して、開発システムで複数のバージョンの Node.js を管理できます。 Windows では、Winget 経由で NVM for Windows をインストールできます。

静的 Web アプリの作成

API を追加する前に、「クイックスタート: Azure Static Web Apps を使用して静的サイトを初めて構築する」に従って、フロントエンドアプリケーションを作成して Azure Static Web Apps にデプロイします。

フロントエンドアプリケーションを Azure Static Web Apps にデプロイしたら、アプリリポジトリをクローンします。たとえば、git コマンドラインを使用してクローンするには、次のようにします。

git clone https://github.com/my-username/my-first-static-web-app

Visual Studio Code で、アプリのリポジトリのルートを開きます。フォルダ構造には、フロントエンドアプリのソースと、Static Web Apps の GitHub ワークフローが .github/workflows フォルダに入っています。

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
└── (folders and files from your static web app)

API の作成

静的 Web アプリの API 用に Azure Functions プロジェクトを作成します。既定では、Static Web Apps Visual Studio Code 拡張機能によって、リポジトリのルートにある api という名前のフォルダーにプロジェクトが作成されます。

F1 キーを押して、コマンドパレットを開きます。
[Azure Static Web Apps: Create HTTP Function...] を選択します。Azure Functions 拡張機能のインストールを求めるメッセージが表示されたら、インストールしてから、このコマンドを再実行します。
確認を求められたら、次の値を入力します。

プロンプト値

言語を選択する JavaScript

プログラミングモデルを選択する V3

Provide a function name (関数名を指定してください) message

ヒント

プログラミングモデル間の違いの詳細については、「Azure Functions 開発者ガイド」を参照してください

HTTP トリガー関数によって、Azure Functions プロジェクトが生成されます。これで、アプリのプロジェクト構造が次の例のようになります。
```
├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
├── api
│   ├── message
│   │   ├── function.json
│   │   └── index.js
│   ├── host.json
│   ├── local.settings.json
│   └── package.json
│
└── (folders and files from your static web app)
```
次に、メッセージをフロントエンドに返すように message 関数を変更します。以下のコードを使用して、api/message/index.js の下の関数を更新します。
```
module.exports = async function (context, req) {
    context.res.json({
        text: "Hello from the API"
    });
};
```

プロンプト	値
言語を選択する	JavaScript
プログラミングモデルを選択する	V3
Provide a function name (関数名を指定してください)	message

ヒント

API 関数をさらに追加するには、Azure Static Web Apps: Create HTTP Function... コマンドを再度実行します。

API を呼び出すフロントエンドアプリを更新する

フロントエンドアプリを更新して、/api/message の API を呼び出し、応答メッセージを表示します。

クイックスタートを使用してアプリを作成した場合は、次の手順に従って更新プログラムを適用します。

以下のコードを使用して src/index.html ファイルの内容を更新し、API 関数からテキストをフェッチして画面に表示します。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Vanilla JavaScript App</title>
</head>

<body>
    <main>
    <h1>Vanilla JavaScript App</h1>
    <p>Loading content from the API: <b id="name">...</b></p>
    </main>

    <script>
    (async function() {
        const { text } = await( await fetch(`/api/message`)).json();
        document.querySelector('#name').textContent = text;
    }());
    </script>
</body>

</html>

次のコードを使用して src/app/app.module.ts の内容を更新し、アプリで HttpClient を有効にします。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

以下のコードを使用して src/app/app.component.ts ファイルの内容を更新し、API 関数からテキストをフェッチして画面に表示します。

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div>{{message}}</div>`,
})
export class AppComponent {
  message = '';

  constructor(private http: HttpClient) {
    this.http.get('/api/message')
      .subscribe((resp: any) => this.message = resp.text);
  }
}

以下のコードを使用して src/App.js ファイルの内容を更新し、API 関数からテキストをフェッチして画面に表示します。

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    (async function () {
      const { text } = await( await fetch(`/api/message`)).json();
      setData(text);
    })();
  });

  return <div>{data}</div>;
}

export default App;

以下のコードを使用して src/App.vue ファイルの内容を更新し、API 関数からテキストをフェッチして画面に表示します。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: ""
    };
  },
  async mounted() {
    const { text } = await (await fetch("/api/message")).json();
    this.message = text;
  }
};
</script>

フロントエンドと API をローカルで実行する

フロントエンドアプリと API を一緒にローカルで実行するために、Azure Static Web Apps はクラウド環境をエミュレートする CLI を提供します。 CLI は、API を実行するために Azure Functions Core Tools を使用します。

コマンドラインツールをインストールする

必要なコマンドラインツールがインストールされていることを確認します。

npm install -g @azure/static-web-apps-cli

ヒント

swa コマンドラインをグローバルにインストールしない場合は、次の手順で swa の代わりに npx swa を使用できます。

フロントエンドアプリをビルドする

アプリでフレームワークを使用する場合は、アプリをビルドして出力を生成してから、Static Web Apps CLI を実行します。

アプリをビルドする必要はありません。

npm 依存関係をインストールし、アプリを dist/angular-basic フォルダーにビルドします。

npm install
npm run build --prod

npm 依存関係をインストールし、アプリを build フォルダーにビルドします。

npm install
npm run build

npm 依存関係をインストールし、アプリを dist フォルダーにビルドします。

npm install
npm run build

ローカルでアプリケーションを実行する

アプリを Static Web Apps CLI で起動して、フロントエンドアプリと API を一緒に実行します。この方法でアプリケーションの 2 つの部分を実行すると、CLI によってフロントエンドのビルド出力がフォルダから提供され、実行中のアプリから API にアクセスできるようになります。

リポジトリのルートで、start コマンドを使用して Static Web Apps CLI を起動します。アプリのフォルダー構造が異なる場合は、引数を調整します。
現在のフォルダー (src) と API フォルダー (api) を CLI に渡します。
```
swa start src --api-location api
```
ビルドの出力フォルダー (dist/angular-basic) と API フォルダー (api) を CLI に渡します。
```
swa start dist/angular-basic --api-location api
```
ビルドの出力フォルダー (build) と API フォルダー (api) を CLI に渡します。
```
swa start build --api-location api
```
ビルドの出力フォルダー (dist) と API フォルダー (api) を CLI に渡します。
```
swa start dist --api-location api
```
Windows ファイアウォールでは、Azure Functions ランタイムがインターネットにアクセスできるように要求するダイアログが表示される場合があります。許可を選択してださい。
CLI プロセスが開始したら、http://localhost:4280/ からアプリにアクセスします。ページで API が呼び出され、その出力 (Hello from the API) が表示されていることを確認します。
CLI を停止するには、Ctrl + C キーを押します。

ワークフローに API の場所を追加する

アプリを Azure にデプロイする前に、リポジトリの GitHub Actions ワークフローを更新して、API フォルダの正しい場所を指定します。

.github/workflows/azure-static-web-apps-<DEFAULT-HOSTNAME>.yml のワークフローを開きます。

プロパティ (api_location) を追加し、値を api に設定します。

###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "src" # App source code path
api_location: "api" # Api source code path - optional
output_location: "" # Built app content directory - optional
###### End of Repository/Build Configurations ######

注: 上記の api_location、app_location、output_location の値はフレームワークがない場合向けであり、これらの値はフレームワークに基づいて変わります。

ファイルを保存します。

変更をデプロイする

静的 Web アプリの変更を Azure で公開するには、リモートの GitHub リポジトリにコードをコミットしてプッシュします。

F1 キーを押して、コマンドパレットを開きます。
Git: Commit All コマンドを選択します。
コミットメッセージが表示されたら、「feat: add API」と入力し、すべての変更をローカルの git リポジトリにコミットします。
F1 キーを押して、コマンドパレットを開きます。
Git: push コマンドを選択します。

変更は GitHub のリモートリポジトリにプッシュされ、Static Web Apps GitHub Actions ワークフローがトリガーされ、アプリがビルドおよびデプロイされます。
ワークフロー実行の状態を監視するには、GitHub でリポジトリを開きます。
ワークフロー実行が完了したら、静的 Web アプリにアクセスして変更を確認します。

次のステップ

アプリケーションの設定の構成

次の方法で共有

Azure Functions を使用して Azure Static Web Apps に API を追加する

前提条件

静的 Web アプリの作成

API の作成

API を呼び出すフロントエンドアプリを更新する

フロントエンドと API をローカルで実行する

コマンドラインツールをインストールする

フロントエンドアプリをビルドする

ローカルでアプリケーションを実行する

ワークフローに API の場所を追加する

変更をデプロイする

次のステップ

フィードバック

その他のリソース

次の方法で共有

Azure Functions を使用して Azure Static Web Apps に API を追加する

前提条件

静的 Web アプリの作成

API の作成

API を呼び出すフロントエンド アプリを更新する

フロントエンドと API をローカルで実行する

コマンド ライン ツールをインストールする

フロントエンド アプリをビルドする

ローカルでアプリケーションを実行する

ワークフローに API の場所を追加する

変更をデプロイする

次のステップ

フィードバック

その他のリソース

API を呼び出すフロントエンドアプリを更新する

コマンドラインツールをインストールする

フロントエンドアプリをビルドする