Continuously Deploy Your React App To Production Using Github Actions, PM2 and Digital Ocean With Zero Downtime.

Introduction

Continuous deployment is a practice that allows developers to automatically build, test, and deploy their code to production as soon as it is pushed to a version control repository. This can help to speed up the development process and reduce the risk of errors and downtime.

In this article, we will show you how to continuously deploy a React app to production using GitHub Actions, PM2, and DigitalOcean with zero downtime. This will involve creating a GitHub Action workflow that listens for new commits to the master branch of the app's repository, and then automatically builds, tests, and deploys the app to a DigitalOcean droplet running PM2.

Prerequisites

Before getting started, you will need the following:

• A GitHub account and a repository for your React app

• A DigitalOcean account and a droplet running Ubuntu 18.04 or later

• SSH access to the droplet

• The PM2 process manager installed on the droplet

Creating the GitHub Action Workflow

First, we will create a GitHub Action workflow that listens for new commits to the master branch of your app's repository and automatically builds and deploys the app.

To do this, navigate to your app's repository on GitHub and click on the "Actions" tab. Then, click on the "Set up a workflow yourself" button to create a new workflow file.

In the editor, paste the following code:

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 12
      - run: npm ci
      - run: npm run build
      - name: Deploy to production
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.PRODUCTION_HOST }}
          username: ${{ secrets.PRODUCTION_USERNAME }}
          password: ${{ secrets.PRODUCTION_PASSWORD }}
          script: |
            cd /var/www/my-app
            git pull origin main
            npm install && npm run build
            pm2 reload all

This workflow listens for new commits to the master branch and then runs the following steps:

• Check out the code from the repository

• Set up the Node.js runtime with version 12

• Install the app's dependencies using npm ci

• Build the app using npm run build

• Use the appleboy/ssh-action action to connect to the DigitalOcean droplet and deploy the app

Note that the appleboy/ssh-action action requires the following secrets to be set in the repository settings:

• PRODUCTION_HOST: The hostname or IP address of the DigitalOcean droplet

• PRODUCTION_USERNAME: The SSH username for the droplet

• PRODUCTION_PASSWORD: The SSH password for the droplet

Once you have added these secrets, save the workflow file and commit it to the repository. This will trigger the workflow to run, and you should see the build and deployment steps in the "Actions" tab.

Configuring PM2 on the DigitalOcean Droplet

To configure PM2 on your DigitalOcean droplet, follow these steps:

1. SSH into the droplet using the ssh command and the SSH credentials for your droplet.

ssh root@<droplet_ip_address>

1. Install PM2 using npm:

npm install pm2 -g

1. Create a directory for your app on the droplet, and navigate to it:

mkdir /var/www/my-app
git clone <git-url> /var/www/my-app
cd /var/www/my-app
npm install && npm run build

1. Use PM2 to run your app with the pm2 start command:

pm2 serve --spa dist

1. To ensure that PM2 automatically starts your app when the droplet is restarted, run the following command:

pm2 save
pm2 startup

This will save the current PM2 process list and generate a startup script that will be executed when the droplet is restarted.

1. Follow the instructions in the output of the pm2 startup command to complete the setup process.

Conclusion

Continuous deployment is a valuable software development practice that allows developers to automatically build, test, and deploy their code to production.

By leveraging tools such as Github Actions, PM2, and digital ocean, developers can quickly and easily deploy their apps with zero downtime.