Building a CI/CD Pipeline with Vercel and Managing Environment Variables

Chris has finally finished developing the shopping mall app. It runs perfectly on local (localhost:3000). Now, he wants to deploy it to show it off to his friends.

In the past, Chris would have done this:

Aside from being annoying, this method is dangerous. The "It works on my machine but not on the server" issue happens all the time.

Now is the era of CI/CD (Continuous Integration/Continuous Deployment). Let's build an automated system where modifying a single line of code and pushing it to GitHub automatically tests, builds, and deploys the app to the world. We will use Vercel, the deployment platform most loved by React developers.

1. CI/CD: The Automated Deployment Factory

CI/CD automates the series of processes for deploying code, much like a factory conveyor belt.

The flow we will build is as follows:

2. Vercel: The Cheat Code for React Deployment

You don't need to know AWS or Docker. Vercel is a hosting service provided by the team behind Next.js, and it is optimized for deploying React apps.

Vercel's Killer Feature: Preview Deployment

The most powerful feature is Preview.

If you push code to a feature/login branch instead of the main branch, Vercel creates a deployment with a random URL (e.g., myapp-git-login-chris.vercel.app) without touching the live service (myapp.com).

Team members can visit this link to test the feature in advance. You can receive feedback like, "Chris, this button isn't clicking," before the code ever goes live.

3. Managing Environment Variables

The most common mistake during deployment is leaking API Keys.

Committing code like apiKey = "secret-1234" directly to GitHub makes it prey for hackers.

Therefore, secret information must be removed from the code and managed as Environment Variables.

Local Development: .env File

Create a .env file in the project root and add it to .gitignore to prevent it from being uploaded to GitHub.

# .env
# In React (Vite), the VITE_ prefix is mandatory.
VITE_API_URL=https://api.dev-server.com
VITE_API_KEY=secret-1234-local

Live Deployment: Vercel Dashboard

So, how does the Vercel server know these values?

You must register them manually in the Vercel Dashboard under [Settings] -> [Environment Variables].

By separating them like this, you can ensure that the app uses the test server during development and automatically points to the live server when deployed.

// Usage in code (The correct value for the environment is injected automatically)
const apiUrl = import.meta.env.VITE_API_URL;

4. Adding Safety Mechanisms: Testing Before Deployment

Automated deployment is convenient, but there is a risk that code with errors could be deployed automatically.

Let's block deployment in Vercel settings so that "Deployment only happens if tests pass."

You can modify the build command in package.json, or use Vercel's 'Ignore Build Step'. However, the easiest and most standard way is to modify the build command.

// package.json
{
  "scripts": {
    "test": "vitest run",
    // Run tests BEFORE building.
    // If testing fails (error), the build after && will not execute, and deployment is cancelled.
    "build": "npm run test && tsc && vite build"
  }
}

Now, even if Chris accidentally pushes buggy code, Vercel will report "Build Failed (Test Failed)" and stop the deployment. The users remain safe.

🔗 References