github-actions-vercel

A simple PoC demonstrating Trunk Based CI/CD workflow, using GitHub actions and Vercel.

Environments

Overview

Trunk Based Workflow for Fast CI/CD

Refreshed on Trunk Based workflow (read more here).

Workflow Concepts

1. A Workflow is what GitHub calls Action(s)
2. Actions can have one or more Jobs, with one or more Steps
3. Workflows are created under .github/workflows (GitHub treats any yml file under workflows as an Action to be executed)
4. File name follows a pattern to loosely indicate the trigger method on_<trigger-method>.yml

How it works

1. Dev commits code to any branch (no open PR yet) -> Execute Linting job and deploys a preview URL to Vercel
2. PR is opened into main branch -> Execute Test jobs
3. PR is merged into main branch -> Project deployed to Staging env
4. Tag is created from main branch -> Project deployed to Production env

sequenceDiagram
    actor D as Dev
    participant B as Branch
    participant M as Main
    participant V as Vercel

    box GitHub
        participant B
        participant M
    end

    loop Push Code
        D->>B: Commit XYZ
        Note over B: 1.Lint<br>2.Built<br>3.Trigger Vercel Deploy
        B->>V: Deploy <Preview>
        Note over V: github-actions-vercel-8ga3p0aks-surfe.vercel.app
    end

    alt Open PR
        B->>M: New PR
        Note over M: 1.Build<br>2.1.Run Tests (Unit)<br>2.2.Run Tests (E2E)
    end
    
    alt Merge PR
        B->>M: Merge PR
        Note over M: 1.Build<br>2.Trigger Vercel Deploy
        M->>V: Deploy <Staging>
        Note over V: trunkbased-cicd-workflow-staging.vercel.app
    end

    loop Create Tag

        Note over M: 1.Build<br>2.Trigger Vercel Deploy
        M->>V: Deploy <Prod>
        Note over V: trunkbased-cicd-workflow.vercel.app
    end

Loading

PoC Under the Hood

• Project is a simple static site with 2 pages
• Server is ran using PM2, which allows to run it in the background without blocking execution of job steps
• Interfacing with Vercel is done using their CLI
• Vercel project and org keys must be setup for using the CLI (see below)

Setting up Secrets

In this case, secrets were setup at the level of Actions (but can be set at the repo level and/or per environment):