Allow injection of Frontend IP Address via environment variables

[Seb Garwood]

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

[Seb Garwood]

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