[GH-ISSUE #253] Allow injection of Frontend IP Address via environment variables #245

New issue

Closed

opened 2026-02-27 15:55:47 +03:00 by kerem · 1 comment

kerem commented

2026-02-27 15:55:47 +03:00

Owner

Originally created by @sgarwood on GitHub (Aug 14, 2019).
Original GitHub issue: https://github.com/RD17/ambar/issues/253

I renamed all of the image: to build: and their relevant directory

I then modified the docker-compose.yml file so that the front end runs on port 8060 by changing the configuration to

frontend:
    depends_on:
      webapi:
        condition: service_healthy
    build: ./FrontEnd
    restart: always
    networks:
      - internal_network
    ports:
      - "8060:80"
    expose:
      - "80"
    environment:
      - api=http://${ambarHostIpAddress}:8080

I have an external .env file as so ${ambarHostIpAddress} should be resolved to 172.18.0.19

dataPath=/opt/ambar
langAnalyzer=ambar_en
ambarHostIpAddress=172.18.0.19
crawlerName=fs-crawler
pathToCrawl=/files2

and can confirm when I run docker-compose exec frontend env I see the variable api=http://172.18.0.19:8080

However, when I visit http://172.18.0.19:8060 the page fails to load and simply displays a blank page and console errors.

Inspecting the console errors I can see

172.18.0.19/:1 GET http://172.17.0.2:3000/vendor.0330fe18fa117611457a.js net::ERR_ADDRESS_UNREACHABLE

and

172.17.0.2:3000/favicon.ico:1 GET http://172.17.0.2:3000/favicon.ico net::ERR_ADDRESS_UNREACHABLE

Obviously, being requested from my browser this address will never resolve as this is an internal docker-compose address.

I have the understanding this index page should be serving the scripts produced via npm run compile via an NGINx container accessible on the 172.18.0.19 host IP.

I grepped the source for where the 172.17.0.2:3000 was coming from and could see that it was included in the WebPack build as the index.html contained the values verbatim.

Unfortunately, my knowledge of WebPack builds is not very extensive and would appreciate if someone would be able to point me in the right direction

Steps to reproduce:

run docker run -v "$PWD":/usr/src/app -w /usr/src/app node:8 npm install in ./FrontEnd
run docker run -v "$PWD":/usr/src/app -w /usr/src/app node:8 npm run compile in ./FrontEnd
docker-compose build
docker-compose up -d
Navigate to http://172.18.0.19:8060 in Chrome
See console errors

172.18.0.19/:1 GET http://172.17.0.2:3000/vendor.0330fe18fa117611457a.js net::ERR_ADDRESS_UNREACHABLE

and

172.17.0.2:3000/favicon.ico:1 GET http://172.17.0.2:3000/favicon.ico net::ERR_ADDRESS_UNREACHABLE

Originally created by @sgarwood on GitHub (Aug 14, 2019). Original GitHub issue: https://github.com/RD17/ambar/issues/253 I renamed all of the `image:` to `build:` and their relevant directory I then modified the `docker-compose.yml` file so that the front end runs on port `8060` by changing the configuration to ``` frontend: depends_on: webapi: condition: service_healthy build: ./FrontEnd restart: always networks: - internal_network ports: - "8060:80" expose: - "80" environment: - api=http://${ambarHostIpAddress}:8080 ``` I have an external .env file as so ${ambarHostIpAddress} should be resolved to 172.18.0.19 ``` dataPath=/opt/ambar langAnalyzer=ambar_en ambarHostIpAddress=172.18.0.19 crawlerName=fs-crawler pathToCrawl=/files2 ``` and can confirm when I run ` docker-compose exec frontend env` I see the variable `api=http://172.18.0.19:8080` However, when I visit `http://172.18.0.19:8060` the page fails to load and simply displays a blank page and console errors. Inspecting the console errors I can see ``` 172.18.0.19/:1 GET http://172.17.0.2:3000/vendor.0330fe18fa117611457a.js net::ERR_ADDRESS_UNREACHABLE ``` and ``` 172.17.0.2:3000/favicon.ico:1 GET http://172.17.0.2:3000/favicon.ico net::ERR_ADDRESS_UNREACHABLE ``` Obviously, being requested from my browser this address will never resolve as this is an internal docker-compose address. I have the understanding this index page should be serving the scripts produced via `npm run compile` via an NGINx container accessible on the 172.18.0.19 host IP. I grepped the source for where the `172.17.0.2:3000` was coming from and could see that it was included in the WebPack build as the `index.html` contained the values verbatim. Unfortunately, my knowledge of WebPack builds is not very extensive and would appreciate if someone would be able to point me in the right direction Steps to reproduce: 1. run `docker run -v "$PWD":/usr/src/app -w /usr/src/app node:8 npm install` in ./FrontEnd 2. run `docker run -v "$PWD":/usr/src/app -w /usr/src/app node:8 npm run compile` in ./FrontEnd 3. `docker-compose build` 4. `docker-compose up -d` 5. Navigate to `http://172.18.0.19:8060` in Chrome 6. See console errors ``` 172.18.0.19/:1 GET http://172.17.0.2:3000/vendor.0330fe18fa117611457a.js net::ERR_ADDRESS_UNREACHABLE ``` and ``` 172.17.0.2:3000/favicon.ico:1 GET http://172.17.0.2:3000/favicon.ico net::ERR_ADDRESS_UNREACHABLE ```

kerem closed this issue

2026-02-27 15:55:48 +03:00

kerem commented

2026-02-27 15:55:48 +03:00

Author

Owner

@sgarwood commented on GitHub (Aug 14, 2019):

Update

I managed to get the IP Address to be 172.18.0.19 by installing node on the server and running npm run compile instead of running it inside of a docker run container. I believe this is an underlying issue that the machine the build runs on determines the IP Address of the end build.

I then set the PORT environment variable to 8060 to match what I needed it to be.
Then:

npm run compile to rebuild with correct configuration
docker-compose build --no-cache frontend to rebuild local image
docker-compose up -d --no-deps --force-recreate frontend to restart running service

I think it would be more appropriate to allow users to override this by injecting an environment variable that would overwrite the default of getting the current IP address with a provided one.

Looking at Frontend/config/index.js I can see that server_host is set to ip.address().

I think it would make sense to override this using a method similar to server port server_port : process.env.PORT || 3000

@sgarwood commented on GitHub (Aug 14, 2019): **Update** I managed to get the IP Address to be 172.18.0.19 by installing node on the server and running `npm run compile` instead of running it inside of a docker run container. I believe this is an underlying issue that the machine the build runs on determines the IP Address of the end build. I then set the `PORT` environment variable to 8060 to match what I needed it to be. Then: 1. `npm run compile` to rebuild with correct configuration 2. `docker-compose build --no-cache frontend` to rebuild local image 3. `docker-compose up -d --no-deps --force-recreate frontend` to restart running service I think it would be more appropriate to allow users to override this by injecting an environment variable that would overwrite the default of getting the current IP address with a provided one. Looking at `Frontend/config/index.js` I can see that `server_host` is set to `ip.address()`. I think it would make sense to override this using a method similar to server port `server_port : process.env.PORT || 3000`