Deploy Node.js application to Azure Web App

Objective

You have a working Azure Node.js web application and the source code is managed in a Git repository. The goal of this tutorial is to automate the deployment of a Node.js web applications to Azure Web App. This automation will include:

• cloning the Node.js from a Git repository

• package the Application Setting/Connection String properties file

• update relevant Application Setting and Connection String properties in Azure Web App

• deploying the Node.js web application source code archive to Azure Web App

• make sure build and deployment of Node.js application happens in Azure Web App backend itself

• retrieve the deployment log(optional) against the deployment executed

We will walk through each of the FlexDeploy features that will be created/configured to accomplish this goal and have the Node.js web application deployed in a very short amount of time.

Checklist

Configure Cloud Account

First, an Azure account needs to be configured under Topology. FlexDeploy will connect to the right Azure Subscription with provided details and do the deployment.

1. Navigate to the Topology Tab

2. Select Integrations from the left-hand pane

3. Navigate to the Cloud tab under Topology

4. Create a new Cloud account of the provider type “Azure” with the “+” button.

Open

It should have a Client ID, Client Key, Tenant Id, and Subscription Id configured in it. The Client ID must have relevant access in the target Web App to deploy code and make other associated changes(Application Setting update etc).

Open

Git Repository Structure

The Git repository should contain the codebase. Alongside it can also contain any Application Setting and Connection String-related attributes in respective files(any naming convention allowed). These files are not mandatory, however, in case someone has any Application Setting and Connection String property to update this is recommended. Please review the Application Setting and Connection String property update for a detailed explanation.

The Sample Git repository structure is given below.

Build and Deploy Workflows

Navigate to Workflows and create a build and a deploy workflow using the button as highlighted below.

Build Workflow

Below is a sample build workflow to build a Node.js Source code archive and create an artifact from it.

Step-i: Clone Git Repository

This step will clone the Git repository codebase into the project execution working directory. The Git URL will be retrieved from Source Control configured under Project Properties.

Below given is the Git code structure and corresponding exported codebase during execution as a result of the above step.

Git Codebase

Exported Codebase

Step ii: Copy the properties file to the intermediate dir

Application Setting and Connection String json files (if applicable/present) will be moved to the intermediate directory. An intermediate directory can have any name, in this case, we are using the artifactsObjects folder inside the temp directory. File names are mentioned under File Filter with ‘##’ separated(as advised in the description). Application Setting and Connection String values can also be passed as input to deploy workflow. Application Setting and Connection String files are optional, please review the Application Setting and Connection String property update for a detailed explanation.

Step iii: Create an archive of the source code in the intermediate dir

Per the Azure Web App deployment requirement, we have created an archive with the Node.js source code inside it.

If we look inside the deploy.zip, it contains the source code only. Basically, it contains the source code files that need to be copied to the Azure Web App backend. Azure Web App treats this as an executable package and runs it.

note: Each application will have separate directory structure/file name hence the all paths need to be modified accordingly.

note: Its essential to make sure Consumes Artifacts and Produces Artifacts checkbox is marked only when required. Please follow the snapshots for all execution steps to avoid any discrepancy.

note: the source code(or any executable files) inside the .zip file shouldn’t be inside any subfolder. Else once the zip file is deployed to Azure Web App, it may not work.

The key question which may arise at this point, how would Azure Web App understand if the deployed archive is an executable and can be run directly. Or is it just the source code which needs to be built first before execution.

To perform a build in Azure Web App backend, you just need to check the Remote Build flag under Project properties. Plugin would do all necessary configurations behind the scenes.

Step-iv: Save all from the intermediate dir as Artifact

Post execution of the above steps the intermediate directory(artifactObjects) should contain files as shown below.

These objects are required as part of the deployment flow. Hence we create an archive(artifacts.zip) with them inside the Artifacts directory. We also enable Produces Artifacts checkbox to save the zip file as an artifact.

