ラボ 01: サービス内容として Azure プラットフォームで Web アプリケーションをビルドする

Microsoft Azure ユーザーインターフェイス

Microsoft クラウドツールの動的な性質を考慮すると、このトレーニングコンテンツの開発の後に発生する Azure UI の変更に気付くかもしれません。その結果、ラボの指示とラボの手順が正しく整合しなくなる可能性があります。

Microsoft は、コミュニティから必要な変更の通知があったときに、このトレーニングコースを更新します。ただし、クラウドの更新は頻繁に発生するため、このトレーニングコンテンツの更新の前に UI の変更に気付く可能性があります。 これが発生した場合は、その変更に適応し、ラボでは必要に応じてそれらに対応してください。

Instructions

開始する前に

ラボ環境にサインインする

次の資格情報を使用して Windows 11 仮想マシン (VM) にサインインします。

ユーザー名: Admin
パスワード: Pa55w.rd

注: 仮想ラボ環境に接続するための手順は、インストラクターから提供されます。

インストールされているアプリケーションを確認する

Windows 11 デスクトップでタスクバーを探します。タスクバーには、このラボで使用する次のようなアプリケーションのアイコンが含まれています。

Microsoft Edge
エクスプローラー
ターミナル
Visual Studio Code

課題シナリオ

このラボでは、PaaS モデルを使用して Azure 上に Web アプリケーションを作成する方法を確認します。 Web アプリケーションが作成された後、Apache Kudu zip デプロイオプションを使用して既存の Web アプリケーションファイルをアップロードする方法について学習します。その後、新しくデプロイした Web アプリケーションを表示してテストします。

'’この ビデオリンク を右クリックし、[新しいタブまたは新しいウィンドウでリンクを開く] を選択して、このビデオを表示します。’’

アーキテクチャの図

ユーザーがサービス内容として Azure プラットフォームで Web アプリケーションをビルドしているようすを示すアーキテクチャの図。

演習 1: Azure Storage と Azure App Service の Web Apps 機能を使用してバックエンド API をビルドする

タスク 1: Azure portal を開く

