How To Deploy Your Web App Using GitHub Actions (CI/CD) And QuickDeploy

Learn how to easily deploy you web apps on every push to your repository using GitHub Actions (CI/CD) and QuickDeploy. This guide is focused on quickly getting started with quickdeploy. We will look at how it works in general, but also what you should keep in mind when using it.

Prerequisites for this guide is that you used quickdeploy locally to deploy your app to your VPS. If you haven't done that yet, you can checkout the docs to get started.

The goal of this guide is to set up one workflow that will deploy your web app to your VPS.

What are GitHub Actions (CI/CD)?

GitHub Actions is a CI/CD platform provided by GitHub and automatically available with your GitHub repository. It allows you to automate different workflows such as testing, building, and deploying your code.

Deploy your Web App using GitHub Actions (CI/CD)

QuickDeploy in CI/CD works similiar to the local deployment. The main difference is that we need to first download the binary for every deployment and configure it using environment variables.

The workflow is split into 3 steps:

• Testing the connection to your VPS
• Setting up QuickDeploy
• Deploying your web app

You can either create a new workflow file using the GitHub UI or you can create a new file: .github/workflows/deploy.yml.

The content of the workflow file should look like this:

name: Deploy

on:
  push:
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest

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

      - name: Set up environment
        run: |
          # Determine platform
          PLATFORM="linux-amd64"
          echo "QUICKDEPLOY_PLATFORM=$PLATFORM" >> $GITHUB_ENV

      - name: Download QuickDeploy CLI
        run: |
          echo "Downloading QuickDeploy CLI..."

          # Download latest QuickDeploy binary
          DOWNLOAD_URL="https://quickdeploy.dev/api/download/${{ env.QUICKDEPLOY_PLATFORM }}"
          echo "Download URL: $DOWNLOAD_URL"

          curl -fsSL "$DOWNLOAD_URL" -o quickdeploy
          chmod +x quickdeploy

          # Verify download
          ./quickdeploy --version
          echo "QuickDeploy CLI downloaded successfully"

      - name: Configure QuickDeploy
        run: |
          echo "Configuring QuickDeploy..."

          # Create SSH key file
          mkdir -p ~/.ssh
          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa

      - name: Test SSH Connection
        run: |
          echo "Testing SSH connection..."
          ssh -i ~/.ssh/id_rsa -o StrictHostKeyChecking=no -o ConnectTimeout=10 ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_IP }} "echo 'SSH connection successful'"

      #todo: determine if you need this, if so use your own variables and secrets
      - name: Create .env.production
        working-directory: landing-page
        run: |
          echo "Creating .env.production file..."
          cat > .env.production << EOF
          NODE_ENV=production
          NEXT_TELEMETRY_DISABLED=1
          
          # Add your environment variables here using secrets/vars
          # Example:
          # NEXT_PUBLIC_API_URL=${{ vars.NEXT_PUBLIC_API_URL }}
          # DATABASE_URL=${{ secrets.DATABASE_URL }}
          EOF
          
          echo ".env.production created successfully"

      - name: Deploy with QuickDeploy
        working-directory: #todo
        env:
          QUICKDEPLOY_IP: ${{ secrets.SERVER_IP }}
          QUICKDEPLOY_USER: ${{ secrets.SERVER_USER }}
          QUICKDEPLOY_SSH_KEY_PATH: ~/.ssh/id_rsa
          QUICKDEPLOY_LICENSE_KEY: ${{ secrets.QUICKDEPLOY_LICENSE }}
        run: |
          echo "Starting deployment with QuickDeploy..."
          
          ../quickdeploy push --domain quickdeploy.dev --project quickdeploy --detach

      - name: Cleanup
        if: always()
        run: |
          echo "Cleaning up..."
          rm -f ~/.ssh/id_rsa
          rm -f quickdeploy

In addition to creating the workflow file you need to add the following secrets to your repository. You can add them in the "Settings" > "Secrets and variables" > "Actions" section.

• QUICKDEPLOY_LICENSE: The license key you want to use for the deployment. (To find your license key check your local ~/.quickdeploy/config.json file)
• SSH_PRIVATE_KEY: The private key you want to use for the deployment. (This has to be the whole content of your private key file)
• SERVER_USER: The user you want to use for the deployment.
• SERVER_IP: The IP address of your server.

You also have to specify the working directory of your app. This is the directory that contains your app's source code. Usually this can be set to . if your app is the root of your repository.

Thinks to keep in mind

The above workflow will run in a detached mode. This means that the deployment will only take a few seconds and will not fail. In this case I set it like this to reduce the minutes it uses of my free GitHub Actions minutes.

If you want to wait for the deployment to finish you can remove the --detach flag.

Conclusion

With this workflow you can easily deploy your app to your VPS using GitHub Actions (CI/CD) and QuickDeploy. This is a great way to automate your deployment process and make sure that your app is always up to date.

If you have any questions feel free to send me a message in the chat.