As part of the above step, all files inside the artifactObjects folder are archived to create an artifacts.zip which will be saved as an artifact for future reference from the Deployment workflow.

Note: The directory name/artifact name can be anything. The deployment workflow expects only one .zip file inside the artifact containing the source code. It will search for a .zip extension and treat it as a source archive for further processing.

Note: the deployWebApp operation(Azure plugin) will search for the Application Setting and Connection String file name provided as part of Project properties. Irrespective of folder structure it will find the file. In case more than one file exists with the same name, the workflow will fail.

Deploy Workflow

Below is a sample deployment workflow to deploy the archive to Azure Web App.

This step first updates the Application Setting/Connection String values from the files present in the artifact(optional). Instead of using Application Setting and Connection String files, one can directly provide the values as part of plugin input.

In such case, we can create input variables on deployment workflow like given below and pass them as deployWebApp operation input argument. This is optional and any other way to pass the arguments(e.g. hardcoded value) is also acceptable.

First, navigate to the Workflow Definition tab and open the Inputs popup.

Create two input variables, one each for Application Setting and Connection String as shown below.

The input arguments are then mapped to the input properties of the deployWebApp operation as shown below. The plugin will take the input values and process them accordingly.

The deployWebApp operation returns four output variables. To capture them and use them for further processing/evaluation, one can create four variables and map them against the output parameters. Return As Output drop down option should be checked.

1. First, navigate to the Workflow Definition tab and open the X² Variables popup

2. Next use Create option to add four output variables.

Map the variables against the output of the deployWebApp operation to capture the responses.

Project Configuration

Navigate to the Project tab and create a Project with a logical name (NodeJsAzureWebApp in this case)

Configure the Build and Deploy workflow that has been created in previous steps as shown below.

Source Control

Configure the Source SCM repository under Source Control as shown below.

 To configure Project specific Source Control one first need to navigate to the Project Configuration tab.

1. Next, expand the SOURCE CONTROL option from the left-hand pane.

2. Select SOURCES for configuring the Source Repository

3. Select the appropriate Source Control Type

4. Configure Source Repository. For detailed steps of Source Control configuration please refer to Configure Source Control in FlexDeploy

Project Properties

1. To configure Project specific settings one can navigate to the Project Configuration tab as shown above.

2. Next, select the PROPERTIES option from the left-hand pane.

3. To deploy a web application to Azure Web App, the first two mandatory properties are the Web App Name and Resource Group Name. These need to be configured under Project properties.

4. Remote Build: This flag is applicable in case we want to upload the code to the Azure Web App backend and build it there itself(e.g.: .NET/Node.js).Hence this checkbox needs to be checked for this flow, as we are passing only source code to Azure Web App

5. Under Project properties, one also needs to provide the Application Setting/Connection String file names(if applicable).

6. Show deployment log: Once deployment is completed, in case someone wants to verify the execution steps, they need to check the below checkbox under Project properties.

   In this case, the plugin will internally retrieve the deployment Id and will fetch the Deployment log(if available), and return the same as an Output variable.

   This is applicable only for Code archive deployment(not for docker image deployment).

Application Setting and Connection String property update

Under Project properties, one needs to provide the Application Setting/Connection String file names as shown above. These Application Setting/Connection String properties are non-mandatory and can be directly provided as plugin Input as well. Or even may not be passed at all.

However this is the recommended way and the files should exist in Workdir during execution(folder hierarchy is not required, the plugin will search the file based on the file name).

Although only one Application Setting and one Connection String file are allowed per project.

Application Setting and Connection String are two separate entities so whichever files exist, the same will be considered during deployment.

Let’s review the sample Application Setting file first(same structure as the local.settings.json file). In our scenario, there are two dynamic values that need to be propagated to Web App Application Setting.

Both are already added to the AppSettings.json file present in Git Repository.

Both properties need to be configured in workflow Properties with relevant Property Scope.

