Environment-specific Cloudflare Settings
I'm using Next.js 14 (CSR) and backend deployed on a separate EC2 server.
What's the best way to proceed with environment-specific deployments?
I have 3 git branches: development, staging, production. Currently app's running on Vercel, meanwhile I'm working in a separate branch to shift to Cloudflare.
On push to each branch, first fetch environment variables from Doppler into a .env file. Also, automate dependencies, build, deploy process in the same git workflow. Ideal flow is to have one app on cloudflare pages: web-app and under that each environment's configuration and dns settings so i don't have to change those again and again. Is this possible?
15 Replies
CF pages has the concept of environments and you can set different env vars for them - but only "preview" and "production" are supported. Locally you could probably pull vars using doppler into a local .dev.vars file
alternatively, you could probably disable the default build behaviour, and instead trigger your own script which checks
CF_PAGES_BRANCH and then pulls the right values from doppler depending on the env/branch. Since you're already using doppler, I imagine you want to keep that the source of truth and configure as little as possible within CF.
however, coordinating things with an aws deployment may mean youd be better off orchestrating the full CI workflow elsewhere (like github actions/circleci/etc)
in which case, you could also consider using Cloudflare workers
as for DNS, I think you would have a stable branch-specific preview url which you could then point to with a cname if you wanted a custom URL@theo thanks for the reply! i managed to set this up, one github action yml script (triggered on push to development/staging/production) which installs dependencies, doppler and fetches from doppler based on branch name into a .env file, then builds - hence environment-specific .env file is used, then deploys to an already existing project (limitation: wrangler deploy does not create the project for you, you always have to set up the project at least once beforehand).
The only problem is i have to deploy them as separate cloudflare projects instead of one project with multiple environments. reason being the domain since i want to be able to navigate to each of my environment-website separately for example (to be able to use CNAME i need 3 different urls):
- web-development.appname.app -> appname-development.pages.dev
- web-staging.appname.app -> appname-staging.pages.dev
- web.appname.app (production) -> appname-production.pages.dev
so i'll have 3 cloudflare projects for 1 web-app.
is there a workaround and easy-to-manage setup using cloudflare and github actions?
I dont think you need to use separate projects. While every individual deployment gets a new url based on the hash, there are also stable URLs based on the branch name. It's not quite as simple as
branch-name.yourorg.workers.dev because there is some simple transformation if the name is too long, but for your case the branch names are short so it should be fine.
I think by default you need to be using the pages CI for this to happen, but if you were using the wrangler cli, it looks like you can manually specify which branch you want to deploy to. (see docs). In your case, within your github action you could do something like wrangler pages deploy --branch=stagingCloudflare Docs
Commands - Wrangler · Cloudflare Workers docs
Create, develop, and deploy your Cloudflare Workers with Wrangler commands.
here's an example within the UI showing the branch-based URL
some more related info on the branch URLs here - https://github.com/cloudflare/workers-sdk/issues/2410
GitHub
🚀 Feature Request: Better deployment URL ergonomics · Issue #2410 ·...
Describe the solution I'm having an issue with using wrangler for Pages direct uploads. The issue is that my build process needs to be aware of what URL it's going to be available at, and y...
alternatively, you could try to rely on CF Pages CI and wire up the doppler stuff on this side, but I'd probably stick with GH actions since you are already coordinating with other other moving parts of a larger deployment, and from what I understand GH pages is on its way to being deprecated, eventually merging with workers.
this is what i was trying to set up, but thought won't get a different URL for each branch e.g.
branch-name.yourorg.workers.dev. since, i require it for domain mapping.
alright, will give this a go and let you know if it works out.
thanks a lot for all the detailed help btw!
im unable to add custom domains on cloudflare project settings like i want them as i cant edit the target, i've added them to my dns provider though. here:
feat/cloudflare
alias URL: https://feat-cloudflare.web-cloudflare.orgName.app
my domain URL: https://feat-cloudflare.projectName.pages.dev
development
alias URL: https://development.web-cloudflare.orgName.app
my domain URL: https://development.projectName.pages.dev
staging
alias URL: https://staging.web-cloudflare.orgName.app
my domain URL: https://staging.projectName.pages.dev
production
alias URL: https://web-cloudflare.orgName.app
my domain URL: https://projectName.pages.devnice
i mean, this setup isn't working. any clue? how can i add and also EDIT the cname target in custom domains on cloudflare?
ah - hm lemme take a look
so there is this guide - https://developers.cloudflare.com/pages/how-to/custom-branch-aliases/
Cloudflare Docs
Add a custom domain to a branch · Cloudflare Pages docs
In this guide, you will learn how to add a custom domain (staging.example.com) that will point to a specific branch (staging) on your Pages project.
it says you must be using cloudflare DNS for this to work
although I am using cloudflare DNS, and I just tried it, and doesn't seem to be working
ah ok i think I got it to work - had to add the custom domain to the pages project first, and then adjust the CNAME to point to the specific branch
also worth noting- looks like wildcards are not allowed, so you couldnt automatically get branch urls to work
since you are already running the deployment from elsewhere, you may want to just try using Workers w/ static assets instead of pages. Each branch would be a separate worker, but I think you'd be able to do what you want otherwise
Cloudflare Docs
Static Assets · Cloudflare Workers docs
Create full-stack applications deployed to Cloudflare Workers.
we're using the
/pages router for our next app. apparently i don't think it's supported yet.
using workers, when trying to build, i'm getting standalone copyFile chunks error under my .next folder.
Error: ENOENT: no such file or directory, copyfile '/{dir}/.next/standalone/.next/server/chunks/9578.js' -> '/{dir}/.open-next/server-functions/default/.next/server/chunks/9578.js'
ah shoot
just migrate 😆 or better yet, move off of next entirely
might be back to the original solution, of using multiple pages projects 🤷
at least for now... moving to app router eventually is probably wise, and it seems eventually pages will just merge with workers and some of these CI flows will get better