Vercel GitOps Secrets with Next.js

This is a reference repository for using GitOps Secrets for Node.js on Vercel to work around the 4KB environment variable limit per deployment.

It's a great way to give the GitOps Secrets workflow a test-drive!

And don't worry, it doesn't use any real secrets.

Requirements

Install the Vercel CLI and authenticate:

npm i -g vercel
vercel login

Install the Doppler CLI, then authenticate:

brew install gnupg
curl -Ls --tlsv1.2 --proto "=https" --retry 3 https://cli.doppler.com/install.sh | sudo sh
doppler login

Setup

Vercel

Click the below button to create the application in Vercel:

The deployments will fail which is expected at this stage.

Clone the repository Vercel created for this application, then open a terminal and change into the root of the repository.

Then link the local codebase to the Vercel application by running:

# Override the build and dev commands with the following:
#
# - build: npm run encrypt-secrets && npm run build
# - dev: npm run encrypt-secrets && npm run dev

vercel link

Create the GITOPS_SECRETS_MASTER_KEY environment variable for each environment:

node -e 'process.stdout.write(require("crypto").randomBytes(16).toString("hex"))' | vercel env add GITOPS_SECRETS_MASTER_KEY development
node -e 'process.stdout.write(require("crypto").randomBytes(16).toString("hex"))' | vercel env add GITOPS_SECRETS_MASTER_KEY preview
node -e 'process.stdout.write(require("crypto").randomBytes(16).toString("hex"))' | vercel env add GITOPS_SECRETS_MASTER_KEY production

Doppler

Import the sample project to Doppler by clicking the Import to Doppler button:

Configure your local environment by changing into the root level of the cloned repository and run:

doppler setup --no-interactive

Then create Doppler Service Tokens for each environment in Vercel:

echo -n "$(doppler configs tokens create vercel-gitops --config dev --plain)"  | vercel env add DOPPLER_TOKEN development
echo -n "$(doppler configs tokens create vercel-gitops --config prev --plain)" | vercel env add DOPPLER_TOKEN preview
echo -n "$(doppler configs tokens create vercel-gitops --config prd --plain)"  | vercel env add DOPPLER_TOKEN production

Testing

You can quickly test the encrypt-secrets script locally with throwaway DOPPLER_TOKEN and GITOPS_SECRETS_MASTER_KEY environment variables by running:

GITOPS_SECRETS_MASTER_KEY="$(node -e 'process.stdout.write(require("crypto").randomBytes(16).toString("hex"))')" \
DOPPLER_TOKEN="$(doppler configs tokens create temp --max-age 1m --plain)" \
npm run encrypt-secrets

The easiest way to verify updates in Doppler being propagated is by changing the WELCOME_MESSAGE secret.

Local Development

Local development works just like in Vercel thanks to the Vercel CLI:

npm install
vercel dev

The index page is at http://localhost:3000/ and an API endpoint is at http://localhost:3000/api/secrets

Preview

Trigger a Preview deployment by running:

vercel

Production

Trigger a Production deployment by running:

vercel --prod

Auto Production Deploy on Secret Change

In the Vercel dashboard, create a Production deploy webhook by navigating to Settings > Git, then click the Create Hook button.

Copy the webhook URL, then from the Doppler dashboard and click Webhooks from left menu. Click the + Add button, pasting in the webhook URL and on the webhook list page, check the PRD checkbox.

To test the webhook, navigate to the Production environment and change the WELCOME_MESSAGE secret, then click the Save button.

Head back to the Vercel dashboard and you should see a Production deploy in progress and once deployed, the welcome message should have changed.

Summary

Awesome work! You've seen how easy it is to work around Vercel's 4KB environment variable limit per deployment using a GitOps Secrets workflow and Doppler as the secrets provider.

Clean Up

You'll need to manually delete the application in Vercel from the bottom of the Setttings > Advanced page.

To delete the project from Doppler, run:

doppler projects delete vercel-gitops-secrets-nextjs -y