1. To pass the value for DYNAMIC_TESTKEY1(Project specific) one first needs to navigate to the Configuration tab

2. Next, select the PROPERTIES option from the left-hand pane and provide the proper value against the property.

For Environment property, the same needs to be added against Environment-Target Group properties.

1. First, navigate to the Topology.

2. Next, navigate to the Environment-Target Group properties section for the intended Target.

3. Next, select the PROPERTIES tab and provide the value for DYNAMIC_ENV_TESTKEYVAL2(environment specific) as shown below.

Application Setting/Connection String can also be passed as an input argument to the deployWebApp operation. The sample is shown as given below.

Please refer to this link for the input structure of Application Setting and Connection String both when passed as a file or as input parameter - Application Setting/Connection String file and input content acceptable structure

In case both the Application Setting file and Application Setting input argument are passed, a consolidated list of properties will be considered while updating Web App. In case the same attribute is used both in the file and input, the value provided as part of the input will take precedence. The same applies to Connection String as well.

Also, it’s not mandatory to have dynamic values. One can always pass static hard-coded value if needed (although not recommended).

Application Setting and Connection String values will be updated against the Web App Slot Name configured at the environment level. Refer to the Deploy to Slot section for further details.

There could also be scenarios where someone only need to update the Application Setting or Connection String without actually deploying the code. In that case one can use upsertWebAppApplicationSetting or upsertWebAppConnectionString operations respectively. The workflow execution will be exactly same only the code archive creation /Docker image update step will not be required. Build workflow generated artifact should only container AppSetting.json or ConnString.json. These values can also be passed as input as already mentioned in detail in above section.

Target Properties

Select Topology from the menu and then select Topology Overview from the left menu. You will see a table that has Instances as the rows and Environments as the columns with colored circles representing the Environment Instance. Color coding represents:

• RED - no required properties are set and/or the Endpoint is not configured

• YELLOW - some of the required properties are set and/or the Endpoint is not configured

• GREEN - all required properties are set and the Endpoint is configured

Selecting the GREEN circle for DEV will display the configurable properties/Endpoint and allows for the configuration of

Below given are the environment-specific values which need to be updated.

Also in case, we are adding any environment-specific properties for Application Setting/Connection String(as mentioned in the previous step), those values should also be updated.

Deploy to Slot

Azure Web App default slot is production. However, one can configure multiple slots and deploy web application on those slots inside App. Web App Slot Name is a mandatory field, where the code needs to deploy.

In case someone wants to do a slot swap, they can provide the Target Slot to swap with as shown below.

executeWebAppSlotSwap operation can be used to perform the slot swap.

Post deployment debugging

Post deployment success of plugin execution it can take a little while for the web application up and running.

Currently once the application is deployed to Azure WebApp through the plugin operation, Azure basically uploads the files to the backend. However if the application is up and running or have failed, can’t be verified immediately. It takes a little while for the service to start and accept requests.

Issues can happen due to various issues starting from incorrect configuration or structure issue.

Best way to check logs: https://$webapp_name.scm.azurewebsites.net/api/logstream or logstream from console  or https://$webapp_name.scm.azurewebsites.net/api/logs/docker

So in case the Web App Url is : https://webapp0610.azurewebsites.net

The log can be accessed at -https://webapp0610.scm.azurewebsites.net/api/logstream

or check the docker log files under https://webapp0610.scm.azurewebsites.net/api/logs/docker

In case of failure we can easily debug the issue from log.

Build Execution

For detailed steps on how to initiate Build Azure Web App, review artifacts, and ultimately deploy to Azure Web App please refer to Build and deploy execution through FlexDeploy

Congratulations! You have successfully completed the Node.js Application deployment to the Azure Web App tutorial.

Now that you have configured FlexDeploy for one Azure Web App, it is extremely easy to replicate the same for other Azure Web App. Simply use the Copy Project feature and a new project will be created with all of the configuration completed already. You just need to make the necessary configuration changes.