Merge pull request #210044 from craigshoemaker/aca/ext/deploy-vscode

[Container Apps] Tutorial update for new VS Code workflow

Author: v-regandowner

articles/container-apps/deploy-visual-studio-code.md

@@ -6,8 +6,8 @@ author: alexwolfmsft
 ms.author: alexwolf
 ms.service: container-apps
 ms.topic: tutorial
-ms.date: 4/05/2022
-ms.custom: mode-ui
+ms.date: 09/01/2022
+ms.custom: vscode-azure-extension-update-completed
 ---
 
 # Tutorial: Deploy to Azure Container Apps using Visual Studio Code
@@ -27,106 +27,105 @@ In this tutorial, you'll deploy a containerized application to Azure Container A
 
 ## Clone the project
 
-To follow along with this tutorial, [Download the Sample Project](https://github.com/azure-samples/containerapps-albumapi-javascript/archive/refs/heads/master.zip) from [the repository](https://github.com/azure-samples/containerapps-albumapi-javascript) or clone it using the Git command below:
+1. Begin by cloning the [sample repository]((https://github.com/azure-samples/containerapps-albumapi-javascript) to your machine using the following command.
 
-```bash
-git clone https://github.com/Azure-Samples/containerapps-albumapi-javascript.git
-cd containerapps-albumapi-javascript
-```
+    ```bash
+    git clone https://github.com/Azure-Samples/containerapps-albumapi-javascript.git
+    ```
 
-This tutorial uses a JavaScript project, but the steps are language agnostic. To open the project after cloning on Windows, navigate to the project's folder, and right click and choose **Open in VS Code**. For Mac or Linux, you can also use the Visual Studio Code user interface to open the sample project. Select **File -> Open Folder** and then navigate to the folder of the cloned project.
+    > [!NOTE]
+    > This tutorial uses a JavaScript project, but the steps are language agnostic.
+
+1. Open Visual Studio Code.
+
+1. Select **F1** to open the command palette.
+
+1. Select **File > Open Folder...** and select the folder where you cloned the sample project.
 
 ## Sign in to Azure
 
-To work with Container Apps and complete this tutorial, you'll need to be signed into Azure.  Once you have the Azure Account extension installed, you can sign in using the command palette by typing **Ctrl + shift + p** on Windows and searching for the Azure Sign In command.
+1. Select **F1** to open the command palette.
 
-:::image type="content" source="media/visual-studio-code/visual-studio-code-sign-in.png"  alt-text="A screenshot showing how to sign in to Azure.":::
+1. Select **Azure: Sign In** and follow the prompts to authenticate.
 
-Select **Azure: Sign in**, and Visual Studio Code will launch a browser for you to sign into Azure. Login with the account you'd like to use to work with Container Apps, and then switch back to Visual Studio Code.
+1. Once signed in, return to Visual Studio Code.
 
 ## Create the container registry and Docker image
 
-The sample project includes a Dockerfile that is used to build a container image for the application. Docker images contain all of the source code and dependencies necessary to run an application. You can build and publish the image for your app directly in Azure; a local Docker installation is not required. An image is required to create and run a container app.
-
-Container images are stored inside of container registries. You can easily create a container registry and upload an image of your app to it in a single workflow using Visual Studio Code.
+Docker images contain the source code and dependencies necessary to run an application. This sample project includes a Dockerfile used to build the application's container. Since you can build and publish the image for your app directly in Azure, a local Docker installation isn't required.
 
-1) First, right click on the Dockerfile in the explorer, and select **Build Image in Azure**. You can also begin this workflow from the command palette by entering **Ctrl + Shift + P** on Windows or **Cmd + Shift + P** on a Mac. When the command palette opens, search for *Build Image in Azure* and select **Enter** on the matching suggestion.
+Container images are stored inside container registries. You can create a container registry and upload an image of your app in a single workflow using Visual Studio Code.
 
-     :::image type="content" source="media/visual-studio-code/visual-studio-code-build-in-azure-small.png" lightbox="media/visual-studio-code/visual-studio-code-build-in-azure.png" alt-text="A screenshot showing how to build the image in Azure.":::
+1. In the _Explorer_ window, expand the _src_ folder to reveal the Dockerfile.
 
-2) As the command palette opens, you are prompted to enter a tag for the container. Accept the default, which uses the project name with the `{{.Run.ID}}` replacement token as a suffix. Select **Enter** to continue.
+1. Right select on the Dockerfile, and select **Build Image in Azure**.
 
-     :::image type="content" source="media/visual-studio-code/visual-studio-code-container-tag.png" alt-text="A screenshot showing Container Apps tagging.":::
+    This action opens the command palette and prompts you to define a container tag.
 
-3) Choose the subscription you would like to use to create your container registry and build your image, and then press enter to continue.
+1. Enter a tag for the container. Accept the default, which is the project name with the *latest* suffix.
 
