How do deploy to Vercel with GitLab CI?

[errnesto]

In my view the follwing setup leads to a deeper integration with gitlab than using the gitlab plugin.
Beacuse it integrates with gitlab environments and review apps.
Also I don't have to set anything up at vercel (except creating a token)

I set the two env variables VERCEL_TOKEN and VERCEL_SCOPE all the others come from gitlab.

deploy-to-vercel:
  stage: deploy
  image: node:13.10.1-alpine3.10

  variables:
    PREVIEW_URL=https://$CI_PROJECT_NAME-$CI_COMMIT_REF_SLUG.$VERCEL_SCOPE.vercel.app

  rules:
    - if: $CI_MERGE_REQUEST_IID
    - if: $CI_COMMIT_TAG
    - if: $CI_COMMIT_BRANCH == 'master'

  environment:
    name: vercel/$CI_COMMIT_REF_NAME
    url: $PREVIEW_URL

  script:
    - npm i -g vercel
    - DEPLOYMENT_URL=$(vercel --name $CI_PROJECT_NAME --confirm -t $VERCEL_TOKEN)
    - vercel alias set $DEPLOYMENT_URL $PREVIEW_URL -t $VERCEL_TOKEN

Since I use --name a new project is created if none exists (so if I copy the repo - and add vercel token - I can deploy without setting up anything manually in the web ui).
And with vercel alias I can get the same behavior as with the plugin to get a url that will reflect the state of my merge request.
I could also have set dynamic environment urls but I like the cleaner URLs

The sad thing is it took me really long to figure this out

• --name is depricated (even though an alternative is promised: see Please reconsider deprecating "name" in now.json #4021) Maybe this already works with linking when using vercel --confirm? I did not try it out…
• The vercel alias cli command is not documented (you can run vercel alias -h but you have to know the command exists)
• Also the trick with getting the deployment url like this: $(vercel) Is something I picked up in a discussion somewhere.

I really like the super simple setup with the git integration, but to integrate in ci I think there is no way around the cli.

[patoncrispy]

This is really nice. Thanks for sharing! Really not enough documentation on this. My problem was I still wanted to run tests, etc. before deploying and there doesn't seem to be any flexibility here. Appreciate this solution.

[abdu355]

Yep, been running all over the internet looking for something like this. Never knew I could stumble upon amazing solutions ( to actual issues) in the discussion threads.
Thanks really.

[collie-moore]

Thank you for this.
So if I have testing scripts in my gitlab-ci.yml I can add this below that right?

[ghost]

for me, it worked like this. I only needed to change the line - vercel alias set .... This line caused some problems. Also I added tags: , but I don't know If this is necessary.

[ricky-sb]

I fixed the alias by removing https:// from the PREVIEW_URL variable.

[ghost]

Thats really cool. I tried it and it worked nearly without any changes, thank you! The only thing, I´m not figuring out is:
How can I use this when I have a Team in Vercel? It works perfectly fine in my private Vercel account, but I can't figure out how I can run the deployment in a team project in Vercel :/

[ricky-sb]

You have to add --scope $VERCEL_SCOPE to the last two commands. Here's my full script:

deploy-to-vercel:
  stage: deploy
  image: node:14

  variables:
    PREVIEW_URL: $CI_PROJECT_NAME-$CI_COMMIT_REF_SLUG.$VERCEL_SCOPE.vercel.app

  rules:
    - if: $CI_MERGE_REQUEST_IID
    - if: $CI_COMMIT_TAG
    - if: $CI_COMMIT_BRANCH == 'main'

  environment:
    name: vercel/$CI_COMMIT_REF_NAME
    url: https://$PREVIEW_URL

  script:
    - npm i -g vercel
    - DEPLOYMENT_URL=$(vercel --name $CI_PROJECT_NAME --confirm -t $VERCEL_TOKEN --scope $VERCEL_SCOPE)
    - vercel alias set $DEPLOYMENT_URL $PREVIEW_URL -t $VERCEL_TOKEN --scope $VERCEL_SCOPE

[oxfist]

Thanks for this great contribution! It’s kinda hard to get clear information on how to handle this and this helped me a lot!

Looking into the Vercel docs I ran into this: Using Vercel CLI for Custom Workflows - Using the CLI Without Project Linking and since that pretty much addresses how to properly authenticate the Vercel CLI for deployments without using the deprecated --name option, I changed the way DEPLOYMENT_URL is obtained, and my updated deploy-to-vercel job looks like this:

deploy-to-vercel:
  stage: deploy
  image: node:14-alpine

  variables:
    PREVIEW_URL: $CI_PROJECT_NAME-$CI_COMMIT_REF_SLUG.$VERCEL_USER.vercel.app
    VERCEL_ORG_ID: $VERCEL_ORG_ID
    VERCEL_PROJECT_ID: $VERCEL_PROJECT_ID

  rules:
    - if: $CI_COMMIT_TAG
    - if: $CI_COMMIT_BRANCH == 'main'

  environment:
    name: vercel/$CI_COMMIT_REF_NAME
    url: https://$PREVIEW_URL

  script:
    - npm i -g vercel
    - DEPLOYMENT_URL=$(VERCEL_ORG_ID=$VERCEL_ORG_ID VERCEL_PROJECT_ID=$VERCEL_PROJECT_ID vercel --confirm -t $VERCEL_TOKEN --scope $VERCEL_USER)
    - vercel alias set $DEPLOYMENT_URL $PREVIEW_URL -t $VERCEL_TOKEN --scope $VERCEL_USER

Where $VERCEL_ORG_ID and $VERCEL_PROJECT_ID come from the .vercel folder that’s created when you authenticate the Vercel CLI on your local environment (don’t commit this to git!) and were added as variables on the GitLab project.

Notes

I changed two things from the original config:

1. I removed the if: $CI_MERGE_REQUEST_IID because this was duplicating deployments when I created a merge request, the default behavior is that the last commit of that MR already has a deployment so no extra one needed :)
2. Renamed $VERCEL_SCOPE to $VERCEL_USER because in my case it better reflects that I’m deploying to a personal account, you don’t have to change it yourself.

