• Create a secure-by-default architecture for Azure App Service and Azure Cosmos DB with MongoDB API.
• Secure connection secrets using a managed identity and Key Vault references.
• Deploy a Node.js sample app to App Service from a GitHub repository.
• Access App Service app settings in the application code.
• Make updates and redeploy the application code.
• Stream diagnostic logs from App Service.
• Manage the app in the Azure portal.
• Provision the same architecture and deploy by using Azure Developer CLI.
• Optimize your development workflow with GitHub Codespaces and GitHub Copilot.

• An Azure account with an active subscription. If you don't have an Azure account, youcan create one for free.
• A GitHub account. you can alsoget one for free.
• Knowledge of Express.js development.
• (Optional) To try GitHub Copilot, aGitHub Copilot account. A 30-day free trial is available.

• An Azure account with an active subscription. If you don't have an Azure account, youcan create one for free.
• Azure Developer CLI installed. You can follow the steps with theAzure Cloud Shell because it already has Azure Developer CLI installed.
• Knowledge of Express.js development.
• (Optional) To try GitHub Copilot, aGitHub Copilot account. A 30-day free trial is available.

Tip

You can askGitHub Copilot about this repository. For example:

• @workspace What does this project do?
• @workspace What does the .devcontainer folder do?

2. Create App Service and Azure Cosmos DB

In this step, you create the Azure resources. The steps used in this tutorial create a set of secure-by-default resources that include App Service and Azure Cosmos DB for MongoDB. For the creation process, you'll specify:

• TheName for the web app. It's used as part of the DNS name for your app.
• TheRegion to run the app physically in the world. It's also used as part of the DNS name for your app.
• TheRuntime stack for the app. It's where you select the version of Node to use for your app.
• TheHosting plan for the app. It's the pricing tier that includes the set of features and scaling capacity for your app.
• TheResource Group for the app. A resource group lets you group (in a logical container) all the Azure resources needed for the application.

Sign in to theAzure portal and follow these steps to create your Azure App Service resources.

Having issues? Check theTroubleshooting section.

3. Secure connection secrets

The creation wizard generated the connectivity string for you already as anapp setting. However, the security best practice is to keep secrets out of App Service completely. You'll move your secrets to a key vault and change your app setting to aKey Vault reference with the help of Service Connectors.

Having issues? Check theTroubleshooting section.

4. Deploy sample code

In this step, you configure GitHub deployment using GitHub Actions. It's just one of many ways to deploy to App Service, but also a great way to have continuous integration in your deployment process. By default, everygit push to your GitHub repository kicks off the build and deploy action.

Having issues? Check theTroubleshooting section.

5. Browse to the app

6. Stream diagnostic logs

Azure App Service captures all messages logged to the console to assist you in diagnosing issues with your application. The sample app outputs console log messages in each of its endpoints to demonstrate this capability. For example, theget endpoint outputs a message about the number of tasks retrieved from the database and an error message appears if something goes wrong.

router.get('/', function(req, res, next) {  Task.find()    .then((tasks) => {            const currentTasks = tasks.filter(task => !task.completed);      const completedTasks = tasks.filter(task => task.completed === true);      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });    })    .catch((err) => {      console.log(err);      res.send('Sorry! Something went wrong.');    });});

7. Inspect deployed files using Kudu

Azure App Service provides a web-based diagnostics console namedKudu that lets you examine the server hosting environment for your web app. Using Kudu, you can view the files deployed to Azure, review the deployment history of the application, and even open an SSH session into the hosting environment.

8. Clean up resources

When you're finished, you can delete all of the resources from your Azure subscription by deleting the resource group.

2. Create Azure resources and deploy a sample app

In this step, you create the Azure resources and deploy a sample app to App Service on Linux. The steps used in this tutorial create a set of secure-by-default resources that include App Service and Azure Cosmos DB.

The dev container already has theAzure Developer CLI (AZD).

1. From the repository root, runazd init.

   azd init --template nodejs-app-service-cosmos-redis-infra

2. When prompted, give the following answers:

   Question	Answer
   The current directory is not empty. Would you like to initialize a project here in '<your-directory>'?	Y
   What would you like to do with these files?	Keep my existing files unchanged
   Enter a new environment name	Type a unique name. The AZD template uses this name as part of the DNS name of your web app in Azure (<app-name>-<hash>.azurewebsites.net). Alphanumeric characters and hyphens are allowed.

