Virtual machines (VM) offer great flexibility for hosting web applications. A developer/engineer is able to configure and control every piece of software and every setting that the application needs to run. Azure, one of the largest cloud hosting platforms, has virtual machine offerings for both Linux and Windows-based operating systems. In this tutorial, you will learn how to set up a continuous deployment pipeline to deploy a Node.js application to an Azure virtual machine.

Prerequisites

To follow this post, a few things are required:

  1. Node.js installed on your system (version >= 10.3)
  2. An Azure account
  3. A CircleCI account
  4. A GitHub account
  5. Azure CLI installed on your system

With all these installed and set up, we can begin the tutorial.

Cloning the Node.js project

First we need to clone the project that we will be deploying to the Azure VM. This project is a basic Node.js API with a single endpoint for returning an array of todo objects. Go to the location where you want to store the project and clone it:

git clone --single-branch --branch base-project https://github.com/coderonfleek/node-azure-vm.git

Once the project has been cloned, go to the root of the project and install dependencies:

cd node-azure-vm
npm install

Run the application using the npm run dev command. The application will start up at the address http://localhost:5000. When the application is up and running, enter http://localhost:5000/todos in your browser to see the list of todos.

Todos Endpoint - Node App

Now, go to the package.json file of your project and add these scripts in the scripts sections:

"scripts": {
    .....,
    "stop": "pm2 kill",
    "start": "pm2 start server.js"
}

The start and stop scripts will use the pm2 process manager to start and stop the Node.js application on the VM. The pm2 script will be installed globally on the VM when it has been set up.

At the root of the project, run the rm -rf .git command to remove any .git history. Then push the project to GitHub. Make sure that this is the GitHub account connected to your CircleCI account.

Setting up a virtual machine on Azure to run Node.js

Next, create a new VM on Azure and set its environment up for hosting the Node.js application. These are the steps:

  1. Create a new VM instance
  2. Install nginx
  3. Configure nginx to act as a proxy server. Route all traffic to port 80 on your VM to the running instance of the Node.js application on port 5000
  4. Install Node.js on the VM and clone the app from the GitHub repo into a folder in the VM
  5. Install pm2 globally

Do not be intimidated by the complexity of these steps! You can complete all five with one command. At the root of your project, create a new file named cloud-init-github.txt; it is a cloud-init file. Cloud-init is an industry-standard method for cloud instance initialization.

In the cloud-init file, enter:

#cloud-config
package_upgrade: true
packages:
  - nginx
write_files:
  - owner: www-data:www-data
    path: /etc/nginx/sites-available/default
    content: |
      server {
        listen 80;
        location / {
          proxy_pass http://localhost:5000;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection keep-alive;
          proxy_set_header X-Forwarded-For $remote_addr;
          proxy_set_header Host $host;
          proxy_cache_bypass $http_upgrade;
        }
      }
runcmd:
  # install Node.js
  - 'curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -'
  - 'sudo apt-get install -y nodejs'
  # clone GitHub Repo into myapp directory
  - 'cd /home/azureuser'
  - git clone "https://github.com/coderonfleek/node-azure-vm" myapp
  # Install pm2
  - 'sudo npm install pm2 -g'
  # restart NGINX
  - service nginx restart

All five of the steps I described earlier are included in this file. Make sure you replace the sample GitHub repo with the name of your repository in the git clone command. Note that you are cloning the project in a myapp folder inside the home directory: /home/azureuser.

Next, use the configuration in this file to create a new VM instance on Azure. Make sure that you are logged in to Azure on your CLI (run az login to log in) and run:

az vm create \
  --resource-group Demos-Group \
  --name node-vm \
  --location eastus \
  --image UbuntuLTS \
  --admin-username azureuser \
  --generate-ssh-keys \
  --custom-data cloud-init-github.txt

Note the value of each parameter set in the command:

  • Demos-Group is the Azure resource group you are creating the VM in
  • node-vm is the name of your VM
  • eastus is the region you are creating the VM in
  • UbuntuLTS is the VM operating system
  • azureuser is the admin user for the VM; it will be used to connect via SSH into the VM
  • cloud-init-github.txt is the cloud VM configuration file you just wrote

When the command is done running, a response object is printed to the screen. Make sure you save the privateIpAddress property of the object. privateIpAddress is the IP address you will use to access your application in the browser and via ssh.

Go to your resources page in the Azure portal. Click Virtual Machines to review your VM instance.

VM - Azure

Web port 80 is not open by default on the VM. You need to open this port explicitly to allow web requests to hit the server. To open port 80, run:

az vm open-port \
  --port 80 \
  --resource-group Demos-Group \
  --name node-vm

Note that the VM name and resource group are passed in this command. When the command is done, a big chunk of json is printed on your CLI. We are not using it in the tutorial, so feel free to ignore this information.

Generating SSH keys on the server

Our next step is to generate ssh keys on the server to give the continuous deployment pipeline script access to the VM.

SSH into your server, making sure to replace YOUR-PUBLIC-IP-ADDRESS with what was returned when you set up the VM:

ssh azureuser@YOUR-PUBLIC-IP-ADDRESS

This command gets you into the home directory. Go to the .ssh folder by running cd .ssh. Generate the ssh keys:

ssh-keygen

Press Enter to accept the default location with id_rsa as the file name. CircleCI requires an empty paraphrase for access, so press Enter twice in reponse to the paraphrase and confirm paraphrase prompts.

Next, append the contents of the public key to the authorized_keys file by running:

cat id_rsa.pub >> authorized_keys

Then, print out the contents of the private key:

cat id_rsa

