Learn how to use GitLab Pipelines to deploy to Vercel including support for self-managed GitLab.
Last updated on August 21, 2023
Build, Deployment & Git
Vercel for GitLab automatically deploys your GitLab projects with Vercel, providing Preview Deployment URLs, and automatic Custom Domain updates.
For advanced usecase, you can use Vercel with GitLab as your CI/CD provider to generate Preview Deployments for every git
push and deploy to Production when code is merged into the main
branch.
This approach is useful for developers who want full control over their CI/CD pipeline, as well as GitLab Self-Managed users, who can’t leverage Vercel’s built-in git integration.
You can view the completed example here or follow this guide to get started.
You can build your application locally (or in a Pipeline) without giving Vercel access to the source code through vercel build
. Vercel automatically detects your frontend framework and generates a .vercel/output
folder conforming to the Build Output API specification.
vercel build
allows you to build your project within your own CI setup, whether it be GitLab CI/CD or your own in-house CI, and upload only those build artifacts (and not the source code) to Vercel to create a deployment.
vercel deploy --prebuilt
skips the build step on Vercel and uploads the previously generated .vercel/output
folder from the CI/CD Pipeline.
Let’s create our CI/CD Pipeline by creating a new file .gitlab-ci.yml
:
- npm install --global vercel
- vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
- vercel build --token=$VERCEL_TOKEN
- vercel deploy --prebuilt --token=$VERCEL_TOKEN
- npm install --global vercel
- vercel pull --yes --environment=production --token=$VERCEL_TOKEN
- vercel build --prod --token=$VERCEL_TOKEN
- vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN
A GitLab Pipeline to create Vercel deployments
This pipeline has two triggers:
main
branchFinally, let’s add the required values from Vercel as CI/CD variables in GitLab:
vercel login
vercel link
to create a new Vercel project.vercel
folder, save the projectId
and orgId
from the project.json
VERCEL_TOKEN
, VERCEL_ORG_ID
, and VERCEL_PROJECT_ID
as CI/CD variables.Now that your Vercel application is configured with GitLab CI/CD, you can try out the workflow:
Every merge request will now automatically have a Preview Deployment attached. If the merge request needs to be rolled back, you can revert and merge the MR and Vercel will start a new Production build back to the old git state.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4