How To Build CI/CD For Static Next.js App Using Azure DevOps

A step by step guide With an Example Project

Bhargav Bachina
Oct 30 · 9 min read
Image for post
Image for post

There are a lot of deployment strategies when you deploy your Next.js applications to production and your deployment strategy is entirely depends on your application architecture. For example, If you are using Java or Nodejs with Next.js you need to deploy your application on respective environments. If you are serving the Next.js static assets with NGINX in that case, you can dockerize the app and put that on Azure AKS.

One way of developing Next.js applications is to use Azure blob storage for static web hosting. In this post, we will see how we can deploy a Next.js static website using Azure DevOps.

  • Introduction

Introduction

As I said earlier, one way of developing Next.js applications to put the Next.js build into Azure blob storage and distribute it with Azure CDN. As shown in the following figure all the Next.js static assets are uploaded into blob storage and configure Azure CDN to distribute the content across the world. Here is the full article on how to do that with an example project.

Image for post
Image for post
Azure CDN serving Next app

We have to build two pipelines to deploy this application using Azure DevOps.

Build Pipeline

This pipeline takes the code from the Azure Repos or any git source and goes through a series of actions such as install, test, build and finally, generate the artifacts ready for the deployments.

Image for post
Image for post
Build Pipeline

Release Pipeline

This pipeline takes the artifact and uploads all the files into the Azure blob service. You can have pre-deployment conditions such as approvals, manual only, etc for the release.

Image for post
Image for post
Release Pipeline

Example Project

Here is an example project which we can put in the Azure blob storage for static website hosting. This is a simple profile page with a header and some sections.

// clone the project
git clone https://github.com/bbachi/my-profile-nextjs.git
// install dependencies and start the project
npm install
npm run dev
// build the project
npm run build

You can clone the project and run it on your machine. Here is the demonstration when you run it on your localhost and the port 3000.

Image for post
Image for post
Example Project

Prerequisites

There are some prerequisites for this article you need to be familiar with the Next.js application and how it builds and some familiarity with the Azure account.

One way to deploy your Next.js static website on Azure is to log in to your portal and upload all the files manually. Check out this article on how we can do it manually.

Build Pipeline

We need to do build pipelines as part of continuous integration first. The way this pipeline works is that the moment you check-in code into Github or Azure Repos, this pipeline builds the project, test it, make the built artifact ready for deployment. Let’s follow all the steps to build this pipeline.

  1. Create a Project in Azure DevOps

Let’s create a project in your Azure DevOps account. I named it StaticWebsite with visibility of your choice. You can make it public or private.

Image for post
Image for post
Creating a project

Once you created this project you can see the dashboard which is empty right now.

Image for post
Image for post
Project Dashboard

Put your code in Azure Repos

It’s time to create a repo and place all the code from the example project from above and push your code into this repo. I created a repo called static-nextjs and push all the code into this repo.

Image for post
Image for post
Azure Repos

You can generate the Git credentials when you click on the clone button on the top right corner. You need these credentials if you want to push the code into this repo later.

Image for post
Image for post
Git Credentials

Create a Build Pipeline

Let’s start a pipeline by selecting a source and repository branch and by selecting a classic editor.

Image for post
Image for post
Select Classic Editor
Image for post
Image for post
Select a Source

On the next page select an Empty job

Image for post
Image for post
select an empty job

You need to define all the tasks under this job such as Install dependencies, Run Tests, Build the project, Copy Files, Archive files, Finally publish artifacts.

Image for post
Image for post
Build Pipeline

First, you need to click on the + icon on the right side of the Agent job to add tasks. We need to select the Command line task for the first three tasks: install, run tests, and build.

Image for post
Image for post
Command-line task

Install dependencies

When you run this pipeline you clone the Next.js project from Azure Repos. This repo doesn’t have any dependencies installed so we need to run npm install as a first task

Image for post
Image for post
Install Dependencies

Build the Project

Once you install the dependencies, we need to build the project for the artifact.

Image for post
Image for post
Build the project

Copy the files

We have the build ready so we need to copy files from the source folder to the target folder to staging. For this, we have to select the Copy Files task. All the code actually resides in this directory Build.SourcesDirectory and we need to move all the source code to stage directory Build.ArtifactStagingDirectory