タスクバーで、Microsoft Edge アイコンを選択します。
ブラウザーウィンドウで、Azure portal (https://portal.azure.com) に移動してから、このラボで使用するアカウントでサインインします。

注: Azure portal に初めてサインインしている場合は、ポータルのツアーが表示されます。このツアーをスキップする場合は、 [後で行う] を選択してポータルの使用を開始します。

タスク 2: ストレージアカウントを作成する

Azure portal で、 [リソース、サービス、ドキュメントの検索] テキストボックスを使用してストレージアカウントを検索し、結果の一覧で [ストレージアカウント] を選択します。
[ストレージアカウント] ブレードで [+ 作成] を選択します。

[ストレージアカウントを作成する] ブレードの [基本] タブで、次のアクションを実行し、 [確認] を選択します。

設定	アクション
[サブスクリプション] ドロップダウンリスト	既定値のままにします
[リソースグループ] セクション	[新規作成] を選択し、「ManagedPlatform」と入力して [OK] を選択します
[ストレージアカウント名] テキストボックス	「imgstor [ご自分の名前] 」と入力します。
[リージョン] ドロップダウンリスト	[(米国) 米国東部] を選択します
[パフォーマンス] セクション	[Standard] オプションを選択します
[冗長性] ドロップダウンリスト	[ローカル冗長ストレージ (LRS)] を選択します

次のスクリーンショットには、 [ストレージアカウントを作成する] ブレードの [基本] タブで構成された設定が表示されています。

[ストレージアカウントを作成する] ブレード

[確認] タブで、前の手順で選択したオプションを確認します。
[作成] を選択して、指定した構成を使用してストレージアカウントを作成します。

注: 作成タスクが完了するまで待ってから、このラボを続行してください。
[概要] ブレードで、 [リソースに移動] ボタンを選択して、新しく作成されたストレージアカウントのブレードに移動します。
[ストレージアカウント] ブレードの [セキュリティとネットワーク] セクションで、 [アクセスキー] を選択します。
[アクセスキー] ブレードで、接続文字列のいずれかを確認し ([表示] ボタンを使用)、[接続文字列] ボックスの値をメモ帳に記録します。キーはプラットフォームで管理される暗号化キーであり、このラボでは使用しません。

注: どの接続文字列を選択しても問題ありません。これらは交換可能です。
メモ帳を開き、コピーした接続文字列の値をメモ帳に貼り付けます。この値は、このラボの後の方で使用します。

タスク 3: サンプル BLOB をアップロードする

[ストレージアカウント] ブレードの [データストレージ] セクションで、 [コンテナー] リンクを選択します。
[コンテナー] ブレードで、 [+ コンテナー] を選択します。
[新しいコンテナー] ウィンドウで、次のアクションを実行し、[作成] を選択します。

設定アクション

[名前] テキストボックス「images」と入力します
[コンテナー] ブレードで、新しく作成された images コンテナーを選択します。
[images] ブレードで、 [アップロード] を選択します。

設定	アクション
[名前] テキストボックス	「images」と入力します

[BLOB のアップロード] ウィンドウで、次のアクションを実行します。

設定	アクション
[ファイル] セクション	[ファイルの参照] を選択するか、ドラッグアンドドロップ機能を使用します
[エクスプローラー] ウィンドウ	Allfiles (F):\Allfiles\Labs\01\Starter\Images を参照し、grilledcheese.jpg ファイルを選択してから [開く] を選択します
[ファイルが既に存在する場合は上書きする] チェックボックス	このチェックボックスがオンになっていることを確認してから、 [アップロード] を選択します

注: BLOB がアップロードされるまで待ってから、このラボを続行してください。

タスク 4: Web アプリを作成する

Azure portal のナビゲーションウィンドウで、 [リソースの作成] を選択します。
[リソースの作成] ブレードで、[サービスとマーケットプレースの検索] テキストボックスに「Web アプリ」と入力し、Enter キーを押します。
[マーケットプレース] 検索結果ブレードで、 [Web アプリ] の結果を選択します。
[Web アプリ] ブレードで [作成] を選択します。

[Web アプリの作成] ブレードの [基本] タブで、次のアクションを実行してから、 [監視] タブを選択します。

設定	アクション
[サブスクリプション] ドロップダウンリスト	既定値のままにします
[リソースグループ] セクション	[ManagedPlatform] を選択します
[名前] テキストボックス	「imgapi [ご自分の名前] 」と入力します
[公開] セクション	[コード] を選択します
[ランタイムスタック] ドロップダウンリスト	[.NET 8 (LTS)] を選びます
[オペレーティングシステム] セクション	[Windows] を選択します
[リージョン] ドロップダウンリスト	[米国東部] リージョンを選択します
[Windows プラン (米国東部)] セクション	[新規作成] を選択し、 [名前] テキストボックスに「ManagedPlan」という値を入力して [OK] を選択します
[価格プラン] セクション	[Standard S1] を選択します

次のスクリーンショットには、 [Web アプリの作成] ブレードで構成された設定が表示されています。

[Web アプリの作成] ブレード

[監視] タブの [Application Insights を有効にする] セクションで、 [No] を選択してから [確認および作成] を選択します。
[確認および作成] タブで、前の手順で選択したオプションを確認します。
[作成] を選択して、指定した構成を使用して Web アプリを作成します。

注: Web アプリが作成されるまで待ってから、このラボを続行してください。
[概要] ブレードで、 [リソースに移動] ボタンを選択して、新しく作成された Web アプリのブレードに移動します。

タスク 5: Web アプリを構成する

[App Service] ブレードの [設定] セクションで、[環境変数] リンクを選択します。

[アプリ設定] タブで [+ 追加] を選択します。 [アプリケーション設定の追加/編集] ポップアップダイアログに次の情報を入力します。

設定	アクション
[名前] テキストボックス	「StorageConnectionString」と入力します
[値] テキストボックス	前にコピーしたストレージ接続文字列をメモ帳に貼り付けます
[デプロイスロットの設定] チェックボックス	既定値のままにします

[適用] を選択してポップアップダイアログを閉じ、[アプリ設定] セクションに戻ります。
[アプリ設定] セクションの下部にある [適用] を選択します。

注: アプリ設定を更新すると、アプリが再起動される可能性があるという警告が表示される場合があります。確認を選択します。アプリケーション設定が保存されるまで待ってから、このラボを続行してください。
App Service の URL を取得するには、 [概要] リンクに移動し、 [既定のドメイン] セクションから値をコピーし、メモ帳に貼り付けます。メモ帳でドメイン名の前に https:// を付けます。この値は、ラボの後半で使用します。

注: この時点では、この URL の Web サーバーはプレースホルダー Web ページを返します。 Web アプリには、コードがまだデプロイされていません。このラボの後の方で Web アプリにコードをデプロイします。

タスク 6: `ASP.NET` Web アプリケーションを Web Apps にデプロイする

タスクバーで、 [Visual Studio Code] アイコンを選択します。
[ファイル] メニューの [フォルダーを開く] を選択します。
[エクスプローラー] ウィンドウで、Allfiles (F):\Allfiles\Labs\01\Starter\API を参照し、 [フォルダーの選択] を選択します。

注: ビルドとデバッグに必要な資産を追加したり、復元コマンドを実行して未解決の依存関係に対処したりするためのプロンプトは無視してください
[Visual Studio Code] ウィンドウの [エクスプローラー] ペインで [コントローラー] フォルダーを展開し、ImagesController.cs ファイルを選択して、このファイルをエディターで開きます。
エディターの 26 行目にある ImagesController クラスで、GetCloudBlobContainer メソッドと、コンテナーを取得するために使用されるコードを確認します。
36 行目にある ImagesController クラスで、Get メソッドと、すべての BLOB を [images] コンテナーから非同期的に取得するために使用されるコードを確認します。
68 行目にある ImagesController クラスで、Post メソッドと、アップロードされた画像をストレージに保持するために使用されるコードを確認します。
タスクバーで、[ターミナル] アイコンを選択します。
開いたターミナルで次のコマンドを入力し、Enter キーを押して Azure コマンドラインインターフェイス (CLI) にログインします。
```
az login
```
[Microsoft Edge] ブラウザーウィンドウで、Microsoft アカウントの電子メールアドレスとパスワードを入力し、 [サインイン] を選択します。
現在開いているターミナル ウィンドウに戻ります。サインインプロセスが完了するまで待ちます。
ターミナルで次のコマンドを入力し、Enter キーを選択して、ManagedPlatform リソースグループ内のすべてのアプリを一覧表示します。
```
az webapp list --resource-group ManagedPlatform
```
次のコマンドを入力してから Enter キーを押して、imgapi* というプレフィックスが付いたアプリを見つけます。
```
az webapp list --resource-group ManagedPlatform --query "[?starts_with(name, 'imgapi')]"
```
次のコマンドを入力してから Enter キーを押して、imgapi* というプレフィックスが付いた 1 つのアプリの名前のみをレンダリングします。
```
az webapp list --resource-group ManagedPlatform --query "[?starts_with(name, 'imgapi')].{Name:name}" --output tsv
```
次のコマンドを入力してから Enter キーを押して、現在のディレクトリを、ラボファイルが含まれている Allfiles (F):\Allfiles\Labs\01\Starter\API ディレクトリに変更します。
```
cd F:\Allfiles\Labs\01\Starter\API\
```
次のコマンドを入力してから Enter キーを押して、api.zip ファイルを、このラボで前に作成した Web アプリにデプロイします。
```
az webapp deployment source config-zip --resource-group ManagedPlatform --src api.zip --name <name-of-your-api-app>
```
注: <name-of-your-api-app> のプレースホルダーを、このラボで前に作成した Web アプリの名前に置き換えてください。前の手順で先ほど、このアプリの名前にクエリを実行しました。

デプロイが完了するまで待ってから、このラボを続行してください。
Azure portal のナビゲーション ウィンドウで、 [リソースグループ] リンクを選択します。
[リソースグループ] ブレードで、このラボで前に作成した [ManagedPlatform] リソースグループを選択します。
[ManagedPlatform] ブレードで、このラボで前に作成した [imgapi [ご自分の名前]] Web アプリを選択します。
[App Service] ブレードから、 [参照] を選択します。

注: この [参照] コマンドでは、Web サイトのルートに対して GET 要求を実行します。これにより、JSON (JavaScript Object Notation) 配列が返されます。この配列には、ストレージアカウント内のアップロードされた 1 つの画像の URL が含まれています。
Azure portal が含まれているブラウザーウィンドウに戻ります。
現在実行中の Visual Studio Code アプリケーションとターミナルアプリケーションを閉じます。

確認

この演習では、Azure で Web アプリを作成した後、Azure CLI と Apache Kudu zip ファイルデプロイユーティリティを使用して ASP.NET Web アプリケーションを Web Apps にデプロイしました。

演習 2: Azure Web Apps を使用してフロントエンド Web アプリケーションをビルドする

タスク 1: Web アプリを作成する

Azure portal のナビゲーション ウィンドウで、 [リソースの作成] を選択します。
[リソースの作成] ブレードで、[サービスとマーケットプレースの検索] テキストボックスに「Web アプリ」と入力し、Enter キーを押します。
[マーケットプレース] 検索結果ブレードで、 [Web アプリ] を選択します。
[Web アプリ] ブレードで [作成] を選択します。