Vercel Environments and Neon Branches
Is it possible to have the following work with Vercel and Neon with GitHub Actions?
Neon branches:
- main (production)
- staging
- [preview branches]
Vercel environments:
- production
- staging
- [previews]
My idea would be to have two "static" environments (production and staging) that never change connection strings but the previews are always being created and deleted. How does that work with GitHub Actions? Does the workflow need to drop/add DB_URL environment variables anytime a preview deployment is created?
Is there a better way to do this? The business requirement is that some users need to have a never-changing url (staging) to see upcoming changes and then their are a few users that need to see changes (preview) that may never make it to the broader audience.
19 Replies
unwilling-turquoise•16mo ago
Hi! Good question. The short answer is yes, you can asbolutely do this.
What does your Git workflow look like? Do you push to production on a merge to main, or would you push to staging in that event.
In any case, you can have workflows that are triggered in certain scenarios, e.g when you merge code into your main branch it runs a deploy. The Neon branch injected into that deploy can be a GH secret. You can use the create-branch-action to get the branch details, since if the branch exists it simply returns it https://github.com/neondatabase/create-branch-action
Same goes for staging.
For previews you can use a template such as this: https://github.com/neondatabase/preview-branches-with-vercel/blob/main/.github/workflows/deploy-preview.yml
GitHub
GitHub - neondatabase/create-branch-action: GitHub Action to create...
GitHub Action to create a new Neon branch. Contribute to neondatabase/create-branch-action development by creating an account on GitHub.
GitHub
preview-branches-with-vercel/.github/workflows/deploy-preview.yml a...
Example project that shows how you can create a branch for every preview deployment on Vercel using GitHub actions - neondatabase/preview-branches-with-vercel
other-emeraldOP•16mo ago
Thank you for your quick response!
I currently have 3 deployment workflows:
- Preview (this can be run anytime using a branch as its source)
- Staging (this is run when a PR closes and is merged to main)
- Production (this is manually run using main as its source)
A little more context is that I am currently using Vercel Postgres and am thinking about moving to Neon to have more options and richer features around our databases.
Currently I am accomplishing the 3 different environments for our app in Vercel but any Preview or Staging deployment shares the same db.
What I want to do is get away from that and have each Preview point to its own db (Neon branch).
Looking at the samples I'm still unsure how the DB_URL environment works in a Preview deployment. How does that variable point to the Neon branch?
any further clarification would be much appreciated. in the Vercel settings for environment variables i only have 3 environment options available: Preview, Production, and Development (we don't use this one).
surely i'm missing something in regards to how this works.
unwilling-turquoise•16mo ago
Currently I am accomplishing the 3 different environments for our app in Vercel but any Preview or Staging deployment shares the same db.With Neon there's no need to share. You can create as many branches/projects (environments) as your plan allows
Looking at the samples I'm still unsure how the DB_URL environment works in a Preview deployment. How does that variable point to the Neon branch?Each Neon branch can have it's own URL. The specific branch connection URL is injteced into the preview, or other environments, e.g stage/prod.
other-emeraldOP•16mo ago
very interesting, thank you. where, in those examples you shared, does the injecting occur?
unwilling-turquoise•16mo ago
Great question. It looks like it works because
vercel build includes the .env file created in Run Migrations. This is not a good practice (IMO), instead it should use the vercel env command like so:
Docs: https://vercel.com/docs/cli/envvercel env
Learn how to manage your environment variables in your Vercel Projects using the vercel env CLI command.
unwilling-turquoise•16mo ago
(just run
rm .env after the migrations)
CC @Mahmoudunwilling-turquoise•16mo ago
Here's an example @stumpykilo : https://github.com/evanshortiss/neon-pg-anon-example/blob/main/.github/workflows/deploy-preview.yaml#L59-L63
GitHub
neon-pg-anon-example/.github/workflows/deploy-preview.yaml at main ...
Demonstrates how to use PostgreSQL Anonymizer with Neon's Postgres - evanshortiss/neon-pg-anon-example
unwilling-turquoise•16mo ago
That's setting the URL for a specific preview/branch. You can use the same logic for hardcoded staging and production environments
other-emeraldOP•16mo ago
i see, so it is using the gitbranch to create named preview deployments on Vercel?? will this work if i do not have my git repo connected to Vercel?
i guess each Vercel Preview deployment has its own set of environment variables
stormy-gold•16mo ago
yes. It will work without having the repo connected
other-emeraldOP•16mo ago
in this example i do not see migrations being run, should i ignore that and just use this example for the
vercel env commands?unwilling-turquoise•16mo ago
Yeah. I just wanted to show the env command. You can merge the ideas from both actions
other-emeraldOP•16mo ago
thank you, i'm trying it out. will let y'all know how it goes.
ok, many steps are working but some key steps are not.
the GitHub action runs and creates a Neon branch but the
${{ github.event.number }} returns nothing so the Neon branch that gets created is always named preview/pr-.
the step that removes the DATABASE_URL environment variable fails because it says Error: Environment Variable was not found. so then the set step fails as well.
any thoughts on how to resolve?
doesn't the vercel env rm DATABASE_URL preview ${{ steps.branch-name.outputs.current_branch }} command need to use the Vercel deployment branch name instead of the GitHub branch name?
oh, i see. nevermind my last comment. still does not work but i see how the gitbranch is there in Vercel deployments.
i took out the remove step and get this error when trying to set the DATABASE_URL: Error: Project "myproj" does not have a connected Git repository.
do you think i should try connecting my GitHub repo to see if that works? it looks like i can select Don't build anything in the Ignored Build Step config on the Git tab of my Vercel project.unwilling-turquoise•16mo ago
the GitHub action runs and creates a Neon branch but the ${{ github.event.number }} returns nothing so the Neon branch that gets created is always named preview/pr-.I believe this is only applicable in workflows that run in response to a Pull Request
doesn't the vercel env rm DATABASE_URL preview ${{ steps.branch-name.outputs.current_branch }} command need to use the Vercel deployment branch name instead of the GitHub branch name?On Vercel you can have many previews. Those are asssociated with a branch (IIRC). That's why the branch is passed. Yes! I think it's required
other-emeraldOP•16mo ago
ok, i can give that a shot. thanks.
the - When the
- The
vercel env rm command still fails but i can try removing that to see if the vercel env add works.
the add worked! and i see the env var in Vercel settings for the Preview deployment.
seems to be working but a couple of notes:
neondatabase/create-branch-action@v5 finds an existing branch it does not correctly return the host_with_pooler. i keep getting a 127.0.0.1.vercel env add command needs to use echo -n because without -n it adds a carriage return character to the env var which fails to work properly.
- The remove step should have a continue-on-error: true so it does not fail the job if the env var is not there.
thank you for the support!
i have an issue. the Vercel env vars for the Preview branch deployment is not taking into effect. it looks like it is using the Preview env var instead. any ideas?
i opened up a case with Vercel in the meantime.
not a Vercel issue. the logic of the deploy-preview (for the first time deploying a new preview) can't add new environment variables after deployment to Vercel. this is why it works the second time through but not the first.other-emerald•3mo ago
@stumpykilo did you ever find a solution to your original question? We have the nearly the exact workflow:
1) preview deployments for PRs
2) merge PR to staging branch (our trunk branch) to deploy to vercel
staging environment
3) (slightly different) merge staging branch to main branch to trigger production deploy
I'm wondering how I can ensure that we have a staging branch in Neon that is the default parent for preview branchesother-emeraldOP•3mo ago
yes, we have a solution that has been working. how are you creating your preview branches in your GitHub workflow currently? we use the parameter
parent to pass the name of our staging neon branch.other-emerald•3mo ago
we are using the vercel/github integration (Vercel Github app), we aren't running custom GitHub workflows for deployment
Did you have to manually set the DATABASE_URL env var in your vercel staging environment? I was confused because the Neon<->Vercel integration doesn't "see" our custom environments only Production, Development, and Preview
I think I found a solution that will work, I manually created a "staging" branch in Neon, and manually assigned the DATABASE_URL environment variable only for the "staging" environment in vercel. I also made staging in Neon the default so preview branches will be created from that. This should do the trick I think. PRs will get the latest from staging. Migrations, etc.. can be tested on those branches, and when we merge to staging migrations will be run there.
other-emeraldOP•3mo ago
we have an environment variable in vercel for the permanent preview (staging) environment. and then we create a new environment variable for any temporary preview environment that is tied directly to a PR and Neon branch that is created from staging as the parent.