Azure App Service enables you to build and host web apps, mobile back ends, and RESTful APIs in the programming language of your choice without managing infrastructure. It offers auto-scaling and high availability, supports both Windows and Linux, and enables automated deployments from GitHub or any Git repo.
In this article, we are going to learn about How to deploy a Node.JS application on Azure App Service.
Prerequisites
- An Azure subscription
- An Azure account which has Microsoft.Web/actions on that subscription or Contributor role on Azure subscription
- Docker, git, Node, NPM
- Azure CLI installed, see How to install AZ ClI on Ubuntu 22.04
- A Node.JS project, let’s use my dummy NodeJS project in this article https://github.com/epiHATR/simple-express
Ignore Step 1 and Step 2 if you have your own Docker image
Step 1. Create a Node.JS application with express
Let’s clone simple-express project to your local machine. It is all small Node.JS application which running a HTTP server using express.
# create a folder for our project
mkdir cli-nodejs-app
cd cli-nodejs-app
# now clone simple-express repository
git clone https://github.com/epiHATR/simple-express
# build simple-express
cd simple-express
npm install
# run simple-express locally
node index.js
#Output
{"level":"info","message":"NodeJS express running on port 8000"}
Let’s open your favorite web browser and access http://localhost:8000, a json message like below image appears.
You can also update an environment variable called ENV_NAME, PORT, to print out it along side with the above JSON. Let’s press Ctrl + C to stop running Node.JS application from your terminal and run following command to start with Environment Variables:
# change environment variables export PORT=9000 export ENV_NAME="production" # now start simple-express again. node index.js
Now this time, let’s open your browser and type http://localhost:9000 and voila.
Step 2. Build and publish docker images
This simple-express repository has included a Dockerfile which describe how its images created and build. Let’s use docker commands to build, tags, and push your image to Docker Hub
Build Docker Image
Run the following command to build the image:
# build docker images docker build --tag simple-express .
Run Docker Image locally
Test that the build works by running the Docker container locally:
# run docker image docker run -d -p 9000:8000 simple-express
Login to Docker Hub
# login to Docker (you can do the same with Azure Container Registry) docker login --username # you may aksed for the password
Tag and push Docker image
When the log in is successful, tag your local Docker image to the registry:
# tagging Docker image docker tag simple-express <your dockerhub username>/simple-express:<tag name> # for example # docker tag simple-express hidetran/simple-express:latest # # # now publish Docker image by docker push command docker push <your dockerhub username>/simple-express:<tag name> #
Step 3. Deploy Docker image to Azure app service
Create Azure App Service Plan
An App Service plan defines a set of compute resources for a web app to run. These compute resources are analogous to the server farm in conventional web hosting. One or more apps can be configured to run on the same computing resources (or in the same App Service plan)
We’re going to create an app service plan which host our Azure app service, open your terminal windows and type following command line by line:
# login into Azure CLI az login -t <your Azure Tenant ID> az account set -s <your Azure subscription id> # create a resources group az group create --name simple-express-rg --location northeurope # now create an Azure app service plan az appservice plan create --name simple-express-plan --resource-group simple-express-rg --is-linux
Create Azure App Service with docker image
Now create your app service with the docker images that has pushed to docker hub in previous steps.
# now create an Azure app service az webapp create --name simple-express-webapp --plan simple-express-plan --resource-group simple-express-rg -i hidetran/simple-express:latest
Please wait for a couple of minutes then we can start browsing our simple-express website. Let’s get your app service plan domain by:
# get app service plan domain az webapp show --name simple-express-webapp --resource-group simple-express-rg --query defaultHostName -o tsv
Then open it it the web browser and you will see
Step 4. Advance configuration
Let’s take a look at the above image, the website is saying that Simple Express on development, that is because of this Node.JS code block:
...
const ENV_NAME = process.env.ENV_NAME || 'development'
...
...
app.get('/', (req, res) => {
var data = {
sevice_name: 'Simple Express on ' + ENV_NAME,
description: 'Simple nodejs app running with express. Machine name: '+os.hostname()
}
res.set('Content-Type', 'application/json');
res.send(JSON.stringify(data, null, 4))
})
Our Node.JS application was looking for an environment variable called ENV_NAME to bind it out the message and use development for default value. Let’s change this by using App service Configuration Settings.
# set value for Azure app service Configurations
az webapp config appsettings set -g simple-express-rg -n simple-express-webapp --settings ENV_NAME=production
#
# Output
[
{
"name": "ENV_NAME",
"slotSetting": false,
"value": "production"
}
]
Now try to refresh your browser and see new ENV_NAME has been used for our Simple-Express application.
Conclusion
By following above steps, we have learnt about how to create your Node.JS application and publish to Docker Hub. You can also create an Azure App service which running a Linux app service plan and using your pushed images.
The source code for Node.JS application is now available at Github epiHATR/simple-express
Leave a Reply