Dockerize Next.js app with the capability to reconfigure an existing image with the env vars
Unanswered
Nile tilapia posted this in #help-forum
Nile tilapiaOP
Hi everyone!
I believe that I'm not the only one having this challenge, but I'm struggling to find a neat solution.
The task is pretty basic: build the image once and then reconfigure it with the environment variables. In my case, I want to pass various base paths and GraphQL API endpoints to the container without the need to rebuild the image. This sounds simple enough, but the stuff that I pass with the env vars and then try to retrieve with the help of process.env or next.config.js gets inlined during the build time and doesn't care about the env vars's values anymore. The only solution that I've been able to find is this hack: https://raphaelpralat.medium.com/system-environment-variables-in-next-js-with-docker-1f0754e04cde
I gave it a try and it worked somehow for the GraphQL API endpoint, but an attempt to change the basePath led to lots of corner cases that are difficult to handle. Frankly speaking, this approach isn't robust and extensible at all and eventually will fail.
I've seen these discussions, but no sane solution has been provided over there:
https://github.com/vercel/next.js/discussions/16059
https://github.com/vercel/next.js/discussions/41769
I hope that some Next.js experts will be able to guide me
Thank you in advance!
I believe that I'm not the only one having this challenge, but I'm struggling to find a neat solution.
The task is pretty basic: build the image once and then reconfigure it with the environment variables. In my case, I want to pass various base paths and GraphQL API endpoints to the container without the need to rebuild the image. This sounds simple enough, but the stuff that I pass with the env vars and then try to retrieve with the help of process.env or next.config.js gets inlined during the build time and doesn't care about the env vars's values anymore. The only solution that I've been able to find is this hack: https://raphaelpralat.medium.com/system-environment-variables-in-next-js-with-docker-1f0754e04cde
I gave it a try and it worked somehow for the GraphQL API endpoint, but an attempt to change the basePath led to lots of corner cases that are difficult to handle. Frankly speaking, this approach isn't robust and extensible at all and eventually will fail.
I've seen these discussions, but no sane solution has been provided over there:
https://github.com/vercel/next.js/discussions/16059
https://github.com/vercel/next.js/discussions/41769
I hope that some Next.js experts will be able to guide me
Thank you in advance!
10 Replies
Pont-Audemer Spaniel
do you have a code example?
The best way to rebuild an image that depends on environment variables, I think is to also use ARG in the Dockerfile (the argument being your base path).
Apart from that you also need the enviroment variable and then use it here https://nextjs.org/docs/app/api-reference/next-config-js/basePath
The best way to rebuild an image that depends on environment variables, I think is to also use ARG in the Dockerfile (the argument being your base path).
Apart from that you also need the enviroment variable and then use it here https://nextjs.org/docs/app/api-reference/next-config-js/basePath
@Pont-Audemer Spaniel do you have a code example?
The best way to rebuild an image that depends on environment variables, I think is to also use ARG in the Dockerfile (the argument being your base path).
Apart from that you also need the enviroment variable and then use it here https://nextjs.org/docs/app/api-reference/next-config-js/basePath
Nile tilapiaOP
The code is under NDA, so I'm not sure how I can share it safely.
Anyway, the thing is that our app is going to have multiple customers, each customer will have it's own infrastructure with different needs for basePath and API endpoint, so there's no option to build another image for another set of parameters 😦
Anyway, the thing is that our app is going to have multiple customers, each customer will have it's own infrastructure with different needs for basePath and API endpoint, so there's no option to build another image for another set of parameters 😦
Pont-Audemer Spaniel
ok but are you bundling the result of next build inside the image?
Nile tilapiaOP
Yep
I have a multistage Dockerfile
It installs the dependencies, builds the app, copies
standalone, static, and public directories to the final stage, and runs the server.js filePretty much like the example from Next.js docs
Nile tilapiaOP
Any thoughts? 🙂
Yellowstripe scad
I'm also interested in a solution for this
Pont-Audemer Spaniel
I gave it a try and it worked somehow for the GraphQL API endpoint, but an attempt to change the basePath led to lots of corner cases that are difficult to handle.
It's hard to answer if you don't share more details about what's exactly the problem.
It might be that some parts in the build are bound to the basePath, but I am not sure.