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
Checklist | Description |
|---|---|
Azure Tenant Id | Azure Tenant Id for the company |
Azure Subscription Id | Azure Subscription where the Web App exists |
Azure Client ID | Client ID to connect to desired Azure Subscription |
Azure Client Key | Password for the Client ID |
Azure Client ID permission | The Client ID must have relevant access in target Web App to deploy code |
Azure Web App | The Web App with relevant runtime should already be created |
Azure Resource Group | The Resource Group containing the Web App |
Azure CLI installation | Azure CLI needs to be installed where the plugin operation shall run (FlexDeploy server) |
Azure CLI in class path | Azure CLI should be added to class path on the FlexDeploy Server. Else the path can also be set under FlexDeploy environment level property |
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.
Navigate to the Topology Tab
Select Integrations from the left-hand pane
Navigate to the Cloud tab under Topology
Create a new Cloud account of the provider type “Azure” with the “+” button.
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).
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.