3. Sign into Azure by running theazd auth login command and following the prompt:

   azd auth login

4. Create the necessary Azure resources and deploy the app code with theazd up command. Follow the prompt to select the desired subscription and location for the Azure resources.

   azd up

   Theazd up command takes about 15 minutes to complete (the Redis cache takes the most time). It also compiles and deploys your application code, but you'll modify your code later to work with App Service. While it's running, the command provides messages about the provisioning and deployment process, including a link to the deployment in Azure. When it finishes, the command also displays a link to the deploy application.

   This AZD template contains files (azure.yaml and theinfra directory) that generate a secure-by-default architecture with the following Azure resources:

   • Resource group: The container for all the created resources.
   • App Service plan: Defines the compute resources for App Service. A Linux plan in theB1 tier is created.
   • App Service: Represents your app and runs in the App Service plan.
   • Virtual network: Integrated with the App Service app and isolates back-end network traffic.
   • Azure Cosmos DB account with MongoDB API: Accessible only from behind its private endpoint. A database is created for you on the server.
   • Azure Cache for Redis: Accessible only from within the virtual network.
   • Key vault: Accessible only from behind its private endpoint. Used to manage secrets for the App Service app.
   • Private endpoints: Access endpoints for the key vault, the database server, and the Redis cache in the virtual network.
   • Private DNS zones: Enable DNS resolution of the Cosmos DB database, the Redis cache, and the key vault in the virtual network.
   • Log Analytics workspace: Acts as the target container for your app to ship its logs, where you can also query the logs.

   Once the command finishes creating resources and deploying the application code the first time, the deployed sample app doesn't work yet because you must make small changes to make it connect to the database in Azure.

3. Verify connection strings

The AZD template you use generated the connectivity variables for you already asapp settings and outputs the them to the terminal for your convenience. App settings are one way to keep connection secrets out of your code repository.

1. In the AZD output, find the app settingAZURE_COSMOS_CONNECTIONSTRING. Only the setting names are displayed. They look like this in the AZD output:

    App Service app has the following app settings:         - AZURE_COSMOS_CONNECTIONSTRING         - AZURE_REDIS_CONNECTIONSTRING         - AZURE_KEYVAULT_RESOURCEENDPOINT         - AZURE_KEYVAULT_SCOPE

   AZURE_COSMOS_CONNECTIONSTRING contains the connection string to the Cosmos DB database in Azure. You need to use it in your code later.

2. For your convenience, the AZD template shows you the direct link to the app's app settings page. Find the link and open it in a new browser tab.

Having issues? Check theTroubleshooting section.

4. Modify sample code and redeploy

Having issues? Check theTroubleshooting section.

5. Browse to the app

1. In the AZD output, find the URL of your app and navigate to it in the browser. The URL looks like this in the AZD output:

    Deploying services (azd deploy)   (✓) Done: Deploying service web   - Endpoint: <URL>

2. Add a few tasks to the list.

   

   Congratulations, you're running a web app in Azure App Service, with secure connectivity to Azure Cosmos DB.

Having issues? Check theTroubleshooting section.

6. Stream diagnostic logs

Azure App Service captures all messages logged to the console to assist you in diagnosing issues with your application. The sample app outputs console log messages in each of its endpoints to demonstrate this capability. For example, theget endpoint outputs a message about the number of tasks retrieved from the database and an error message appears if something goes wrong.

router.get('/', function(req, res, next) {  Task.find()    .then((tasks) => {            const currentTasks = tasks.filter(task => !task.completed);      const completedTasks = tasks.filter(task => task.completed === true);      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });    })    .catch((err) => {      console.log(err);      res.send('Sorry! Something went wrong.');    });});

In the AZD output, find the link to stream App Service logs and navigate to it in the browser. The link looks like this in the AZD output:

Stream App Service logs at: <URL>

Learn more about logging in Java apps in the series onEnable Azure Monitor OpenTelemetry for .NET, Node.js, Python and Java applications.

Having issues? Check theTroubleshooting section.

7. Clean up resources

To delete all Azure resources in the current deployment environment, runazd down and follow the prompts.

azd down

JavaScript on Azure developer center

Configure Node.js app in App Service

 Secure with custom domain and certificate