Search code examples
dockerdocker-composedocker-network

Do I need to do more than add env variables in docker-compose file in order to use them across other containers?spin up

I define the URL for my backend service container in my docker-compose.yaml.

environment:
  PORT: 80
  VUE_APP_BACKEND_URL: "mm_backend:8080"

When the containers spin up, I inspect my frontend container and can verify that the env variable was set correctly as shown below.

enter image description here

However, when I attempt to use my frontend service to connect to my backend (retrieve data) it tells me that the VUE_APP_BACKEND_URL is undefined in the network tab.

The implementation and usage of this environment variable is such within my vue.js code

getOwners(){
    fetch(`${process.env.VUE_APP_BACKEND_URL}/owners`, defaultOptions)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        data.forEach((element) => {
          var entry = {
            value: element.id,
            text: `${element.display_name} (${element.name})`
          }
          this.owners.push(entry)
        })
      })

Any assistance is appreciated.

Solution

  • This won’t work because process.env.someKey is not available on the browser. In other words, docker-compose won’t help much if you want to pass any env variable into your front end application. Simplest approach is to define the backendUrl in the code itself at one place and use it to make api calls. If you are not happy doing this, there are already some good answers/solutions available on StackOverflow for this same problem.