-4) Select **+ Create new registry**, or if you already have a registry you'd like to use, select that item and skip to creating and deloying to the container app.  
+1. Select **+ Create new registry**, or if you already have a registry you'd like to use, select that item and skip to creating and deploying to the container app.  
 
-5) Enter a unique name for the new registry such as *msdocscapps123*, where 123 are unique numbers of your own choosing, and then press enter. Container registry names must be globally unique across all over Azure. 
+1. Enter a unique name for the new registry such as `msdocscapps123`, where `123` are unique numbers of your own choosing, and then select enter.
 
-6) Select **Basic** as the SKU.
+    Container registry names must be globally unique across all over Azure.
 
-7) Choose **+ Create new resource group**, or select an existing resource group you'd like to use. For a new resource group, enter a name such as `msdocscontainerapps`, and press enter.
+1. Select **Basic** as the SKU.
 
-8) Finally, select the location that is nearest to you. Select **Enter** to finalize the workflow, and Azure begins creating the container registry and building the image.  This may take a few moments to complete.
+1. Choose **+ Create new resource group**, or select an existing resource group you'd like to use.
 
-Once the registry is created and the image is built successfully, you are ready to create the container app to host the published image.
+    For a new resource group, enter a name such as `msdocscontainerapps`, and press enter.
 
-## Create and deploy to the container app
+1. Select the location that is nearest to you. Select **Enter** to finalize the workflow, and Azure begins creating the container registry and building the image.
 
-The Azure Container Apps extension for Visual Studio Code enables you to choose existing Container Apps resources, or create new ones to deploy your applications to. In this scenario you create a new Container App environment and container app to host your application. After installing the Container Apps extension, you can access its features under the Azure control panel in Visual Studio Code. 
+    This process may take a few moments to complete.
 
-### Create the Container Apps environment 
+Once the registry is created and the image is built successfully, you're ready to create the container app to host the published image.
 
-Every container app must be part of a Container Apps environment. An environment provides an isolated network for one or more container apps, making it possible for them to easily invoke each other.  You will need to create an environment before you can create the container app itself.
+## Create and deploy to the container app
 
-1) In the Container Apps extension panel, right click on the subscription you would like to use and select **Create Container App Environment**. 
+The Azure Container Apps extension for Visual Studio Code enables you to choose existing Container Apps resources, or create new ones to deploy your applications to. In this scenario, you create a new Container App environment and container app to host your application. After installing the Container Apps extension, you can access its features under the Azure control panel in Visual Studio Code.
 
-     :::image type="content" source="media/visual-studio-code/visual-studio-code-create-app-environment.png" alt-text="A screenshot showing how to create a Container Apps environment.":::
+### Create the Container Apps environment
 
-2) A command palette workflow will open at the top of the screen. Enter a name for the new Container Apps environment, such as `msdocsappenvironment`, and select **Enter**.
+Every container app must be part of a Container Apps environment. An environment provides an isolated network for one or more container apps, making it possible for them to easily invoke each other.  You'll need to create an environment before you can create the container app itself.
 
-     :::image type="content" source="media/visual-studio-code/visual-studio-code-container-app-environment.png" alt-text="A screenshot showing the container app environment.":::
+1. Select <kbd>F1</kbd> to open the command palette.
 
