演習 - サーバーレスバックエンドを構築する

4 分

この演習では、アプリケーションのバックエンドを作成します。ユーザーが Blob Storage コンテナーに画像をアップロードできるように、オンデマンドの Shared Access Signature を生成する REST API として機能する Azure 関数を作成します。この演習では、Azure 関数を作成し、必要なライブラリをインストールして、オンデマンドの SAS キーを生成するコードを記述する方法について説明します。

Azure Function REST API を作成する

Visual Studio Code を開きます。
プロジェクトフォルダーを作成し、upload_image という名前を付けます。 Visual Studio Code で、[ファイル]>[フォルダーを開く] の順に選択し、先ほど作成したフォルダーに移動し、[フォルダーの選択] を選択します。
ウィンドウの左側にある [拡張機能] を選択し、Azure Functions を検索します。必要に応じて、拡張機能をインストールします。
次に、Azure 関数を作成します。キーボードの Ctrl + Shift + P キーを押して、コマンドパレットを開きます。
「Azure Functions: 新しいプロジェクトの作成」と入力し、ウィンドウで [Azure Functions: 新しいプロジェクトの作成] タスクを選択します。
upload_image フォルダーを選択します。
言語として [JavaScript] を選択します。
[モデル V3] を選択します。
[HttpTrigger] を選択し、関数に credentials という名前を付け、認証レベルとして [匿名] を選択します。
Azure portal で、先ほど作成したストレージアカウントに移動します。
左側のメニューの [セキュリティとネットワーク] の下にある [アクセスキー] を選択します。
最初の [接続文字列] の横にある [表示] を選択し、[コピー] アイコンを選択して、ストレージアカウントの接続文字列をコピーします。
Visual Studio Code に戻り、プロジェクトの AzureWebJobsStorage の local.settings.json キーに接続文字列を追加し、ファイルを保存します。
```
{
    "IsEncrypted": false,
    "Values": {
      "AzureWebJobsStorage": "<YOUR_CONNECTION_STRING>",
      "FUNCTIONS_WORKER_RUNTIME": "node"
    }
}    
```
[ターミナル]>[新しいターミナル] を選択します。左上にあるドロップダウンで、ターミナルの種類として [Bash] を選択します。次のコマンドを使用して、SAS トークンの生成に使用される Azure SDK 依存関係をインストールします。
```
npm install @azure/storage-blob
```

共有アクセス署名を生成する

重要

このコード例では、接続文字列を使用してストレージアカウントへのアクセスを承認します。この設定は例です。接続文字列とアカウントアクセスキーは、アプリケーションコードにおいて慎重に使用する必要があります。アカウントアクセスキーを紛失した場合、または誤ってセキュリティで保護されていない場所に置いた場合には、サービスが脆弱になる可能性があります。アクセスキーを持つすべてのユーザーは、ストレージアカウントに対する要求を承認でき、実質的にすべてのデータにアクセスできます。

最適なセキュリティのため、Microsoft では、可能な限り、Azure リソース用マネージド ID を使用して、BLOB、キュー、テーブルのデータに対する要求を承認することをお勧めします。詳細については、「Microsoft Entra ID を使用して BLOB へのアクセスを承認する」をご覧ください。

index.js フォルダーから credentials ファイルを開き、下部に次の関数を追加します。
```
function generateSasToken(connectionString, container, permissions) {
    const { accountKey, accountName, url } = extractConnectionStringParts(connectionString);
    const sharedKeyCredential = new StorageSharedKeyCredential(accountName, accountKey.toString('base64'));

    var expiryDate = new Date();
    expiryDate.setHours(expiryDate.getHours() + 2);

    const sasKey = generateBlobSASQueryParameters({
        containerName: container,
        permissions: ContainerSASPermissions.parse(permissions),
        expiresOn: expiryDate,
    }, sharedKeyCredential);

    return {
        sasKey: sasKey.toString(),
        url: url
    };
}
```
関数 generateSasToken に Azure Blob Storage 接続文字列、コンテナー名、アクセス許可文字列が受け渡され、それらを使用して SAS トークンが作成されます。 StorageSharedKeyCredential は、接続文字列に基づいて構築されます。この資格情報は generateBlobSASQueryParameters によって、Shared Access Signature を生成するために使用されます。これにより、画像のアップロード時に送信されたパラメーターは、ストレージアカウントの資格情報に対して確実に認証できるようになります。最後に、expiresOn 値として 2 時間を指定します。 Shared Access Signature は 2 時間で期限切れになります。これにより、不正使用を防ぐのに役立つだけでなく、ユーザーが自分の画像をアップロードするのに十分な時間を確保できます。
credentials フォルダー内にファイルを作成し、utils.js という名前を付けます。このファイルの内容を、自分のファイルに貼り付けます (utils.js)。ファイルを保存します。
index.js ファイルで、コードで extractConnectionStringParts 関数を要求します。これにより、ストレージアカウント接続文字列から accountKey、accountName、url が抽出されます。

require セクションは次のようになります。
```
const {
    StorageSharedKeyCredential,
    ContainerSASPermissions,
    generateBlobSASQueryParameters
} = require("@azure/storage-blob");
const { extractConnectionStringParts } = require('./utils.js');
```

generateSasToken の結果をクライアントに送信するサーバーレス関数エントリポイントを実装します。

module.exports = async function (context, req) {
    const permissions = 'c';
    const container = 'images';
    context.res = {
        body: generateSasToken(process.env.AzureWebJobsStorage, container, permissions)
    };
    context.done();
};

すべてのコードを入力し終わると、index.js ファイルは次のようになります。

const {
    StorageSharedKeyCredential,
    ContainerSASPermissions,
    generateBlobSASQueryParameters
} = require("@azure/storage-blob");
const { extractConnectionStringParts } = require('./utils.js');

    module.exports = async function (context, req) {
    const permissions = 'c';
    const container = 'images';
    context.res = {
        body: generateSasToken(process.env.AzureWebJobsStorage, container, permissions)
    };
    context.done();
};

function generateSasToken(connectionString, container, permissions) {
    const { accountKey, accountName, url } = extractConnectionStringParts(connectionString);
    const sharedKeyCredential = new StorageSharedKeyCredential(accountName, accountKey.toString('base64'));

    var expiryDate = new Date();
    expiryDate.setHours(expiryDate.getHours() + 2);

    const sasKey = generateBlobSASQueryParameters({
        containerName: container,
        permissions: ContainerSASPermissions.parse(permissions),
        expiresOn: expiryDate,
    }, sharedKeyCredential);

    return {
        sasKey: sasKey.toString(),
        url: url
    };
}

サーバーレスバックエンドが正常に作成されました。次の手順では、画像を Azure Blob Storage にアップロードできるフロントエンドを実装します。

演習 - サーバーレス バックエンドを構築する

Azure Function REST API を作成する

共有アクセス署名を生成する

フィードバック

演習 - サーバーレスバックエンドを構築する