Azure Functions を使用して Azure Static Web Apps に API を追加する
[アーティクル] 2024/05/13
24 人の共同作成者
フィードバック
この記事の内容
前提条件
静的 Web アプリの作成
API の作成
API を呼び出すフロントエンド アプリを更新する
フロントエンドと API をローカルで実行する
ワークフローに API の場所を追加する
変更をデプロイする
次のステップ
さらに 4 個を表示
Azure Functions が提供する Azure Static Web Apps に、サーバーレス API を追加することができます。 この記事では、Azure Static Web Apps サイトに API を追加してデプロイする方法について説明します。
注意
Static Web Apps で既定で提供されている機能は、セキュリティで保護された API エンドポイントを提供するようにあらかじめ構成されており、HTTP トリガーの機能のみをサポートしています。 スタンドアロンの Azure Functions アプリとの違いについては、Azure Functions での API のサポート を参照してください。
ヒント
nvm ツールを使用して、開発システムで複数のバージョンの Node.js を管理できます。
Windows では、Winget 経由で NVM for Windows をインストールできます。
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)
静的 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
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"
});
};
ヒント
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 を一緒にローカルで実行するために、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 キーを押します。
アプリを 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 アプリにアクセスして変更を確認します。