-3) Select the desired location for the container app from the list of options.
+1. Enter **Azure Container Apps: Create Container Apps Environment...** and enter the following values as prompted by the extension.
 
-     :::image type="content" source="media/visual-studio-code/visual-studio-code-container-env-location.png" alt-text="A screenshot showing the app environment location.":::
+    | Prompt | Value |
+    |--|--|
+    | Name | Enter **my-aca-environment** |
+    | Region | Select the region closest to you |
 
-Visual Studio Code and Azure will create the environment for you.  This process may take a few moments to complete. Creating a container app environment also creates a log analytics workspace for you in Azure.
+Once you issue this command, Azure begins to create the environment for you.  This process may take a few moments to complete. Creating a container app environment also creates a log analytics workspace for you in Azure.
 
 ### Create the container app and deploy the Docker image
 
 Now that you have a container app environment in Azure you can create a container app inside of it. You can also publish the Docker image you created earlier as part of this workflow.
 
-1) In the Container Apps extension panel, right click on the container environment you created previously and select **Create Container App**
-
-     :::image type="content" source="media/visual-studio-code/visual-studio-code-create-container-app.png" alt-text="A screenshot showing how to create the container app.":::
-
-2) A new command palette workflow will open at the top of the screen. Enter a name for the new container app, such as `msdocscontainerapp`, and then select **Enter**.
-
-     :::image type="content" source="media/visual-studio-code/visual-studio-code-container-name.png" alt-text="A screenshot showing the container app name.":::
-
-3) Next, you're prompted to choose a container registry hosting solution to pull a Docker image from.  For this scenario, select **Azure Container Registries**, though Docker Hub is also supported.
-
-4) Select the container registry you created previously when publishing the Docker image.
-
-5) Select the container registry repository you published the Docker image to. Repositories allow you to store and organize your containers in logical groupings.
-
-6) Select the tag of the image you published earlier.
-
-7) When prompted for environment variables, choose **Skip for now**. This application does not require any environment variables.
-
-8) Select **Enable** on the ingress settings prompt to enable an HTTP endpoint for your application.
+1. Select <kbd>F1</kbd> to open the command palette.
 
-9) Choose **External** to configure the HTTP traffic that the endpoint will accept.
+1. Enter **Azure Container Apps: Create Container App...** and enter the following values as prompted by the extension.
 
-10) Enter a value of 3500 for the port, and then select **Enter** to complete the workflow. This value should be set to the port number that your container uses, which in the case of the sample app is 3500.
+    | Prompt | Value | Remarks |
+    |--|--|--|
+    | Environment | Select **my-aca-environment** |  |
+    | Name | Enter **my-container-app** |  |
+    | Container registry | Select **Azure Container Registries**, then select the registry you created as you published the container image. |  |
+    | Repository | Select the container registry repository where you published the container image. |  |
+    | Tag | Select **latest** |  |
+    | Environment variables | Select **Skip for now** |  |
+    | Ingress | Select **Enable** |  |
+    | HTTP traffic type | Select **External** |  |
+    | Port | Enter **3500** | You set this value to the port number that your container uses. |
 
-During this process, Visual Studio Code and Azure create the container app for you.  The published Docker image you created earlier is also be deployed to the app.  Once this process finishes, Visual Studio Code displays a notification with a link to browse to the site.  Click this link, and to view your app in the browser. 
+During this process, Visual Studio Code and Azure create the container app for you.  The published Docker image you created earlier is also be deployed to the app.  Once this process finishes, Visual Studio Code displays a notification with a link to browse to the site.  Select this link, and to view your app in the browser.
 
 :::image type="content" source="media/visual-studio-code/visual-studio-code-app-deploy.png" alt-text="A screenshot showing the deployed app.":::
 
-You can also append the `/albums` path at the end of the app URL to view data from a sample API request. 
+You can also append the `/albums` path at the end of the app URL to view data from a sample API request.
 
 Congratulations! You successfully created and deployed your first container app using Visual Studio code.