このチュートリアルでは、静的 Web アプリを使用して、 @azure/storage-blob パッケージを使用して Azure Storage BLOB にファイルを直接アップロードします。 API は、バレット キー パターンに従って SAS トークンを生成します。これにより、完全な資格情報を公開することなく、制限付きアクセスを安全に委任できます。
注意
このチュートリアルでは、従量課金プランで関数アプリをホストする方法について説明します。 マネージド ID で Microsoft Entra ID を使用して接続をセキュリティで保護する場合は、代わりに Flex Consumption プランでアプリをホストすることを検討する必要があります。 Flex Consumption レベルでは、マネージド ID と仮想ネットワーク統合の使用をサポートすることで、セキュリティが最適化されます。
前提 条件
- Azure サブスクリプション。Azure サブスクリプションをまだお持ちでない場合は、無料の Azure アカウントにサインアップできます。
- フォークしてリポジトリにプッシュする Github アカウント。
アプリケーション アーキテクチャ
このアプリケーション アーキテクチャには、次の 2 つの Azure リソースが含まれています。
- Azure Static Web Apps では、静的クライアントとリンクされた Azure Functions API の両方がホストされ、サービスによって API リソースが自動的に管理されます。
- Blob Storage 用の Azure Storage。
| ステップ | 説明 |
|---|---|
| 1 | お客様は、静的に生成された Web サイトに接続します。 Web サイトは、Azure Static Web Appsでホストされています。 |
| 2 | 顧客はその Web サイトを使用して、アップロードするファイルを選択します。 このチュートリアルでは、フロントエンド フレームワークは Vite React され、アップロードされるファイルはイメージ ファイルです。 |
| 3 | Web サイトは、Azure Functions API sas を呼び出して、アップロードするファイルの正確な ファイル名 に基づいて SAS トークンを取得します。 サーバーレス API は、Azure Blob Storage SDK を使用して SAS トークンを作成します。 API は、SAS トークンをクエリ文字列として含む、ファイルのアップロードに使用する完全な URL を返します。https://YOUR-STORAGE-NAME.blob.core.windows.net/YOUR-CONTAINER/YOUR-FILE-NAME?YOUR-SAS-TOKEN |
| 4 | フロントエンド Web サイトでは、SAS トークン URL を使用して、Azure Blob Storage に直接ファイルアップロードします。 |
ローカル環境とビルド環境
このチュートリアルでは、次の環境を使用します。
- GitHub Codespaces または Visual Studio Code を使用したローカル開発。
- GitHub Actions を使用してビルドとデプロイを行います。
GitHub を使用してサンプル アプリケーション リポジトリをフォークする
このチュートリアルでは、GitHub アクションを使用してサンプル アプリケーションを Azure にデプロイします。 デプロイを完了するには、GitHub アカウントとサンプル アプリケーション リポジトリのフォークが必要です。
- Web ブラウザーで、次のリンクを使用して、サンプル リポジトリの独自のアカウントのフォークを開始します。 Azure-Samples/azure-typescript-e2e-apps。
- サンプルをフォークする手順を完了するには、のメイン ブランチのみを使用します。
開発環境を構成する
開発コンテナー 環境は、このプロジェクトのすべての演習を完了するために必要なすべての依存関係と共に使用できます。 開発コンテナーは、GitHub Codespaces で実行することも、Visual Studio Code を使用してローカルで実行することもできます。
GitHub Codespaces は、Web 用の Visual Studio Code ユーザー インターフェイスとして GitHub によって管理される開発コンテナーを実行します。 最も簡単な開発環境では、GitHub Codespaces を使用して、このトレーニング モジュールを完了するための適切な開発者ツールと依存関係がプレインストールされるようにします。
重要
すべての GitHub アカウントでは、コア インスタンスが 2 つあり、毎月最大 60 時間無料で Codespaces を使用できます。 詳細については、GitHub Codespaces の毎月含まれるストレージとコア時間を参照してください。
Web ブラウザーで、サンプル リポジトリの GitHub フォークで、
mainボタンを選択して、フォークの ブランチに新しい GitHub Codespace を作成するプロセスを開始します。
[Codespaces] タブで、省略記号を選択
...。
特定の Codespaces 開発コンテナーを選択するには、+ 新規オプション を選択します。
次のオプションを選択し、[コードスペース 作成] を選択します。
- ブランチ:
main - 開発コンテナーの構成:
Tutorial: Upload file to storage with SAS Token - リージョン: 既定値を受け入れる
- マシンの種類: 既定値を受け入れる
- ブランチ:
コードスペースが起動するまで待ちます。 このスタートアップ プロセスには数分かかる場合があります。
コードスペースで新しいターミナルを開きます。
ヒント
メイン メニューを使用して、ターミナル メニュー オプションに移動し、新しいターミナル オプションを選択できます。
このチュートリアルで使用するツールのバージョンを確認します。
node --version npm --version func --versionこのチュートリアルでは、環境にプレインストールされている次のバージョンの各ツールが必要です。
ツール バージョン Node.js ≥18 エヌピーエム ≥ 9.5 Azure Functions のコア ツール ≥ 4.5098 ターミナルを閉じます。
このチュートリアルの残りの手順は、この開発コンテナーのコンテキストで行われます。
依存関係のインストール
このチュートリアルのサンプル アプリは、azure-upload-file-to-storage フォルダーにあります。 プロジェクト内の他のフォルダーを使用する必要はありません。
Visual Studio Code でターミナルを開き、プロジェクト フォルダーに移動します。
cd azure-upload-file-to-storageターミナルを分割して、クライアント アプリ用と API アプリ用の 2 つのターミナルを作成します。
いずれかのターミナルで、次のコマンドを実行して、API アプリの依存関係をインストールし、アプリを実行します。
cd api && npm installもう 1 つのターミナルで、コマンドを実行して、クライアント アプリをインストールします。
cd app && npm install
Visual Studio 拡張機能を使用したストレージ リソースの作成
サンプル アプリで使用する Azure Storage リソースを作成します。 ストレージは次の目的で使用されます。
- Azure Functions アプリのトリガー
- BLOB (ファイル) ストレージ
Azure Storage 拡張機能に移動します。
必要に応じて Azure にサインインします。
サブスクリプションを右クリックし、[
Create Resource...] を選択します。![[リソースの作成] 項目が強調表示されている右クリック メニューが表示された Azure Explorer の Visual Studio Code のスクリーンショット。](media/browser-file-upload-azure-storage-blob/visual-studio-code-azure-explorer-create-resource.png)
一覧から [ストレージ アカウント 作成] を選択します。
次の表を使用してプロンプトに従って、ストレージ リソースを作成する方法を理解します。
財産 価値 新しい Web アプリのグローバルに一意の名前を入力します。 ストレージ リソース名として、 fileuploadstorなどの一意の値を入力します。
この一意の名前は、次のセクションで使用するあなたのリソース名 です。 最大 24 文字の英数字を使用できます。 後で使用するには、この アカウント名 必要があります。新しいリソースの場所を選択します。 推奨される場所を使用します。 アプリの作成プロセスが完了すると、新しいリソースに関する情報を含む通知が表示されます。
ストレージ CORS の構成
ブラウザーを使用してファイルをアップロードするため、Azure Storage アカウントでクロスオリジン要求を許可するように CORS を構成する必要があります。 これらの CORS 設定は、手順を簡略化するためにこのチュートリアルで使用され、ベスト プラクティスやセキュリティを示す目的ではありません。 Azure Storage におけるCORS についてさらに学びましょう。
Azure Storage 拡張機能に移動します。 ストレージ リソースを右クリックし、[ポータル で開く]選択します。
[Azure portal ストレージ アカウント] [設定] セクションで、[リソース共有 (CORS) 選択します。
このチュートリアルでは、次のプロパティを使用して CORS を設定します。
- 許可されるオリジン:
* - 許可されるメソッド: パッチを除くすべての方法
- 許可されるヘッダー:
* - 公開されたヘッダー:
* - 最大年齢: 86400
- 許可されるオリジン:
保存を選択します。
ストレージへの匿名アクセスを許可する
ファイルのアップロード後、チュートリアル シナリオでは、表示のために BLOB へのパブリック アクセスが必要になります。 わかりやすくするために、このガイドでは、アップロードされたファイルに対する匿名アクセスを有効にします。
- Azure portal でパブリック アクセスを有効にするには、ストレージ アカウントの [の概要] ページを選択し、[プロパティ] セクションで [BLOB 匿名アクセス] 選択、[無効 ]選択します。
- [構成] ページで、[BLOB 匿名アクセスを許可する] を有効にします。
アップロード コンテナーを作成する
パブリックに読み取り可能な BLOB を含むプライベート コンテナーを作成します。
Azure portal ストレージ アカウントで、[データ ストレージ] セクションで、[コンテナー] を選択します。
+ コンテナー を選択して、次の設定で
uploadコンテナーを作成します。- 名前:
upload - パブリック アクセス レベル:
Blob
- 名前:
[作成] を選択します。
自分に BLOB データ アクセス権を付与する
リソースを作成している間は、コンテナーの内容を表示するアクセス許可がありません。 この認証は、特定の IAM ロール用に予約されています。 コンテナー内の BLOB を表示できるように、アカウントを追加します。
- Azure portal ストレージ アカウントで、 [ アクセス制御 (IAM)] を選択します。
- [ロールの割り当ての追加] を選択します。
- ストレージ BLOB データ共同作成者を検索して選択します。 次を選択します。
- [+ メンバーの選択] を選択します。
- アカウントを検索し、選択してください。
- [レビューと割り当て] を選択します。
- コンテナー を選択し、 コンテナーをアップロードします。 承認エラーなしでコンテナーに BLOB が存在しないことがわかります。
ストレージ リソースの資格情報を取得する
ストレージ リソースの資格情報は、Azure Functions API アプリで Storage リソースに接続するために使用されます。
Azure portal の [セキュリティとネットワーク] セクションで、[アクセス キー] を選択します。
Keyキーをコピーします。Visual Studio Code の
./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/apiフォルダーで、ファイルlocal.settings.json。 ファイルは Git によって無視されるため、ソース管理にチェックインされません。次の表を使用して、
local.settings.jsonの設定を更新します。財産 価値 説明 Azure_ストレージ_アカウント名 Azure Storage アカウント名 (例: fileuploadstor。ソース コードでストレージ リソースに接続するために使用されます。 Azure_Storage_AccountKey（Azure ストレージ アカウント キー） Azure Storage アカウント キー ソース コードでストレージ リソースに接続するために使用されます。 AzureWebJobsStorage (AzureのWebジョブストレージ) Azure Storage アカウントの接続文字列 Azure Functions ランタイムで状態とログを格納するために使用します。
同じアカウント資格情報を 2 回、キーとして 1 回、接続文字列として 1 回入力したように見える場合があります。 特にこの簡単なチュートリアルのために実行しました。 一般に、Azure Functions アプリには、別の目的で再利用されない別のストレージ リソースが必要です。 チュートリアルの後半で Azure 関数リソースを作成する場合、クラウド リソースの AzureWebJobsStorage 値を設定する必要はありません。 ソースコードで使用される Azure_Storage_AccountName と Azure_Storage_AccountKey の値を設定する必要があります。
API アプリを実行する
Functions アプリを実行して、Azure にデプロイする前に正しく動作することを確認します。
API アプリのターミナルで、次のコマンドを実行して API アプリを起動します。
npm run startAzure Functions アプリが起動するまで待ちます。 Azure Functions アプリのポート 7071 が利用可能になったことが通知されます。 また、API アプリのターミナルに API が一覧表示されます。
Functions: list: [POST,GET] http://localhost:7071/api/list sas: [POST,GET] http://localhost:7071/api/sas status: [GET] http://localhost:7071/api/status下部のウィンドウで [ポート] タブを選択し、7071 ポートを右クリックし、[ポートの可視性] 選択し、[パブリック 選択します。
このアプリをパブリックとして公開しない場合は、クライアント アプリから API を使用するとエラーが発生します。
API が動作してストレージに接続することをテストするには、下部ウィンドウの [ポート] タブで、ポート 7071 の [ローカル アドレス] 領域にある地球アイコンを選択します。 これにより、関数アプリに Web ブラウザーが開きます。
API ルートを URL アドレス バー (
/api/sas?container=upload&file=test.png) に追加します。 ファイルがまだコンテナーに含まれていないのは問題ありません。 API は、アップロード先に基づいて SAS トークンを作成します。JSON 応答は次のようになります。
{ "url":"https://YOUR-STORAGE-RESOURCE.blob.core.windows.net/upload/test.png?sv=2023-01-03&spr=https&st=2023-07-26T22%3A15%3A59Z&se=2023-07-26T22%3A25%3A59Z&sr=b&sp=w&sig=j3Yc..." }次の手順で使用する API URL のベースを (JSON オブジェクトの SAS トークン URL ではなく) ブラウザーのアドレス バーにコピーします。 ベースURLは、
/api/sasの前にあるすべてです。 このベース URL は、次のセクションでクライアント アプリの環境変数ファイルに貼り付けます。
クライアント アプリを構成して実行する
./azure-upload-file-to-storage/app/.env.sampleファイルの名前を.envに変更します。.envファイルを開き、前のセクションのベース URL をVITE_API_SERVERの値として貼り付けます。Codespaces 環境の例は、
VITE_API_SERVER=https://improved-space-fishstick-pgvxvxjpqgrh6qxp-7071.app.github.devのように見えるかもしれません。もう 1 つの分割ターミナルで、次のコマンドを使用してクライアント アプリを起動します。
npm run devターミナルから次の通知が返されるまで待ちます。ポート 5173でアプリを使用できます。
VITE v4.4.4 ready in 410 ms ➜ Local: https://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help下部ウィンドウで [ポート] タブを選択し、5173 ポートを右クリックし、地球アイコンを選択します。
Web アプリが表示されます。
![[ファイルの選択] ボタンが使用可能な Web アプリを示す Web ブラウザーのスクリーンショット。](media/browser-file-upload-azure-storage-blob/browser-app-select-file.png)
Web アプリを操作する:
- アップロードするローカル コンピューターからイメージ ファイル (*.jpg または *.png) を選択します。
- APIアプリからSASトークンを要求するには、ボタンの「SAS の取得」を選択してください。 応答には、ファイルを Storage にアップロードするために使用する完全な URL が表示されます。
- [アップロード] ボタン を選択して、イメージファイルを直接 Storage に送信します。
クライアント アプリと API アプリは、コンテナー化された開発環境で正常に連携しました。
コードの変更をコミットする
- Visual Studio Code で、ソース管理の [] タブを開きます。
-
+ アイコンを選択して、すべての変更をステージングします。 これらの変更には、このチュートリアルの
appフォルダーとapiフォルダーの新しい package-lock.json ファイルのみを含める必要があります。
静的 Web アプリを Azure にデプロイする
Azure Functions アプリではプレビュー機能を使用しています。 正しく機能するには、 West US 2 にデプロイする必要があります。
Visual Studio Code で、Azure エクスプローラーを選択します。
Azure Explorer でサブスクリプション名を右クリックし、
Create Resource...を選択します。リストで [Static Web App を作成] を選択します。
次の表を使用してプロンプトに従って、静的 Web アプリ リソースを作成する方法を理解します。
財産 価値 新しい Web アプリのグローバルに一意の名前を入力します。 ストレージ リソース名として、 fileuploadstorなどの一意の値を入力します。
この一意の名前は、次のセクションで使用するあなたのリソース名 です。 文字と数字のみを使用します。最大 24 文字です。 後で使用するには、この アカウント名 必要があります。新しいリソースの場所を選択します。 推奨される場所を使用します。 プロンプトに従って、次の情報を指定します。
プロンプト 入力する 新しいリソースのリソース グループを選択します。 ストレージ リソース用に作成したリソース グループを使用します。 新しい静的 Web アプリの名前を入力します。 既定の名前をそのまま使用します。 SKU を選択する このチュートリアルの無料 SKU を選択します。 サブスクリプションに無料の静的 Web アプリ リソースが既にある場合は、次の価格レベルを選択します。 既定のプロジェクト構造を構成するビルド プリセットを選択します。 カスタム を選択します。 アプリケーション コードの場所を選択 azure-upload-file-to-storage/appAzure Functions コードの保存場所を選択 azure-upload-file-to-storage/apiビルド出力のパスを入力します。.. dist
value は、アプリから静的 (生成された) ファイルへのパスです。新しいリソースの場所を選択します。 近くのリージョンを選択します。 プロセスが完了すると、通知ポップアップが表示されます。 [View/Edit Workflow]\(ワークフローの表示/編集\) を選択します。
リモート フォークには、Static Web Apps にデプロイするための新しいワークフロー ファイルがあります。 ターミナルで次のコマンドを使用して、そのファイルを環境にプルします。
git pull origin main/.github/workflows/にあるワークフロー ファイルを開きます。このチュートリアルの静的 Web アプリに固有のワークフローのセクションを次のように確認します。
###### 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: "/azure-upload-file-to-storage/app" # App source code path api_location: "/azure-upload-file-to-storage/api" # Api source code path - optional output_location: "dist" # Built app content directory - optional ###### End of Repository/Build Configurations ######サンプルの GitHub フォークに移動
https://github.com/<YOUR-ACCOUNT>/azure-typescript-e2e-apps/actions、Azure Static Web Apps CI/CDという名前のビルドとデプロイアクションが正常に完了したことを確認します。 このアクションは、完了するまでに数分かかる場合があります。アプリの Azure portal に移動し、設定の API セクションを表示します。 運用環境の バックエンド リソース名 は、API が正常にデプロイされたことを示
(managed)。(マネージド) を選択して、アプリに読み込まれた API の一覧を表示します。
- リスト
- SASの
- ステータス
[概要] ページに移動して、デプロイされたアプリの URL を見つけます。
アプリのデプロイが完了しました。
ストレージ リソース名とキーを使用して API を構成する
API が正しく動作する前に、アプリに Azure Storage リソース名とキーが必要です。 Azure Static Web Apps にデプロイすると、クライアント アプリと API は同じドメインからホストされるため、クライアント アプリの環境変数VITE_API_SERVERを設定する必要がなくなります。
引き続き Azure Explorer で、Static Web App リソース を右クリックし、[ポータル で開く]選択します。
[設定] セクションで 構成 を選択します。
次の表を使用して、アプリケーション設定を追加します。
財産 価値 説明 Azure_ストレージ_アカウント名 Azure Storage アカウント名 (例: fileuploadstor。ソース コードでストレージ リソースに接続するために使用されます。 Azure_Storage_AccountKey（Azure ストレージ アカウント キー） Azure Storage アカウント キー ソース コードでストレージ リソースに接続するために使用されます。 [構成] ページ [ を保存] を選択して、両方の設定を保存します。
Azure でデプロイされた静的 Web アプリを使用する
Web サイトを使用して、デプロイと構成が成功したことを確認します。
- Visual Studio Code で、Azure エクスプローラーで静的 Web アプリを右クリックし、[サイトを参照] を選択します。
- 新しい Web ブラウザー ウィンドウで、[ファイルの選択] 選択し、アップロードするイメージ ファイル (*.png または *.jpg) を選択します。
- [sas トークンを取得] を選択します。 このアクションは、ファイル名を API に渡し、ファイルのアップロードに必要な SAS トークン URL を受け取ります。
- [ファイル アップロード] を選択して、SAS トークン URL を使用してファイルをアップロードします。 ブラウザーには、アップロードされたファイルのサムネイルと URL が表示されます。
リソースのクリーンアップ
Visual Studio Code で、Azure エクスプローラーで [リソース グループ] を使用します。 リソース グループを右クリックし、 [ 削除] を選択します。
このアクションにより、ストレージと静的 Web アプリのリソースを含む、グループ内のすべてのリソースが削除されます。
トラブルシューティング
このサンプルに関する 問題を GitHub リポジトリで報告します。 問題に次の情報を含めてください。
- 記事の URL
- 問題が発生した記事内の手順またはコンテキスト
- 開発環境
サンプル コード
- GitHub リポジトリ: azure-upload-file-to-storage
関連コンテンツ
- Azure Blob Storage ドキュメント
- @azure/storage-blob
- Azure Static Web App