Skip to content

Vercel Deploy Action

Actions

About

This action make a deployment with github actions instead of Vercel builder
v19.0.12
LatestPre-release
Star (4)

Vercel Deploy Action

Based on Vercel Action:

  • add input: "vercel-cli" to override to use the previous "now" CLI (latest) instead of "vercel".
  • add output: preview-url-host (without https, to use with vercel cleanup API).
  • fixed CLI with git comment.

deploy website preview test now-deployment action example - static example - basic auth example - angular

stars forks HitCount

Maintainability Rating Technical Debt Bugs Code Smells Reliability Rating Security Rating

This action was formerly Zeit Now Deployment. Migration Guide stars forks

Introduction to Vercel

​Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow. It enables developers to host Jamstack websites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration.

This action make a Vercel deployment with github actions.

Result

preview

pull request example

commit

Inputs

Name Required Default Description
vercel-token [x] Vercel token. see https://vercel.com/account/tokens
github-comment [ ] true if you don't want to comment on pull request.
github-token [ ] if you want to comment on pull request. ${{ secrets.GITHUB_TOKEN }}
vercel-project-id [x] ❗Vercel CLI 17+,The name property in vercel.json is deprecated (https://zeit.ink/5F)
vercel-org-id [x] ❗Vercel CLI 17+,The name property in vercel.json is deprecated (https://zeit.ink/5F)
vercel-args [ ] This is optional args for vercel cli. Example: --prod
working-directory [ ] the working directory
scope [ ] If you are working in a team scope, you should set this value to your team ID.

Outputs

preview-url

The url of deployment preview.

preview-url-host

The url host of deployment preview (without "https://").

preview-name

The name of deployment name.

Example Usage

Disable Vercel for GitHub

The Vercel for GitHub integration automatically deploys your GitHub projects with Vercel, providing Preview Deployment URLs, and automatic Custom Domain updates. link

We would like to to use github actions for build and deploy instead of Vercel.

Set github.enabled: false in vercel.json

{
  "version": 2,
  "public": false,
  "github": {
    "enabled": false
  },
  "builds": [
    { "src": "./public/**", "use": "@now/static" }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "public/$1" }
  ]
}

When set to false, Vercel for GitHub will not deploy the given project regardless of the GitHub app being installed.

vercel.json Example:

{
  "version": 2,
  "scope": "amond",
  "public": false,
  "github": {
    "enabled": false
  },
  "builds": [
    { "src": "./public/**", "use": "@now/static" }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "public/$1" }
  ]
}

Project Linking

You should link a project via Vercel CLI in locally.

When running vercel in a directory for the first time, Vercel CLI needs to know which scope and Project you want to deploy your directory to. You can choose to either link an existing project or to create a new one.

NOTE: Project linking requires at least version 17 of Vercel CLI. If you have an earlier version, please update to the latest version.

vercel
? Set up and deploy “~/web/my-lovely-project”? [Y/n] y
? Which scope do you want to deploy to? My Awesome Team
? Link to existing project? [y/N] y
? What’s the name of your existing project? my-lovely-project
🔗 Linked to awesome-team/my-lovely-project (created .vercel and added it to .gitignore)

Once set up, a new .vercel directory will be added to your directory. The .vercel directory contains both the organization(vercel-org-id) and project(vercel-project-id) id of your project.

{"orgId":"example_org_id","projectId":"example_project_id"}

You can save both values in the secrets setting in your repository. Read the Official documentation if you want further info on how secrets work on Github.

Github Actions

  • This is a complete .github/workflow/deploy.yml example.

Set the vercel-project-id and vercel-org-id you found above.

name: deploy website
on: [pull_request]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: ngduc/vercel-deploy-action@master
        with:
          vercel-cli: vercel # optional ("vercel" or "now")
          vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
          github-token: ${{ secrets.GITHUB_TOKEN }} #Optional 
          vercel-args: '--prod' #Optional
          vercel-org-id: ${{ secrets.ORG_ID}}  #Required
          vercel-project-id: ${{ secrets.PROJECT_ID}} #Required 
          working-directory: ./sub-directory

Angular Example

See .github/workflow/example-angular.yml ,

Basic Auth Example

How to add Basic Authentication to a Vercel deployment

See .github/workflow/example-express-basic-auth.yml

source code

Migration from v2

  1. Change action name in workflows from now-deployment to vercel-action
     - name: Vercel Action
       uses: amondnet/vercel-action@v19
  2. Change input values.
    • zeit-token -> vercel-token
    • now-org-id -> vercel-org-id
    • now-project-id -> vercel-project-id

Vercel Deploy Action is not certified by GitHub. It is provided by a third-party and is governed by separate terms of service, privacy policy, and support documentation.

About

This action make a deployment with github actions instead of Vercel builder
v19.0.12
LatestPre-release

Vercel Deploy Action is not certified by GitHub. It is provided by a third-party and is governed by separate terms of service, privacy policy, and support documentation.