Guide to Seamless CI/CD Integration with GitLab and Vercel

Continuous Integration (CI) and Continuous Deployment (CD) are crucial for maintaining a smooth and efficient development workflow. This guide explores how to set up a seamless CI/CD pipeline using GitLab CI and Vercel, focusing on a practical, real-world scenario.

Why Seamless CI/CD Matters

Seamless CI/CD ensures that your code is tested and deployed automatically, reducing human error and accelerating development cycles. This guide will walk you through integrating GitLab CI and Vercel to achieve this goal.

Setting Up Your Environment

To follow along, you'll need a GitLab account and a Vercel account. Additionally, you should have a basic understanding of Docker and Git.

Step 1: Create a GitLab Project

Log in to GitLab and create a new project. Initialize it with a simple Node.js application:

# Initialize a new GitLab project
git init
git add .
git commit -m "Initial commit"
git remote add origin https://gitlab.com/yourusername/yourproject.git
git push -u origin master
  

Step 2: Configure GitLab CI

Create a `.gitlab-ci.yml` file in the root of your project:

stages:
  - build
  - test
  - deploy

build:
  stage: build
  script:
    - npm install
    - npm run build

test:
  stage: test
  script:
    - npm run test

deploy:
  stage: deploy
  script:
    - echo "Deploying to Vercel..."
    - curl -X POST https://api.vercel.com/v3/projects/deploy \
      -H "Authorization: Bearer $VERCEL_API_TOKEN" \
      -H "Content-Type: application/json" \
      -d '{"file": "build/index.html", "buildCommand": "npm run build", "publishDir": "build"}'
  only:
    - master
  environment:
    name: production
    url: https://yourdomain.vercel.app
  variables:
    VERCEL_API_TOKEN: $CI_DEPLOY_TOKEN
  when: manual
  allow_failure: false
  artifacts:
    paths:
      - build/
  dependencies:
    - build
    - test
  rules:
    - if: '$CI_COMMIT_REF_NAME == "master"'
  cache:
    key: npm
    paths:
      - node_modules

Make sure to replace `yourusername`, `yourproject`, and `yourdomain` with your actual values. Also, set up environment variables in GitLab for `VERCEL_API_TOKEN` and `CI_DEPLOY_TOKEN`.

Integrating Vercel

Next, configure Vercel to deploy your application. Create a `vercel.json` file in your project root:

{
  "version": 2,
  "builds": [
    {
      "src": "build/index.html",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "build"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

Push your changes to GitLab:

git add .
git commit -m "Configure GitLab CI and Vercel"
git push
  

Triggering the Pipeline

Once your changes are pushed, GitLab CI will automatically trigger the build, test, and deploy stages. You can manually trigger the deployment to Vercel by clicking the "Deploy to Vercel" button in the GitLab UI.

Best Practices and Tips

• Use environment variables for sensitive data.
• Cache dependencies to speed up builds.
• Use GitLab's `only` and `when` rules to control pipeline execution.
• Ensure your deployment script is idempotent.

Conclusion

• GitLab CI and Vercel integration simplifies CI/CD workflows.
• Follow best practices to ensure a robust pipeline.
• Explore additional GitLab and Vercel features to enhance your deployment process.

By following this guide, you've set up a seamless CI/CD pipeline for your Node.js application. Continue refining your workflow to meet your project's specific needs.