に参加して、VS Code の AI 支援開発について学びましょう。

コンテナ化されたアプリを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のImagesペインで確認できます。

    Build image output

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

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

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

    Connect to Registry

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

    Registries

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

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

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

      Tag image

    • 新しい名前<your registry or username>/<image name>:<tag>を指定し、タグ付けアクションを完了します。たとえば、WebApp6という名前のACRの新しいイメージ名は「webapp6.azurecr.io/webapp6:latest」、Docker Hubの場合は「myusername/webapp6:latest」となります。

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

    Push image

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

    Refresh registry

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

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

  1. Container Explorerで、Registriesの下のイメージに移動し、タグを右クリックして、Deploy Image To Azure App Service...またはDeploy Image to Azure Container Apps...を選択します。

    Deploy to Azure App Service

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

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

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

    Deployment complete notification

  4. 結果は、Visual Studio CodeのOutputパネルのContainer Toolsセクションでも確認できます。

    Deployment complete output

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

    Web Application

次のステップ

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

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