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] コマンドの出力で確認できます。コンテナー エクスプローラーの [Images] ペインでも同じ名前が見つかります。

    Build image output

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

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

  1. コンテナー エクスプローラーを開き、[Registries] (レジストリ) グループの下にある [Connect Registry...] (レジストリに接続...) アイコンを選択し、プロンプトに従います。プロバイダー (Azure または Docker Hub) を選択し、資格情報を入力してレジストリに接続します。

    Connect to Registry

  2. これで、レジストリが [Registries] (レジストリ) の下に表示されるようになります。

    Registries

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

    • Azure ACR にレジストリを作成するには、コンテナー エクスプローラーの [Registries] (レジストリ) セクションを開き、まだサインインしていない場合は Azure にサインインしてから、使用するサブスクリプションを右クリックし、[Create Registry] (レジストリの作成) を選択します。

    • 前のセクションでビルドされたイメージが、コンテナー エクスプローラーの [Images] (イメージ) セクションに表示されます。右クリックして [Tag...] (タグ...) を選択します。

      Tag image

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

  4. イメージは、イメージ タグが指すレジストリの下のコンテナー エクスプローラーに表示されます。このイメージを選択し、[Push] (プッシュ) を選択します。イメージがまだタグ付けされていない場合は、プッシュ先のレジストリを選択するように求められ、その選択に基づいてイメージがタグ付けされます。

    Push image

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

    Refresh registry

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

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

  1. コンテナー エクスプローラーで、[Registries] (レジストリ) の下のイメージに移動し、タグを右クリックして、[Deploy Image To Azure App Service...] (イメージを Azure App Service にデプロイ...) または [Deploy Image to Azure Container Apps...] (イメージを 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 の [出力] パネルの [Container Tools] セクションでも確認できます。

    Deployment complete output

  5. デプロイされた Web サイトを参照するには、Ctrl キーを押しながらクリックして [出力] パネルの URL を開きます。アプリが Azure で有効になるまで、しばらく待つ必要がある場合があります。新しい App Service または Container App は Visual Studio Code の Azure ビューにも表示され、そこで Web サイトを右クリックして [Browse Website] (Web サイトの参照) を選択できます。

    Web Application

次のステップ

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

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