blog/how-to-deploy-to-vercel-with-github-actions

[giscus[bot]]

blog/how-to-deploy-to-vercel-with-github-actions

I am a full-stack web developer with a voracious appetite for knowledge, practice, and improvement.

https://voracious.dev/blog/how-to-deploy-to-vercel-with-github-actions

[Palanikannan1437]

This was really helpful David! Thanks a ton for this blog!

[dgokcin]

hello and thanks for the guide.

I would like to ask for your opinion in using environment variables and github secrets with this approach. how can I add build time env vars and github actions secrets if I am using this workflow

[davidmyersdev]

Hi @dgokcin! All environment variables available to your workflow steps can be used as either runtime or build time variables. This guide explains how to add secrets, and you can access those secrets in a couple of different ways.

To expose those secrets as environment variables that your app can use at runtime or build time, you can use the top-level env option.

env:
  MY_ENVIRONMENT_VARIABLE_NAME: ${{ secrets.MY_GITHUB_SECRET_NAME }}

To use this environment variable in a Node JS app, for example, you can access it via process.env.

const myEnvVar = process.env.MY_ENVIRONMENT_VARIABLE_NAME

[dgokcin]

Hello and thanks for the answer!

I think I am having problems in understanding the differences between the environment variables in an .env file, the environment variables in vercel's ui, environment variables that start with NEXT_PUBLIC and how they are used together in a deployment with vercel deploy --prebuilt using this workflow.

For instance, think of this nextjs scenerio:

• added a sensitive secret to vercel ui, lets say SENSITIVE_SECRET
• create an .env file with two secrets, lets say API_KEY and NEXT_PUBLIC_TEST_ENV_VAR
• have a top level environment variable in the workflow which gets its value from GitHub secrets, lets say SECRET_FROM_GH
• yarn vercel build
• use the workflow in the blog to deploy with --prebuilt option

so which of these secrets are resolvable with process.env in my web app and which of them are not?

[davidmyersdev]

No problem at all. I'll do my best to explain.

Environment variables in Vercel UI

Variables: SENSITIVE_SECRET

Environment variables that are stored on Vercel are fetched and stored in a local file under the .vercel directory when you run the vercel pull command. The secrets in the .vercel directory are made available under process.env during the vercel build step. It is during this step that your app will have access to the SENSITIVE_SECRET environment variable. Now, it's important to note that Next.js has some features in place to make it hard for you to accidentally deploy build-time environment variables in your runtime code, so we should cover that too.

Helpful resources:

• Vercel docs: environment variables
• Vercel docs: vercel build

Next.js environment variable access

Variables: API_KEY and NEXT_PUBLIC_TEST_ENV_VAR

Next.js does not expose any environment variables to the browser unless it is prefixed with NEXT_PUBLIC_ as a means to keep your application secure and prevent accidental exposure of your secrets. The Node environment (during build time or runtime) does have access to these environment variables though, and you can access them from process.env. Given the examples above, your Node environment would have access to API_KEY and NEXT_PUBLIC_TEST_ENV_VAR, but your browser environment would only have access to NEXT_PUBLIC_TEST_ENV_VAR.

Helpful resources:

• Next.js docs: environment variable load order
• Next.js docs: exposing environment variables to the browser

Secrets from GitHub

Variables: SECRET_FROM_GH

These are going to be similar to the environment variables that Vercel uses, but these are exposed by GitHub Actions configuration instead of by a command you run as part of your build process. Your app will have access to these variables at build time. It can access your secret as process.env.SECRET_FROM_GH, but it will not have access to it in the browser environment since it is not prefixed with NEXT_PUBLIC_.

Helpful resources:

• GitHub docs: encrypted secrets

Summary

• All environment variables are available to your app at build time
• Browser environments do not have access to these environment variables directly and must be given access, typically via string interpolation during the build process
• Some build tools (e.g. vercel) read from non-standard local files and make those environment variables available to the framework or app
• Some frameworks read from standardized local files (e.g. .env) and restrict access to those environment variables for security

I hope this helps!

[dgokcin]

Thanks for the detailed explanation. It is really clear now.

[holahoon]

Thanks for a wonderful post!
But, I have a question about a case when Github actions fails, it still Vercel still successfully builds the project. I'm not sure if this is just my case.

[holahoon]

ah, nvm. I found why Vercel still builds and deploys even though my workflow fails. Vercel automatically builds and deploys every branch to preview or production if set as main branch.
https://vercel.com/docs/deployments/git

[davidmyersdev]

I'm glad to hear you were able to figure it out! 🎉

[tilap]

Thanks for this post :)

The echo "::set-output is going to be deprecated (see here).

You can update

run: echo "::set-output name=url::$(yarn vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})"

with

run: echo "url=$(yarn vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT