💻 6月3日の MS Build で開催される VS Code Live に参加しましょう。

コンテナ化されたアプリを 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

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

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

    Push image

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

    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 の「出力」パネルの「Container Tools」セクションでも確認できます。

    Deployment complete output

  5. デプロイされた Web サイトを閲覧するには、Ctrl+クリック を使用して出力パネルの URL を開くことができます。アプリが 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.