[SinaKarimi7]

Well done @oxfist, but why did you reinitialize that VERCEL_ORG_ID and VERCEL_PROJECT_ID? Because the .vercel file must be ignored?

[oxfist]

@SinaKarimi7 Exactly! Since there's no .vercel folder available on CI (which is correct), the way to do it is to explicitly pass both variables for the deployment to work. On this case, they are used to authenticate to Vercel and obtain the URL then used to deploy.

[mkbctrl]

For future readers: Actually since we are talking Gitlab CI, you shouldn't explicitly pass those variables, but add CI variables in the Gitlab itself, they are exposed to pipeline files.

It's also included as step 5 in the shiny new guide: https://vercel.com/support/articles/how-can-i-use-gitlab-pipelines-with-vercel#configuring-gitlab-ci/cd-for-vercel

[leerob]

Update: It's now much easier to deploy to Vercel with any custom CI/CD provider like self-managed GitLab with GitLab Pipelines!

We've created a guide and an example using GitLab Pipelines. Hope this helps! 🙏

[berci-i]

This is a very nice way to do it! Thank you!
But is there any way to disable the external auto deploys on gitlab (to avoid deploying twice on every push)? 👼🏽
(I could only find "github": { "enabled": false } to prevent the deploys from github)

[mkbctrl]

Not sure if I understand correctly, but it sounds like you have your Vercel GH integration plugged in + you trigger deploy via github-ci. In order to make it work with Gitlab I disconnected the Vercel Gitlab integration and I rely solely on the CI script

[berci-i]

Thank you very much!
Indeed that was the case. We disconnected the gitlab integration, and it seem to work just fine.
I was wondering though if there is any way to also keep the gitlab data in the vercel (it would be nice to see from vercel what branch triggered the deploy, for example) .

[Linux249]

Would love to hear if the guide isn't solving your needs - please let me know.