Image for post
Image for post
Copy Files

Archive Files

We have copied all the files to the target folder. It’s time to create an Archive file with the task Archive Files. Select this task and give all the details such as the Root folder, archive type, and an archive file.

Image for post
Image for post
Archive Files

Publish Artifact

Use the task called Publish build artifacts to publish the artifact.

Image for post
Image for post
publish artifact

Finally, Define the trigger

Let’s define the trigger for this build. Edit the pipeline by clicking on the triggers and enable continuous integration. Any commit to the static-nextjs repo master branch triggers this pipeline.

Image for post
Image for post
Trigger

This is how the final artifact looks.

Image for post
Image for post
Artifacts

Here is the complete YAML for this build pipeline.

pipeline.yml

You can get above YAML from this edit pipeline screen.

Image for post
Image for post
Getting YAML

Release Pipeline

We are done with the Continuous integration part and let’s build a release pipeline for continuous delivery. Click on the releases and new release pipeline and follow these steps.

  1. Define the artifacts such as project, source, default version, etc

Define the Artifact

The first step is to define the artifact so that it takes that particular artifact after the build pipeline is completed. Make sure you have a trigger placed.

First, we need to add an artifact by selecting the source pipeline

Image for post
Image for post
Adding artifact

Make sure you have a Continuous deployment trigger enabled by clicking on the lightning icon on the top right corner. This triggers the release pipeline whenever a new artifact is available.

Image for post
Image for post
Continuous deployment trigger

Define a Stage

Let’s define the stage for the release. You can add as many stages as you want. You need to define the tasks for the stage. For simplicity, we are using here only one stage here.

Image for post
Image for post
Production

If you click on the 1 job 0 tasks link that will take you to the task details page. We have two tasks for this stage.

  1. Extract Files

Extract Files

This Extract Files task extracts the zip archive from the artifact and puts that in the destination folder. Make sure you have the right Archive FIle Pattern as (**/$(Build.BuildId).zip)

Image for post
Image for post
Extract files Task

Azure CLI

We have to select the Azure CLI task for uploading files since we are using Azure CLI commands to upload all these files from the Artifact archive.

Here is the inline script that we are using to upload all the files. Make sure you have the right subscription selected.

Image for post
Image for post
Upload Files

Make sure you should put the correct path in the Working Directory so that you upload only files you need instead of the entire directory path into Blob storage.

Image for post
Image for post
Working Directory

We might need to authorize with your subscription.

Image for post
Image for post
Authorize
az storage blob upload-batch -s ./ -d '$web' \
--account-name staticnextweb \
--account-key \ T0EhNSZ7PIqiH0vJ5NOxocH1tE65wyvC9gYvl4A2FtyonI6JmZ2THa8Eao2sSia1C8MSnl4oRAIfF/oa+QHs4Q==

We are uploading to the storage account staticnextweb with the destination $web container from the source ./. We need an account key to upload the files to Azure blob storage. You can get the account key from the following location in the Azure portal under your storage account.

Image for post
Image for post
Access Keys

Demo

It’s time for the demo. As soon as you check-in the code to master it triggers the build pipeline. Usually, you don’t check in the code directly into master instead you create a pull request. I just used a master here for simplicity.

Build Pipeline Demo

Image for post
Image for post
Build Pipeline Demo

Release Pipeline Demo

As soon as the build is completed and a new artifact will trigger the release pipeline.

Image for post
Image for post
Release Pipeline Demo

Once it is succeeded, you can see that some of the files are updated in the Azure blob storage.

Image for post
Image for post
Azure Blob Storage

Here is the change deployed to the site

Image for post
Image for post
Deployment Successful

Summary

  • One way of developing Next.js applications is to use Azure blob storage for static web hosting.

Conclusion

This is a basic way of deploying a Next.js static website using Azure DevOps. I didn’t use variables, Azure key vault, task groups in these pipelines because we are deploying into one environment. Those are out of scope for this article. I will write a full article on using all these while deploying into different environments.

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never…

Sign up for BB Tutorials & Thoughts

By Bachina Labs

Tutorials Ranging from Beginner guides to advanced on Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML. Thank you for subscribing and let me know if you want me cover anything?  Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store