Setting up GitHub Actions for Nuxt3 project on Digital Ocean

Setting up CI/CD is a common event in the world of development in modern times. However, it is not always easy to find a description or full documentation on how to set up a project in a new environment. In this article, I decided to look at three different ways to deploy a project written in Nuxt3 using GitHub Actions (CI/CD) on Digital Ocean.

Let’s take a closer look at them.

Let’s look at three scenarios: one for using `npm`, the second for `NVM` (Node Version Manager) and the third with downloading and unpacking the archive, as well as setting up the server, including Nginx configuration with SSL.

General Steps

Step 1: Creating and Configuring SSH Keys

  1. Create an SSH key in your Digital Ocean terminal

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

Follow the instructions to create the key, including setting the save path and password (if necessary).

  2. Add the public key to Digital Ocean:

Go to the Digital Ocean control panel.

Find the “Security” section and add your SSH public key there:

cat ~/.ssh/id_rsa.pub

  3. Add the private key to GitHub Secrets:

Open your GitHub repository settings.

Go to the “Secrets” section.

Create a new secret, for example `DO_SSH_KEY`, and paste the contents of your private key :

cat ~/.ssh/id_rsa

Step 2: Setting up the Digital Ocean Server

  1. Install Nginx:

sudo apt update
sudo apt install nginx

  2. Set up a firewall:

bashCopy codesudo ufw allow 'Nginx Full'
sudo ufw enable

  3. Set up SSL with Certbot (Let’s Encrypt):

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Follow Certbot’s instructions to obtain and configure an SSL certificate.

  4. Set up Nginx configuration for your Nuxt.js application.

Use a text editor to customize the configuration file. For example, you can use nano (or any other text editor):

sudo nano /etc/nginx/sites-available/yourdomain

Nginx configuration example:

server {

    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    location / {
        proxy_pass http://localhost:3000; js
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    listen [::]:443 ssl ipv6only=on; 
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem; 
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem; 
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

}

Remember to replace `yourdomain.com` with your domain and configure the port if it is different.

Create a symbolic link to this file in the /etc/nginx/sites-enabled directory

sudo ln -s /etc/nginx/sites-available/yourdomain /etc/nginx/sites-enabled/

Check your nginx configuration for errors

sudo nginx -t

If everything is ok, restart Nginx to apply the changes:

sudo systemctl restart nginx

  5. Install Node.js and npm (if you use the regular approach, without NVM):

curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

  6. Install NVM, Node.js and npm (if using NVM):

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.nvm/nvm.sh
nvm install 18

  7. Install and configure PM2 to manage your application:

npm install -g pm2

GitHub Actions Workflow Examples

Example 1: Using npm

The `.github/workflows/deploy.yml` file for a project that uses npm without NVM:

name: Deploy to Digital Ocean with npm
on:
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Setup SSH Agent
      uses: webfactory/ssh-agent@v0.5.2
      with:
        ssh-private-key: ${{ secrets.DO_SSH_KEY }}
    - name: Deploy to Digital Ocean
      run: |
        ssh -o StrictHostKeyChecking=no ${{ secrets.DO_USERNAME }}@${{ secrets.DO_HOST }} "
          cd /path/to/your/app
          git pull
          npm install
          npm run build
          pm2 restart all
        "

Example 2: Using NVM

The `.github/workflows/deploy.yml` file for a project that uses NVM:

name: Deploy to Digital Ocean with NVM
on:
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Setup SSH Agent
      uses: webfactory/ssh-agent@v0.5.2
      with:
        ssh-private-key: ${{ secrets.DO_SSH_KEY }}
    - name: Deploy to Digital Ocean
      run: |
        ssh -o StrictHostKeyChecking=no ${{ secrets.DO_USERNAME }}@${{ secrets.DO_HOST }} "
          export NVM_DIR=\"$HOME/.nvm\"
          [ -s \"\$NVM_DIR/nvm.sh\" ] && \. \"\$NVM_DIR/nvm.sh\"
          nvm use 14
          cd /path/to/your/app
          git pull
          npm install
          npm run build
          pm2 restart all
        "

Example 3: We use npm run build in Actions and unpack the archive on the server (This option will help optimize the use of CPU & Memory on the server):

name: Build and Deploy Nuxt.js App to Digital Ocean
on:
  push:
    branches:
      - main  
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Set up Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '18'
    - name: Install Dependencies
      run: npm install
    - name: Build
      run: npm run build
    - name: Archive Production Artifacts
      run: tar -czvf build.tar.gz ./dist  
   - name: Setup SSH Agent
      uses: webfactory/ssh-agent@v0.5.2
      with:
        ssh-private-key: ${{ secrets.DO_SSH_KEY }}
    - name: Transfer Build Artifacts
      run: scp -o StrictHostKeyChecking=no build.tar.gz ${{ secrets.DO_USERNAME }}@${{ secrets.DO_HOST }}:/path/to/deployment
    - name: Deploy to Server
      run: |
        ssh -o StrictHostKeyChecking=no ${{ secrets.DO_USERNAME }}@${{ secrets.DO_HOST }} "
          cd /path/to/deployment
          tar -xzvf build.tar.gz -C /path/to/webroot
        "

Conclusion

These instructions and examples provide a complete picture of how to set up CI/CD for your Nuxt.js project on Digital Ocean, including setting up a server with Nginx and SSL. Choose the appropriate example depending on your NVM usage. Make sure you have configured your server, SSH keys and GitHub Secrets correctly.