Node.js with TypeScript: The Ultimate Guide to Automated Deployment on DigitalOcean Using GitHub Actions

vijeth-simha

Vijeth Simha

Posted on January 12, 2024

Node.js with TypeScript: The Ultimate Guide to Automated Deployment on DigitalOcean Using GitHub Actions

Thank you for taking the time to read this post.

In my last post, I discussed deploying code to DigitalOcean. Building on that, this post delves into automating the deployment process using GitHub Actions.

We'll explore the steps and benefits of this method, ensuring a seamless and efficient deployment experience.

Table of contents

Create Github secret keys

To begin, we need to generate secret keys that will securely store our DigitalOcean credentials.

First, log in to your GitHub account. Once logged in, navigate to your repository and look for the settings icon. This is typically found in the upper right corner, represented by a gear symbol. Click on this icon to access your repository settings.

Image description

Then, navigate to the 'Security' section. Here, you'll find the 'Secrets and Variables' option. Click on this to proceed. Next, select 'Actions' to access the area where you can manage your secret keys. This is illustrated in the image below.

Image description

It's essential to create secrets for SSH_PASSWORD, SSH_USER, and DROPLET_IP. These represent the SSH login password, username, and IP address of your DigitalOcean droplet, respectively.

To add a new secret, click on the 'New Repository Secret' button. This can be found at the top right of the 'Secrets and Variables' section, as shown in the first image below.

Image description

Next, you'll need to enter the necessary credentials. In the fields provided, add the respective values for each secret key. This step is illustrated in the second image below.

Image description

Back to top

Automate the deployment

To begin automating deployment, start by creating a .github/workflows folder in your project's root directory.

Next, create a YAML file within this folder. You can name it as you prefer, such as deployment.yml.

Follow the below steps.

The first step in configuring the pipeline is to name it, as shown below

name: CI/CD
Enter fullscreen mode Exit fullscreen mode

The next step is to trigger the CI/CD Pipeline by:

on:
  push:
    branches:
      - main
Enter fullscreen mode Exit fullscreen mode
  • on: push specifies that the instructions will execute whenever code is pushed to the repository.
  • branches: - main indicates that these actions will trigger only for pushes to the 'main' branch.

The next step is to define the Job Definition

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
Enter fullscreen mode Exit fullscreen mode
  • build-and-deploy: This is the name of the job. It's a set of tasks that will be executed.
  • runs-on: ubuntu-latest: This line ensures the job runs on the latest Ubuntu version, a widely-used operating system for server environments.

Following this, we define the individual steps within the job.

 steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy
        run: |
          sshpass -p ${{ secrets.SSH_PASSWORD }} ssh -o StrictHostKeyChecking=no ${{ secrets.SSH_USER }}@${{ secrets.DROPLET_IP }} << EOF
            cd <<YOUR_CODE_REPOSITORY_NAME>>/
            git pull origin main
            npm install
            npm run build
            pm2 reload all
          EOF
Enter fullscreen mode Exit fullscreen mode

The above section involves four steps.

  1. Checkout Code

    • uses: actions/checkout@v2: This is a GitHub Action to check out the code from the repository, making it available to subsequent steps in the job.
  2. Install Dependencies

    • run: npm install: This command installs all the dependencies required for the project, as defined in a file usually called package.json.
  3. Build

    • run: npm run build: This command builds the project. Depending on how it's set up, this might involve converting TypeScript code to JavaScript code, minifying files, etc.
  4. Deploy

    • This is a multi-line script that automates the deployment of the code to a remote server.
    • It uses sshpass to log in to the remote server using SSH without needing to enter a password manually. The password and other details are stored in GitHub secrets for security.
    • The script then changes the directory to <<YOUR_CODE_REPOSITORY_NAME>>, pulls the latest changes from the master branch, installs any new dependencies, builds the project on the server, and finally, reloads all processes managed by pm2, which is a process manager for Node.js applications.

If you're already familiar with the process or prefer to skip the detailed explanations, you can simply copy the code snippet provided below and paste it into your deployment.yml file.

name: CI/CD

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy
        run: |
          sshpass -p ${{ secrets.SSH_PASSWORD }} ssh -o StrictHostKeyChecking=no ${{ secrets.SSH_USER }}@${{ secrets.DROPLET_IP }} << EOF
            cd <<YOUR_CODE_REPOSITORY_NAME>>/
            git pull origin main
            npm install
            npm run build
            pm2 reload all
          EOF

Enter fullscreen mode Exit fullscreen mode

This is it now push the code to your main branch.

This completes the setup! Now, go ahead and push your code to the main branch. If everything is configured correctly, you should see a green checkmark indicating a successful deployment, as illustrated in the image below.

Image description

This signifies that your automated deployment pipeline is functioning as expected.

Back to top

Finally

As you embark on this journey to automate your deployment to DigitalOcean feel free to use my project as a practical example to follow along with the steps outlined above.

Should you encounter any challenges or have questions during the process, please don't hesitate to leave a comment below.

Feel free to reach out to me on

Back to top

💖 💪 🙅 🚩
vijeth-simha
Vijeth Simha

Posted on January 12, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related