Great guide, thanks a lot. I'm currently looking for a way to connect preview deployments to certain urls. I saw that I can do this manually with the vercel alias ... command. But how can I do this automatically? Something like this is in my mind.

- vercel deploy --prebuilt --token=$VERCEL_TOKEN --alias preview.my-domain.de 

[Totara-thib]

I have created a GitLab template to deploy on Vercel, inside it, I've described a workaround to deploy in the Pipeline a Preview and Production environments at the same time on the custom domain that you want.

Feel free to use it or give me any feedback https://r2devops.io/marketplace/gitlab/r2devops/hub/vercel_deploy

[mkbctrl]

As far as I know it’s not possible atm.

…

On Mon, 19 Sep 2022 at 14:33, Berci ***@***.***> wrote: Thank you for your input! Indeed that was the case. we did disconnected the gitlab integration, and it seem to work just fine. I was wondering if there is any way to also keep the gitlab data in the vercel though (it would be nice to see from vercel what branch triggered the deploy, for example) . — Reply to this email directly, view it on GitHub <#4853 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACNDTYVQBYFBVUOAATFO4LTV7BMQHANCNFSM4OZWWUFQ> . You are receiving this because you commented.Message ID: ***@***.***>

[amyegan]

Hi @mkbctrl! Can you clarify what you mean? It is possible to use GitLab Pipelines with Vercel, but maybe you are talking about something more specific that I missed.

[mkbctrl]

I mean that at least to my current knowledge when you deploy to Vercel via Gitlab it won’t display the branch on the deployment list inside your Vercel dashboard. Instead it will show smth like “via CLI” or similar. Can’t recall right now. Also there is this nice MR summary that is added as a comment to every MR if you use Vercel Gitlab integration. That will be missing as well (it’s 3rd party plug-in you can add it in your Vercel dashboard)

…

On Mon, 19 Sep 2022 at 20:08, Amy ***@***.***> wrote: Hi @mkbctrl <https://github.com/mkbctrl>! Can you clarify what you mean? It is possible to use GitLab Pipelines with Vercel <https://vercel.com/guides/how-can-i-use-gitlab-pipelines-with-vercel>, but maybe you are talking about something more specific that I missed. — Reply to this email directly, view it on GitHub <#4853 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACNDTYVCLF6VXBAUATFG6XDV7CTZ3ANCNFSM4OZWWUFQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[amyegan]

Hi @anthonyhastings. The CLI team added an option to specify the git branch on vercel pull so you can pull in the branch-specific variables before building and deploying. So you could use this as a workaround for now:

vc pull --git-branch=$branch-name
vc build
vc deploy --prebuilt

[anthonyhastings]

Hey @amyegan! That sounds great in theory but I experimented with this tonight and unfortunately, the Vercel UI doesn't allow environment variables to be added for branches if there isn't a git repository connected. I also tried to circumvent the UI by using the CLI and the REST API, both of which also failed on adding due to the git repository not being connected 😢

It all feels interconnected; getting branch information to come through via the CLI, adding environment variables for branches... it'd be amazing to hear if the team has plans on making non-connected repositories more aligned with connected repository capabilities.

[cromosom]

Hey @amyegan ,
my organization is interested in this feature as well. With the size of our products and the ci deployments the tracking of certain branches gets really unconvient. Also commit messages are not availaible to search for old deployments. Please let us know if you guys are getting at implementing it

[lalapolalaanewb]

Any updates on this matter regarding Using Gitlab Pipeline where we can:-

• directly set env variables in CLI
• directly set domain to be used with certain preview env

Any helps is appreciated.

[lalapolalaanewb]

Regarding above matter:- Since using Gitlab Pipeline doesn't connect our Gitlab's project to Vercel. Thus, I've faced above issues.
However, if I connect my gitllab's project, then I'll face double deployments trigger on Gitlab's CICD & Vercel (when push happen).

I've found the solution for that here where Vercel team provide us a way to specifically disable any name branch from getting deploy on push.

For now, the issues resolved for my case. Thank you Vercel.