NextJS Dynamic Environment Variables

[reetz]

I’m trying to use secrets that I’ve set on my fly.io nextjs app, but they are undefined. The guide here shows how to add them, but it doesn’t show how to pull them from my fly secrets. I thought I would be able to use a variable in my build.args, but that fails with “expected value but found ‘$’ instead”. Any ideas?

[darriondumlao]

Hello,

Can you post a photo of the error you are getting? I have ran into something similar to this before and had to use flyctl set secrets

[reetz]

I have already set the secrets with fly secrets set. Now I’m trying figure out how to pull them into my build.args like the example in the article I originally posted.

[darriondumlao]

This article may help you out some

Build Time Secrets

I have a Next.js application that has a couple of build time secrets that need to be provided to the Docker. I would like to provide those secrets through the fly secrets functionality, but it seems that those are only available at runtime. Is there a way to accomplish this? One option that I am going to try is using my GitHub Action to provide these secrets through the fly deploy --build-arg functionality, but I would prefer to keep things in one spot.

[reetz]

The accepted answer is using GitHub secrets which is a bit of a workaround. I would like to be able to use fly secrets.

[rubys]

@reetz

The guide here shows how to add them

That guide tells you how to add non-secret build args (i.e. the values are there in the fly.toml in plain text).

The document you are looking for is Build Secrets · Fly Docs ; but I will warn you in advance that the approaches listed there aren’t exactly convenient and require a bit of work.

Normally what works better is to take the portion of the “build” process that requires access to secrets and move it from the Dockerfile to a script that is is run at deploy time prior to starting your server.

If you describe what you are trying to do (as opposed to how you are trying to do it), I can update either flyctl launch or dockerfile-node to do this automatically if there is some common pattern that can be detectable by inspection of your source files; either that or to make it easy to do via passing a flag. I’ve done this for dockerfile-rails and can readily port this logic to node.js.

[reetz]

Thanks for your response.

All I’m trying to do is add some secrets to my Next/JS app that I can use on the frontend. Maybe I’m missing something obvious, but I can’t find a way to do this. With Heroku I set a secret in their web panel (NEXT_PUBLIC_SOME_VAR) and it becomes available in process.env.NEXT_PUBLIC_VAR.

[rubys]

@reetz

All I’m trying to do is add some secrets to my Next/JS app that I can use on the frontend.

With fly.io, fly secrets set will set a secret that is available at deploy time using process.env. But only at deploy time, not at build time. Don’t expect this to change. I won’t provide links, but if you google you will be able to find examples of secrets leaking from other hosting providers.