Next.js Deployment Script for Zero Downtime on VPS with PM2

Deploying a Next.js application with zero downtime is crucial, especially in production environments where any delay can affect user experience. In this article, we’ll walk you through setting up a deployment process that minimizes downtime and ensures a smooth transition between builds.

#Why You Need a Zero Downtime Deployment Script

When deploying updates to your Next.js application, there’s always a risk of downtime—especially on a VPS where resources might be more limited compared to cloud platforms. Downtime can occur for various reasons:

• Building and installing dependencies: If the build process takes time, your users might experience downtime while the application is being updated.
• Potential errors during deployment: Issues like missing dependencies or failed builds can cause your application to be unavailable until the problem is resolved.
• File replacement during deployment: Simply replacing the old build with a new one can lead to errors or incomplete updates, resulting in downtime.

#Step 1: Configure next.config.js

To start, you’ll need to configure your next.config.js file to support a custom build directory. This allows us to build the project in a temporary location before swapping it with the existing build directory. Add the following line to your next.config.js:

module.exports = {
  distDir: process.env.BUILD_DIR || '.next',
};

This configuration ensures that during the build process, the output will be placed in the directory specified by the BUILD_DIR environment variable, or .next by default.

#Step 2: Create the deploy.sh Script

Next, you’ll create a deployment script, deploy.sh, that automates the process of pulling the latest code, installing dependencies, building the project, and handling the deployment. Here’s the script:

#!/bin/bash
 
echo "Deploy starting..."
 
git pull
 
npm install || exit
 
BUILD_DIR=temp npm run build || exit
 
if [ ! -d "temp" ]; then
  echo '\033[31m temp Directory not exists!\033[0m'
  exit 1;
fi
 
if [ -d ".next" ]; then
  mv .next .next_backup || exit
fi
 
rm -rf .next || {
  echo '\033[31m Failed to remove old .next directory!\033[0m'
  mv .next_backup .next
  exit 1;
}
 
mv temp .next || {
  echo '\033[31m Failed to move new build to .next!\033[0m'
  mv .next_backup .next
  exit 1;
}
 
pm2 reload nextapp --update-env || {
  echo '\033[31m PM2 reload failed! Reverting to old build...\033[0m'
  mv .next_backup .next
  exit 1;
}
 
rm -rf .next_backup
 
echo "Deploy done."

#How the Script Works

1. Pull Latest Code: The script begins by pulling the latest code from your repository using git pull.
2. Install Dependencies: Next, it installs the necessary dependencies with npm install.
3. Build the Project: The project is then built in a temporary directory (temp) to avoid disrupting the current build.
4. Backup Current Build: If the build is successful, the script creates a backup of the current build directory (.next).
5. Swap Builds: The old build directory is removed, and the new build is moved into place. If any errors occur during this process, the script reverts to the old build.
6. Reload Application: Finally, the script reloads the application using PM2. Note that nextapp is the PM2 process name, so replace it with your own project name.
7. Cleanup: After the deployment is successful, the script cleans up any backup or failed directories.

#How to Use This Deployment Script

After setting up the script, follow these steps to deploy your Next.js application with zero downtime:

1. SSH into Your VPS:

First, log in to your VPS using SSH. This will give you access to the server where your Next.js application is hosted.

ssh your-username@your-vps-ip

2. Add the Two Settings:
   • Modify your next.config.js as described in the previous section.
   • Create the deploy.sh script and make sure it’s executable:

chmod +x deploy.sh

3. Run the Deployment Script:

Whenever you need to update your application, simply run the deployment script:

sh deploy.sh

The script will pull the latest code, install dependencies, build the project, and reload the application with zero downtime.

#Conclusion

By following this deployment process, you can ensure that your Next.js application experiences zero downtime during deployments. The script handles potential errors and provides a fallback mechanism to keep your application running smoothly. Whether you’re deploying updates or scaling your application, this approach will help you maintain a seamless user experience.