VS Codeのエージェントモードを拡張するには、を試してください！

コンテナ化されたアプリをAzureにデプロイする

このガイドでは、以下の方法を学びます

  • アプリケーションのコンテナイメージを作成する。
  • イメージをコンテナレジストリにプッシュする。
  • イメージをAzure App ServiceまたはAzure Container Appsにデプロイする。

前提条件

アプリケーションイメージを作成する

既にイメージをお持ちの場合は、このステップをスキップして「イメージをコンテナレジストリにプッシュする」ステップに進んでください。

  1. VS Code でアプリケーションフォルダーを開きます。

  2. コマンドパレット (⇧⌘P (Windows、Linux の場合は Ctrl+Shift+P)) を開き、**Container Images: Build Image...** コマンドを使用してイメージをビルドします。

    Build container image

    イメージ名は Build Image コマンドの出力に表示され、Container Explorer の [イメージ] ペインでも確認できます。

    Build image output

イメージをコンテナレジストリにプッシュする

App Service または Container App にイメージをデプロイする前に、イメージをコンテナレジストリにアップロードする必要があります。イメージは Azure Container Registry (ACR) または Docker Hub のいずれかにアップロードできます。

  1. Container Explorer を開き、**レジストリ**グループの下にある**レジストリに接続...**アイコンを選択し、プロンプトに従います。プロバイダー (Azure または Docker Hub) を選択し、レジストリに接続するための資格情報を入力します。

    Connect to Registry

  2. これでレジストリが [レジストリ] の下に表示されます。

    Registries

  3. 必要に応じて、イメージにタグを付けます。イメージをレジストリにアップロードするには、`docker push` コマンドが正しいレジストリにアップロードできるように、イメージにレジストリ名でタグを付ける必要があります。

    • Azure ACR でレジストリを作成するには、Container Explorer の [レジストリ] セクションを開き、まだサインインしていない場合は Azure にサインインし、使用するサブスクリプションを右クリックして、**レジストリの作成**を選択します。

    • 前のセクションでビルドされたイメージは、Container Explorer の [イメージ] セクションに表示されます。右クリックして**タグ...**を選択します。

      Tag image

    • 新しい名前 `<あなたのレジストリまたはユーザー名>/<イメージ名>:<タグ>` を指定し、タグ付けアクションを完了します。例えば、WebApp6 という名前の ACR の新しいイメージ名は「webapp6.azurecr.io/webapp6:latest」となり、Docker Hub の場合は「myusername/webapp6:latest」となります。

  4. イメージは、イメージタグが指すレジストリの下の Container Explorer に表示されます。このイメージを選択し、**プッシュ**を選択します。まだイメージにタグが付けられていない場合は、プッシュするレジストリを選択するよう求められ、選択に基づいてイメージにタグが付けられます。

    Push image

  5. プッシュコマンドが完了したら、イメージがプッシュされたレジストリノードを更新すると、アップロードされたイメージが表示されます。

    Refresh registry

イメージをAzureにデプロイする

前のセクションで、イメージはリモートコンテナレジストリにプッシュされました。次に、このイメージを Azure App Service または Azure Container Apps にデプロイします。

  1. Container Explorer で、[レジストリ] の下のイメージに移動し、タグを右クリックして、**Azure App Service にイメージをデプロイ...** または **Azure Container Apps にイメージをデプロイ...** を選択します。

    Deploy to Azure App Service

  2. プロンプトが表示されたら、App Service または Container App の値を指定します。

    • 新しい Web アプリ名: 名前は Azure 全体で一意である必要があります。
    • リソースグループ: 既存のリソースグループを選択するか、新しいリソースグループを作成します。
    • App Service プラン: 既存の App Service プランを選択するか、新しい App Service プランを作成します。(App Service プランは、Web サイトをホストする物理リソースを定義します。このチュートリアルでは、Basic または Free プランのティアを使用できます)。

  3. デプロイが完了すると、Visual Studio Code に Web サイトの URL を含む通知が表示されます。

    Deployment complete notification

  4. Visual Studio Code の出力パネルの [Container Tools] セクションでも結果を確認できます。

    Deployment complete output

  5. デプロイされた Web サイトを閲覧するには、出力パネルで URL を Ctrl+クリックして開くことができます。アプリが Azure で稼働するまでしばらく待つ必要がある場合があります。新しい App Service または Container App は、Visual Studio Code の Azure ビューにも表示され、そこで Web サイトを右クリックして**Web サイトを参照**を選択できます。

    Web Application

次のステップ

詳細については、以下を参照してください。

  • Azure 拡張機能 - VS Code Marketplace には、Azure およびクラウド用の何百もの拡張機能があります。
  • Azure へのデプロイ - アプリケーションを Azure にデプロイする手順を段階的に学びます。
  • MongoDB の操作 - VS Code 内から MongoDB データベースを作成、管理、クエリします。
1/17/2023