env property fails in docker environment

[imndaiga]

Nuxt can't seem to pull environment variables from within a docker environment. When following this example, the baseUrl defaults to the empty string while running in a node docker environment (node:latest docker image), whereas it populated with said env variable if running on a non-containerized host.

_{This bug report is available on Nuxt.js community (#c538)}

[alexchopin]

Hi, We need more details and code snippets to help you.

[appinteractive]

Hey @squarenomad could you solve that issue? I have the exact same issue!

[pi0]

We are heavily using docker containers for nuxt based projects at fandogh. There are some facts about different envs:

System wide environment variables (using docker env)

Assessable in SSR side only with process.env but are not defined in client side. (That's obvious why because they should be hardcoded in web pack js bundle working on all clients)

Environment variables passed via nuxt.env[]

Accessable from all webpack compiled js files using process.env within both client side and server side. In server side they may be overritten using global env variables.

Passing system environment variables to nuxt.env[]

Something like { env: { baseURL: process.env.baseURL } } . This is probably what you want, as it pulls env variables from system environment (CI or Docker) and also adds them to webpack bundle in both client side and server side. (Consider that this pulling happens during build time not run time)

What i suggest

Don't do it at all! As mentioned above the only possible way is using webpack's define env feature but it breaks Twelve Factor principles and at least our standard won't allow this. The reason is because we are hardcodding configs (environment) in production builds. So baseURL can be only and only defined during build time (local or CI) images cannot change it during runtime phase with fancy docker environment variables. You are also certainly going to encounter more problems with remote URLs problems like CORS, Credentionals, Need two seperate URLs for local dev and two seperate ones for production, Need a API subdomain for every project and ...

So how to deal with baseURL thing?

Use official axios module with either using relativeURLs or proxy passing to remove API. (proxy's options are server-side so can be customized with docker env too). Or at least try similar approach if really want to make standard docker images :)

[thecodr]

@pi0 Do we still have the problem with passing system environment variables during run time ? I have to pass variables during runtime phase and client is not able to pull in the variables. Is there a work around for this issue ?

[pi0]

@thecodr Unfortunately no, that's not a problem but more a fact about client side bundling! For runtime settings, you can easily use vuex store and fill it on server side.

[thecodr]

@pi0 Is there any reference for filling vuex store on server side ? I tried several times and failed. Some kind of reference will be really helpful. For us, the entire config resides on s3 in json format. We should load that configuration dynamically into vuex store on server side. We should be able to fill the store even before the site loads completely. Thats exactly the place where I am stuck. The vuex store is being populated after the site is loaded :(

[logaretm]

@pi0 This bit me too hard 😅, well we now just build the image using build args and environment settings at build time. Sure it produces host-dependent images and its not pretty but if it works then Its fine at the moment.

In the future, can nuxt set the variables at startup way before the app is starting to serve requests? because like docker, any build produced is host dependent and isn't portable, and hard coding the variables seems to break cohesion between server and client, specially if using the express template settings.

[appinteractive]

it's definitely an design issue when you replace environment variables at build time and make it impossible to access them at runtime (because they was replaced with plane strings).

We for example need env variables to set microservice configs at runtime inside docker containers. It's not possible to rely on buildtime cars or put that stuff inside the container before shipping it.

Currently we just run the build process inside the deployed container the first time to get the vars. But the that is not a solution as it demands processing time where it dose not belong.

The VueX solution that was mentioned does not feel right ether to be honest.

My question: Could there be a small script that injects That variables without running a full build?

[pi0]

@appinteractive I really hope we finally find some workaround like that script you mentioned. But that injection corrupts chunk hashes! Another idea would be including a generated script in assets/env.js and always add it to <head> this was env.js can inject thing at runtime.

For the microservices problem you mentioned above, I strongly suggest using proxy module. We are using Docker deployments a lot for our projects and it almost resolved our problems :)

[wushan]

@pi0 It'll be great if there is an example using proxy module to do the trick. I think this is a quite common scenario when using nuxt in production. We need to deploy to multiple different QA environment before production, this will really save a lot efforts.

Using the same nuxt app docker image --> passing different --env when running the container --> get separate backend services depends on the baseURL provided.

Thanks !

[appinteractive]

Yeah would be interested in an example too. I don’t know how to switch it ether without the correct environment variables. And the proxy only works for url not for the issue of configurations ether.

So there is no way around of correctly implementing environment variables on the server site or at least giving a workaround for that.

Also the proxy solution has issues with high traffic, there was an unresolved issue that is flying around for some years now. (Didn’t recheck the status)

[iamvanja]

I wrote a blog post about this.
https://vanja.gavric.org/blog/configure-nuxt-js-to-consume-env-variables-during-run-time/

[ausir0726]

[ Nuxt 1.4.1 ]

I have a case have some similar run-time env problem.
something like I want deploy builded nuxt docker to few server .
I already set some machine and target env in docker run -e command

and I want env apply to vue mounted process , but , I got undefined or env value that when I build nuxt image.

seems like we can't use node env on runtime nuxt.js

@pi0 , sorry about tag you , Can we have some way to set run-time env to nuxt server , and it overwrite webpack env setting on run-time easier ? or it will be nxut 2.0 can implement ?

thanks .

[nicroto]

+1 for runtime env vars in Nuxt. This is such a common problem, that should be handled by the framework instead of everyone building their own version of this.

As many others I want to be able to configure my docker containers at run time, specifically I am setting urls to other services within a cluster and I don't want to hardcode those in the docker images, nor I want my containers startup time to increase due to always having to perform nuxt build when I need to scale (add more containers of the same image).

[AndsteLyc]

+1 I have the same problem.

[dre1080]

+1 Same problem

[theDevelopper]

+1 same probem in nuxt 2.1

[Lahori-Jawan]

okay. I have strange problem. I am passing env variables from file to docker which passes them down to process.env. Now the problem is the env variables are being passed down in development phase but not in production phase. Isn't it interesting? here is the repo

[aldarund]

@Lahori-Jawan env variables are set at BUILD time.

[Lahori-Jawan]

@aldarund no. ARG & ENV both variables are set at build time but ENV varialbes can be used to reset/override values at runtime too e.g. more, but that is not the point here. My container when run in development mode shows different result than when in production mode. you can test that form my repo. In development, I have access to process.env configured in nuxt.config.js but I loose access to it in production. How about images to speak:

[aldarund]

@Lahori-Jawan you are missing what im saying. I`m not talking about docker envs. Nuxt bundle environment variables into bundle at build time. So what is matter what variables are set when u do nuxt build, not a nuxt start

[Lahori-Jawan]

@aldarund I surely missed that. I will try it & update you on this.

[aldarund]

If u need runtime env variables you can use https://github.com/samtgarson/nuxt-env ( ⚠️ WARNING: As with the config.env option in Nuxt config, environment variables used in nuxt-env are exposed client side, so don't use it for storing secrets! ⚠️ (

[Lahori-Jawan]

@aldarund I think the only best option I have right now is to NOT run build while building the image instead do it when creating container. Do you think its good practice? which I guess is good when there is no 2nd way of doing this.

[Lahori-Jawan]

my use case is to set live environment credentials for nuxt-apollo module to set httpEndpoint for which apollo module requires to set via plugins.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.