Zero Downtime Deployment Strategy for a React Dashboard with NGINX

In this blog, we'll discuss a zero-downtime deployment strategy for a React Dashboard using NGINX. With this approach, you'll be able to make seamless updates to your application without any downtime, ensuring a smooth user experience.

Overview

Here's how the zero-downtime deployment strategy works:

1. NGINX points to a folder that is a symlink, which we'll call the "deployment" folder.
2. When deploying a new instance, a new folder is created with the timestamp as its name.
3. The symlink is switched to point to the new folder.
4. This allows users to easily switch between deployments and roll back to previous versions if necessary.
5. Older folders are deleted after five deployments.

Let's dive into each step in more detail.

Step 1: Set Up NGINX Configuration

First, let's configure NGINX to point to our symlinked "deployment" folder. Create an NGINX configuration file named nginx.conf and add the following content:

http {
    server {
        listen 80;
        server_name yourdomain.com;

        location / {
            root /path/to/your/deployment/folder;
            try_files $uri /index.html;
        }
    }
}

Replace yourdomain.com with your actual domain name and /path/to/your/deployment/folder with the path to your symlinked "deployment" folder.

Step 2: Create a New Folder with a Timestamp

When deploying a new instance, create a new folder with the current timestamp as its name. You can do this using a simple bash script:

#!/bin/bash
timestamp=$(date +%Y%m%d%H%M%S)
mkdir /path/to/your/instances/folder/$timestamp

Replace /path/to/your/instances/folder with the actual path to your instances folder.

Step 3: Switch the Symlink to the New Folder

After creating the new folder with the timestamp, switch the symlink to point to it. You can do this using the ln command in your bash script:

#!/bin/bash
timestamp=$(date +%Y%m%d%H%M%S)
mkdir /path/to/your/instances/folder/$timestamp
ln -sfn /path/to/your/instances/folder/$timestamp /path/to/your/deployment/folder

Step 4: Deploy the React Dashboard

Now, deploy the React Dashboard to the newly created timestamp folder. You can use any build tool or process you prefer, such as Webpack or Create React App. For example:

#!/bin/bash
timestamp=$(date +%Y%m%d%H%M%S)
mkdir /path/to/your/instances/folder/$timestamp
ln -sfn /path/to/your/instances/folder/$timestamp /path/to/your/deployment/folder

cd /path/to/your/react/dashboard
npm install
npm run build
cp -R build/* /path/to/your/instances/folder/$timestamp

Step 5: Delete Older Folders

To prevent clutter, delete older folders after five deployments. You can do this using the find command in your bash script:

#!/bin/bash
timestamp=$(date +%Y%m%d%H%M%S)
mkdir /path/to/your/instances/folder/$timestamp
ln -sfn /path/to/your/instances/folder/$timestamp /path/to/your/deployment/folder

cd /path/to/your/react/dashboard
npm install
npm run build
cp -R build/* /path/to/your/instances/folder/$timestamp

find /path/to/your/instances/folder -mindepth 1 -maxdepth 1 -type d | sort | head -n -5 | xargs rm -rf

This script will delete all folders except the five most recent ones.

Conclusion

By following these steps, you can achieve a zero-downtime deployment strategy for your React Dashboard with NGINX. This approach ensures that your users will always have access to the latest version of your application without any interruptions. Additionally, it allows for seamless rollbacks and easy management of multiple deployments.