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

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

Note

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

前提条件

静的 Web アプリの作成

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

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 という名前のフォルダーにプロジェクトが作成されます。

  1. F1 キーを押して、コマンド パレットを開きます。

  2. [Azure Static Web Apps: Create HTTP Function...] を選択します。Azure Functions 拡張機能のインストールを求めるメッセージが表示されたら、インストールしてから、このコマンドを再実行します。

  3. 確認を求められたら、次の値を入力します。

    Prompt
    言語を選択する JavaScript
    Provide a function name (関数名を指定してください) message

    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)
    
  4. 次に、メッセージをフロントエンドに返すように message 関数を変更します。 以下のコードを使用して、api/message/index.js の下の関数を更新します。

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

ヒント

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>

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

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

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

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

  1. Azure Static Web Apps CLI をインストールします。

    npm install -g @azure/static-web-apps-cli
    
  2. Azure Functions Core Tools V3 をインストールします。

    npm install -g azure-functions-core-tools@3
    

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

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

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

CLI を起動する

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

  1. リポジトリのルートで、start コマンドを使用して Static Web Apps CLI を起動します。 アプリのフォルダー構造が異なる場合は、引数を調整します。

    現在のフォルダー (src) と API フォルダー (api) を CLI に渡します。

    swa start src --api-location api
    
  2. CLI プロセスが開始したら、http://localhost:4280/ からアプリにアクセスします。 ページで API が呼び出され、その出力 (Hello from the API) が表示されていることを確認します。

  3. CLI を停止するには、Ctrl + C キーを押します。

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

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

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

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

  3. ファイルを保存します。

変更をデプロイする

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

  1. F1 キーを押して、コマンド パレットを開きます。

  2. Git: Commit All コマンドを選択します。

  3. コミット メッセージが表示されたら、「add API」と入力し、すべての変更をローカルの git リポジトリにコミットします。

  4. F1 キーを押して、コマンド パレットを開きます。

  5. Git: push コマンドを選択します。

    変更は GitHub のリモート リポジトリにプッシュされ、Static Web Apps GitHub Actions ワークフローがトリガーされ、アプリがビルドおよびデプロイされます。

  6. ワークフロー実行の状態を監視するには、GitHub でリポジトリを開きます。

  7. ワークフロー実行が完了したら、静的 Web アプリにアクセスして変更を確認します。

次のステップ