Vercel for GitHub automatically deploys your GitHub projects with Vercel, providing Preview Deployment URLs, and automatic Custom Domain updates.
For advanced usecase, you can use Vercel with GitHub Actions 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 GitHub Enterprise Server 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 GitHub Actions) 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 GitHub Actions 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 GitHub Action.Let’s create our Action by creating a new file .github/workflows/preview.yaml
:
name: Vercel Preview Deploymentenv: VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}on: push: branches-ignore: - mainjobs: Deploy-Preview: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Install Vercel CLI run: npm install --global vercel@latest - name: Pull Vercel Environment Information run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }} - name: Build Project Artifacts run: vercel build --token=${{ secrets.VERCEL_TOKEN }} - name: Deploy Project Artifacts to Vercel run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
This Action will run when your code is pushed to a git branch. Let’s do the same for Production environments with a separate Action:
name: Vercel Production Deploymentenv: VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}on: push: branches: - mainjobs: Deploy-Production: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Install Vercel CLI run: npm install --global vercel@latest - name: Pull Vercel Environment Information run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }} - name: Build Project Artifacts run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }} - name: Deploy Project Artifacts to Vercel run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
Finally, let’s add the required values from Vercel as secrets in GitHub:
- Retrieve your Vercel Access Token
- Install the Vercel CLI and run
vercel login
- Inside your folder, run
vercel link
to create a new Vercel project - Inside the generated
.vercel
folder, save theprojectId
andorgId
from theproject.json
- Inside GitHub, add
VERCEL_TOKEN
,VERCEL_ORG_ID
, andVERCEL_PROJECT_ID
as secrets
Now that your Vercel application is configured with GitHub Actions, you can try out the workflow:
- Create a new pull request to your GitHub repository
- GitHub Actions will recognize the change and use the Vercel CLI to build your application
- The Action uploads the build output to Vercel and creates a Preview Deployment
- When the pull request is merged, a Production build is created and deployed
Every pull request will now automatically have a Preview Deployment attached. If the pull request needs to be rolled back, you can revert and merge the PR and Vercel will start a new Production build back to the old git state.
You can deploy to multiple projects by creating multiple project ID secrets in GitHub and using them in separate workflow .yaml
files to set up the environments.
- Retrieve and save Vercel project IDs for the projects you'd like to deploy to by following the steps above. For example,
VERCEL_PROJECT_ID_1
,VERCEL_PROJECT_ID_2
, etc.vercel link
will prompt you to select a project: you can link to the suggested option or a different existing project. This is how you can select different projects and retrieve their IDs. - Create a workflow file for each project and reference the project ID secret in the
env
section.