Copy this information and save it in a safe location. You will be adding it to CircleCI later on.

Assigning permissions to the VM user

When the project folder was cloned during the setup process, the root user created the myapp folder. That means that our VM’s admin user, azureuser cannot update the contents of the myapp folder. We need to give our VM’s admin user the permissions to update the myapp folder.

To begin, make sure that you have moved out of the .ssh folder back to the home directory containing myapp. Change azureuser to have root as its default group using the command:

sudo usermod -g root azureuser

Next, you need to change the owner and group of all of the files in myapp to azureuser and root. Use the command:

sudo chown -R azureuser:root myapp

Now, if you run ls -l myapp, you will see the output indicating that azureuser has ownership of myapp and its content.

User permissions - VM

You can now set the privileges on all folders and files to read/write/execute for owner and group and to nothing for public. Enter:

sudo chmod -R 770 myapp

Add the project to CircleCI

To begin, make sure that you have pushed the latest updates to your project to GitHub.

Now, go to the CircleCI Projects page to add the project.

Add Project - CircleCI

Click Set Up Project.

Add Config - CircleCI

On the project setup page, click Use Existing Config to indicate that you will be adding a configuration file manually and not using the sample. Next, you get a prompt to either download a configuration file for the pipeline or to start building.

Build Prompt - CircleCI

Click Start Building. This build will fail because you have not yet set up the configuration file.

Before leaving the CircleCI console, you need to add the SSH key you saved earlier (the private key you copied to a secure location). Go to the Project Settings page of your project. From the side menu, click SSH keys . Scroll down to the Additional SSH Keys section and click Add SSH Key. In the dialog that pops up, enter your public IP in the Hostname field and your private key in the Private Key field. Click Add SSH Key to save the information.

Add SSH Key - CircleCI

After adding the key, it will be shown in a Hostname/Fingerprint pair on a table in the Additional SSH Keys section. Copy this fingerprint. It will be required in the pipeline configuration file.

Create pipeline configuration environment variables

Because the VM user and public IP will be used in the pipeline configuration, it is good practice to make them environment variables. From the side menu, click Environment Variables on the side menu and enter the following information:

  • For AZURE_VM_SSH_FINGERPRINT, enter the fingerprint that was generated after you added the SSH key
  • For AZURE_VM_USER enter the VM admin, azureuser
  • In AZURE_VM_IP enter your VM public IP address

Configure the deployment pipeline

At the root of your project, create a folder and name it .circleci. In that folder, create a file named config.yml. Inside config.yml, enter this code:

version: 2
jobs:
  build:
    working_directory: ~/repo
    docker:
      - image: circleci/node:10.16.3
    steps:
      - checkout
      - add_ssh_keys:
          fingerprints:
            - $AZURE_VM_SSH_FINGERPRINT
      - run:
          name: Copy updated files to VM
          command: scp -o StrictHostKeyChecking=no -r ./* $AZURE_VM_USER@$AZURE_VM_IP:~/myapp

  deploy:
    machine:
      enabled: true
    steps:
      - run:
          name: Deploy Over SSH
          command: |
            ssh $AZURE_VM_USER@$AZURE_VM_IP "cd myapp && sudo npm run-script stop && sudo npm install && sudo npm start"

workflows:
  version: 2
  build:
    jobs:
      - build:
        filters:
          branches:
            only: main
      - deploy:
          requires:
            - build
          filters:
            branches:
              only: main

Your new config.yml file contains two jobs.

The build job checks out the code and uses the SSH key to securely copy the updated files from the application to the Azure VM myapp folder, using the scp command. The StrictHostKeyChecking=no part of the command supresses the prompt asking for a confirmation check for the host key. This keeps the prompt from blocking the automated process.

The deploy job then deploys the application over SSH. It goes into the myapp folder, stops the app, installs dependencies, and restarts the application.

The config.yml file contains a workflow definition that makes sure the build job completes successfully before deploy is run. The workflow also makes sure that deployments take place only when code is pushed to the main branch. That prevents deploying the application when team members are pushing to feature branches.

Save your changes and push your updates to your repository.

Build successful - CircleCI

Another successful build! Click the build job to review the details.

Build details - CircleCI

Next, click the deploy job to view its details.

Deploy details - CircleCI

So the workflow is running smoothly. That is great, but a more convincing test of the process is to open the deployed application in the browser. In your browser, load the endpoint http://[YOUR_PUBLIC_IP]/todos. Make sure you replace the placeholder YOUR_PUBLIC_IP with the correct information.

Todos Live - Browser

Now, that is convincing.

Next, add some more todo objects to your todos.js file:

module.exports = [
  ...,
  {
    id: 4,
    task: "Make Dinner"
  },
  {
    id: 5,
    task: "Take out the trash"
  }
];

Commit and push your updates to your repository to run the pipeline again. When the workflow is complete, reload your browser to check on your changes.

Todos Updated - Browser

Conclusion

Virtual machines come with great power and flexibility, and Azure provides one of the most reliable VM offerings in the market. Automating the deployment of your applications to an Azure virtual machine, as demonstrated in this tutorial, combines the reliability of Azure with the ease-of-use of CircleCI. Your team will benefit from having reliable web applications that are easier to deploy.

Happy coding!


Fikayo Adepoju is a Full-stack developer, technical writer, and tech content creator proficient in Web and Mobile technologies and DevOps with over 10 years experience developing scalable distributed applications. With over 40 articles written for CircleCI, Twilio, Auth0, and The New Stack blogs and also on his personal Medium page, he loves to share his knowledge to as many developers as would benefit from it. You can also check out his video courses on Udemy.