JavaScript を使用してイメージを Azure Storage Blob にアップロードする
静的 Web アプリを使用して、Azure Storage SAS トークンを使用して Azure Storage @azure/storage-blob npm パッケージを使用して Azure Storage BLOB にファイルをアップロードします。
前提条件
- Azure サブスクリプション: Azure サブスクリプションをまだ取得していない場合は、無料の Azure アカウントにサインアップできます。
- フォークしてリポジトリにプッシュするための GitHub アカウント。
アプリケーションのアーキテクチャ
このアプリケーション アーキテクチャには、次の 2 つの Azure リソースが含まれています。
- 静的に生成されたクライアント アプリケーション用の Azure Static Web Apps。 このリソースには、マネージド Azure Functions API も用意されています。 マネージドとは、静的 Web Apps リソースが独自に使用するために 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 を使用してビルドとデプロイを行います。
1. GitHub を使用してサンプル アプリケーション リポジトリをフォークする
このチュートリアルでは、GitHub アクションを使用してサンプル アプリケーションを Azure にデプロイします。 デプロイを完了するには、GitHub アカウントとサンプル アプリケーション リポジトリのフォークが必要です。
- Web ブラウザーで、次のリンクを使用して、サンプル リポジトリの独自のアカウントのフォークを開始します: Azure-Samples/azure-typescript-e2e-apps。
- メイン ブランチのみでサンプルをフォークする手順を完了します。
2. 開発環境を構成する
このプロジェクトのすべての演習を完了するために必要なすべての依存関係が付属する開発コンテナー環境が利用できます。 開発コンテナーは、GitHub Codespaces で実行することも、Visual Studio Code をローカルで使用して実行することもできます。
GitHub Codespaces は、Visual Studio Code for the Web をユーザー インターフェイスとして使用して、GitHub によって管理される開発コンテナーを実行します。 正しい開発者ツールと、このトレーニング モジュールを完了するために事前インストールされた依存関係を持つ最も簡単な開発環境として、GitHub Codespaces を使用します。
重要
すべての GitHub アカウントでは、2 つのコア インスタンスで毎月最大 60 時間無料で Codespaces を使用できます。 詳細については、「GitHub Codespaces に月単位で含まれるストレージとコア時間」を参照してください。
Web ブラウザーで、サンプル リポジトリの GitHub フォークで、CODE ボタンを選択してフォークのブランチに
main新しい GitHub Codespace を作成するプロセスを開始します。
[Codespaces] タブで 、省略記号
...を選択します。
[+ 新規] オプションを選択して、特定の Codespaces 開発コンテナーを選択します。
次のオプションを選択し、[コード空間の作成] を選択 します。
- 支店：
main - 開発コンテナーの構成:
Tutorial: Upload file to storage with SAS Token - リージョン: 既定値を受け入れる
- マシンの種類: 既定値を受け入れる
- 支店：
Codespace が起動するまで待ちます。 この起動プロセスには数分かかることがあります。
codespace で新しいターミナルを開きます。
ヒント
メイン メニューを使用して [ターミナル] メニュー オプションに移動し、[新しいターミナル] オプションを選択できます。
このチュートリアルで使用するツールのバージョンを確認します。
node --version npm --version func --versionこのチュートリアルでは、環境にプレインストールされている次のバージョンの各ツールが必要です。
ツール バージョン Node.js ≥ 18 npm ≥ 9.5 Azure Functions Core Tools ≥ 4.5098 ターミナルを閉じます。
このチュートリアルの残りの手順は、この開発コンテナーのコンテキストで行われます。
3. 依存関係をインストールする
このチュートリアルのサンプル アプリはフォルダーにあります 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
4. Visual Studio 拡張機能を使用して Storage リソースを作成する
サンプル アプリで使用するストレージ リソースを作成します。 ストレージは次の目的で使用されます。
- Azure Functions アプリのトリガー
- BLOB (ファイル) ストレージ
Azure Storage 拡張機能に移動します。
必要に応じて Azure にサインインします。
サブスクリプションを右クリックし、[
Create Resource...] を選択します。
一覧から [ストレージ アカウントの作成] を選択します。
Storage リソースの作成方法を理解するために次の表を使用しながら、プロンプトに従います。
プロパティ 値 新しい Web アプリのグローバルに一意の名前を入力します。 ストレージ リソース名に一意の値 (例 fileuploadstor: ) を入力します。
この一意の名前は、次のセクションで使用されるリソース名です。 文字と数字のみを使用します。長さは 24 文字までです。 このアカウント名は、後で使用するために必要です。新しいリソースの場所の選択。 推奨される場所を使用します。 アプリの作成プロセスが完了すると、新しいリソースに関する情報を含む通知が表示されます。
5. ストレージ CORS を構成する
ブラウザーを使用してファイルをアップロードするため、Azure Storage アカウントでクロスオリジン要求を許可するように CORS を構成する必要があります。
Azure Storage 拡張機能に移動します。 ストレージ リソースを右クリックし、[ポータルで開く] を選択します。
[Azure portal ストレージ アカウント 設定] セクションで、[リソース共有 (CORS)] を選択します。
このチュートリアルでは、次のプロパティを使用して CORS を設定します。
- 許可される配信元:
* - 許可されるメソッド: パッチを除くすべての方法
- 許可されるヘッダー:
* - 公開されたヘッダー:
* - 最大年齢: 86400
これらの設定は、手順を簡略化するためにこのチュートリアルで使用され、ベスト プラクティスやセキュリティを示す目的ではありません。 Azure Storage の CORS の詳細を 確認します。
- 許可される配信元:
[保存] を選択します。
6. ストレージへの匿名アクセスを許可する
ファイルのアップロードは、時間制限付きのアクセス許可が制限された SAS トークンを作成するときに、クライアントからセキュリティで保護されます。 ただし、ファイルがアップロードされたら、このチュートリアルシナリオでは、誰でもファイルを表示する必要があります。 そのためには、ストレージのアクセス許可をパブリックにアクセスできるように変更する必要があります。
アカウントはパブリックにアクセスできますが、各コンテナーと各 BLOB にはプライベート アクセスを持つことができます。 このチュートリアルでは、より安全ですが複雑すぎる方法は、SAS トークンを使用して 1 つのストレージ アカウントにアップロードし、パブリック アクセスを持つ別のストレージ アカウントに BLOB を移動することです。
- Azure portal でパブリック アクセスを有効にするには、ストレージ アカウントの [概要] ページを選択し、[プロパティ] セクションで [BLOB 匿名アクセス] を選択し、[無効] を選択します。
- [構成] ページで、[BLOB 匿名アクセスを許可する] を有効にします。
7. アップロード コンテナーを作成する
引き続き Azure portal ストレージ アカウントで、[データ ストレージ] セクションで [コンテナー] を選択します。
[+ コンテナー] を選択して、次の設定でコンテナーを作成します
upload。- 名前:
upload - パブリック アクセス レベル:
Blob
- 名前:
［作成］ を選択します
8. 自分に BLOB データ アクセス権を付与する
リソースを作成している間は、コンテナーの内容を表示するアクセス許可がありません。 これは、特定の IAM ロール用に予約されています。 コンテナー内の BLOB を表示できるように、アカウントを追加します。
- 引き続き Azure portal ストレージ アカウントで、アクセス制御 (IAM) を選択します。
- [ロールの割り当ての追加] を選択します。
- ストレージ BLOB データ共同作成者を検索して選択 します。 [次へ] を選択します。
- + メンバーの選択 を選択します。
- アカウントを検索して選択します。
- [レビューと割り当て] を選択します。
- [コンテナー] を選択し、アップロード コンテナーを選択します。 承認エラーなしでコンテナーに BLOB が存在しないことがわかります。
9. ストレージ リソースの資格情報を取得する
ストレージ リソースの資格情報は、Azure Functions API アプリで Storage リソースに接続するために使用されます。
Azure portal の [セキュリティとネットワーク] セクションで、[アクセス キー] を選択します。
API ファイルは次の場所にあります
./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/api。API フォルダーで、ファイルの名前を次の値に
local.settings.json.sample変更しますlocal.settings.json。 ファイルは Git によって無視されるため、ソース管理にチェックされません。次の表を使用するための
local.settings.json設定を更新します。プロパティ 値 説明 Azure_Storage_AccountName Azure Storage アカウント名(例: fileuploadstor.ソース コードでストレージ リソースに接続するために使用されます。 Azure_Storage_AccountKey Azure ストレージ アカウント キー ソース コードでストレージ リソースに接続するために使用されます。 AzureWebJobsStorage Azure Storage アカウントの接続文字列 Azure Functions ランタイムで状態とログを格納するために使用します。
同じアカウント資格情報を 2 回、キーとして 1 回、接続文字列として 1 回入力したように見える場合があります。 この簡単なチュートリアルでは、特にこれを行いました。 一般に、Azure Functions アプリには、別の目的で再利用されない別のストレージ リソースが必要です。 チュートリアルの後半で Azure 関数リソースを作成するときに、クラウド リソースの AzureWebJobsStorage 値を設定する必要はありません。 ソース コードで使用される Azure_Storage_AccountName と Azure_Storage_AccountKey の値のみを設定する必要があります。
10. 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 ブラウザーが開きます。
URL アドレス バーに API ルートを追加します
/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です。
11. クライアント アプリを構成して実行する
./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 アプリを操作する:
- アップロードするローカル コンピューターからイメージ ファイル (*.jpg または *.png) を選択します。
- [SAS の取得] ボタンを選択して、API アプリに SAS トークンを要求します。 応答には、ファイルを Storage にアップロードするために使用する完全な URL が表示されます。
- イメージ ファイルを Storage に直接送信するには、[アップロード ] ボタンを選択します。
クライアント アプリと API アプリは、コンテナー化された開発環境で正常に連携しました。
12. コードの変更をコミットする
- Visual Studio Code で、[ソース管理] タブを開きます。
- アイコンを + 選択して、すべての変更をステージングします。 これらの変更には、このチュートリアルの
app新しい package-lock.json ファイルとapiフォルダーのみを含める必要があります。
13. 静的 Web アプリを Azure にデプロイする
Azure Functions アプリはプレビュー機能を使用しています。正しく機能するには、米国西部 2 にデプロイする必要があります。
Visual Studio Code で、Azure エクスプローラーを選択します。
Azure エクスプローラーで、サブスクリプション名を右クリックし、 を選択
Create Resource...します。[Create Static Web App from list]\(静的 Web アプリの作成\) を一覧から選択します。
次の表を使用してプロンプトに従って、静的 Web アプリ リソースを作成する方法を理解します。
プロパティ 値 新しい Web アプリのグローバルに一意の名前を入力します。 ストレージ リソース名に一意の値 (例 fileuploadstor: ) を入力します。
この一意の名前は、次のセクションで使用されるリソース名です。 文字と数字のみを使用します。長さは 24 文字までです。 このアカウント名は、後で使用するために必要です。新しいリソースの場所の選択。 推奨される場所を使用します。 プロンプトに従って、次の情報を指定します。
Prompt Enter 新しいリソース用のリソース グループの選択。 Storage リソース用に作成したリソース グループを使用します。 新しい静的 Web アプリの名前の入力。 既定の名前をそのまま使います。 SKU を選択する このチュートリアル用に無料の SKU を選択します。 サブスクリプションに無料の静的 Web アプリ リソースが既にある場合は、次の価格レベルを選択します。 既定のプロジェクト構造を構成するには、ビルド プリセットを選択します。 カスタムを選択します。 アプリケーション コードの場所を選択する azure-upload-file-to-storage/appAzure Functions コードの場所の選択 azure-upload-file-to-storage/apiビルド出力のパスを入力します... dist
これは、アプリから (生成された) 静的ファイルまでのパスです。新しいリソースの場所の選択。 近くのリージョンを選択します。 プロセスが完了すると、通知ポップアップが表示されます。 [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 セクションを表示します。 運用環境のバックエンド リソース名は、
(managed)API が正常にデプロイされたことを示しています。アプリに読み込まれた API の一覧を表示するには、次を選択 (マネージド) します。
- list
- Sas
- status
[概要] ページに移動して、デプロイされたアプリの URL を 見つけます。
アプリのデプロイが完了しました。
14. ストレージ リソース名とキーを使用して API を構成する
API が正しく動作する前に、アプリに Azure Storage リソース名とキーが必要です。
引き続き Azure エクスプローラーで、静的 Web アプリ リソースを右クリックし、[ポータルで開く] を選択します。
[設定] セクションで [構成] を選択します。
次の表を使用して、アプリケーション設定を追加します。
プロパティ 値 説明 Azure_Storage_AccountName Azure Storage アカウント名(例: fileuploadstor.ソース コードでストレージ リソースに接続するために使用されます。 Azure_Storage_AccountKey Azure ストレージ アカウント キー ソース コードでストレージ リソースに接続するために使用されます。 [構成] ページで [保存] を選択して、両方の設定を保存します。
Note
クライアント アプリと API は同じ do からホストされるため、クライアント アプリの env 変数 VITE_API_Standard Edition RVER を設定する必要はありませんメイン。
15. Azure でデプロイされた静的 Web アプリを使用する
Web サイトを使用して、デプロイと構成が成功したことを確認します。
- Visual Studio Code で、Azure エクスプローラーから静的 Web アプリを右クリックし、[サイトの参照] を選択します。
- 新しい Web ブラウザー ウィンドウで、[ファイルの選択] を選択し、アップロードするイメージ ファイル (*.png または *.jpg) を選択します。
- [Sas トークンの取得] を選択します。 このアクションは、ファイル名を API に渡し、ファイルのアップロードに必要な SAS トークン URL を受け取ります。
- SAS トークン URL を使用してファイルをアップロードするには、[ファイルのアップロード] を選択します。 ブラウザーには、アップロードされたファイルのサムネイルと URL が表示されます。
16. リソースをクリーンアップする
Visual Studio Code で、リソース グループの Azure エクスプローラーを使用し、リソース グループを右クリックし、[削除] を選択 します。
これにより、Storage と静的 Web アプリのリソースを含む、グループ内のすべてのリソースが削除されます。
トラブルシューティング
次に示す GitHub リポジトリで、このサンプルに関する問題を報告します。 次の問題を含めます。
- 記事の URL
- 問題が発生した記事内の手順またはコンテキスト
- 開発環境
サンプル コード
- GitHub リポジトリ: azure-upload-file-to-storage
関連するコンテンツ
このアプリを引き続き使用する場合は、次のいずれかの選択肢を使用して、アプリを Azure にデプロイしてホスティングする方法について学習してください。
- Azure Blob Storage のドキュメント
- @azure/storage-blob
- Azure 静的 Web アプリ
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示