Node.js with TypeScript: The Ultimate Guide to Automated Deployment on DigitalOcean Using GitHub Actions
Tags: tutorial, devops, webdev, beginners
Published: 2024-01-12 20:12:28

Thank you for taking the time to read this post.

In my last [post](https://dev.to/vijeth-simha/from-beginner-to-pro-deploying-typescript-applications-with-nodejs-postgresql-on-digitalocean-91k), 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** <a name="table-content"></a>

 * [Create Github secret keys](#github-secret-keys)
 * [Automate the deployment](#automate-deployment)

### Create Github secret keys <a name="github-secret-keys"></a>

To begin, we need to generate secret keys that will securely store our [DigitalOcean](https://www.digitalocean.com/) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgs4h8s5wbflftenwsfw.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/luaoa8vu1eax97itn1g1.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jldkignq6w7i9a9fi1b4.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbx1er0hp4koq43b0obz.png)

[Back to top](#table-content)


### Automate the deployment <a name="automate-deployment"></a>

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
```

The next step is to trigger the CI/CD Pipeline by:
```
on:
  push:
    branches:
      - main
```
* `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
```
* `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
```
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

```


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djio91qw1oykpnrpngb4.PNG)

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

[Back to top](#table-content)

###Finally###

As you embark on this journey to automate your deployment to DigitalOcean feel free to use my [project](https://github.com/vijeth-simha/education-documents-organizer) 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

* [Twitter](https://twitter.com/vijeth_simha)
* [Linkedin](https://www.linkedin.com/in/vijeth-simha/)
* [Github](https://github.com/vijeth-simha)

[Back to top](#table-content)