Docker Setup: Connect Backend and Frontend & Expose DB

[matboehm]

Problem:
Currently the Clock of Change Backend (API Server) and Frontend Docker containers run separately from each other.
The two Docker containers should be able to communicate with each other, in order to simulate the live setting.
Also it would be nice to if the databases were exposed to the host machine, so they could be viewed and changed manually when developing.

Solution
A possible solution is to assign both Docker containers their own network, so that they are able to communicate with each other.
The database ports can be exposed, so they should be accessible from the host machine.

[appinteractive]

Didn’t they have to be able to communicate through the open internet and not between each other? I mean that the api has to be accessible through the browser doesn’t it?

[matboehm]

@appinteractive
You are right, the API has to be accessible through the browser / through the open internet when being deployed.

Currently though as discussed wth @roschaefer the main focus for the Docker Setup is to create a development environment, that works out of the box. So other devs can set up the Clock of Change on their local machine as easy as possible (especially in regards to agileventures).

In the future we can transform the Docker Containers, so that we can also deploy them and run them live, but I think that we will have to put a little bit of work into that.

Nevertheless at the moment the ports are exposed to the host machine, so the API Server can be accessed from http://localhost:1337 (or with the IP address of the host machine instead of localhost) and the Frontend with http://localhost:8000. This is not intended to change.
The only problem is currently that the Frontend cannot reach the Backend for making requests, because the preconfigured address set in the Frontend is http://localhost:1337, which doesn't work, because localhost in the Frontend Docker container is different than in the Backend Docker container. The two containers just need to be somehow connected or linked, so a network might not be the right solution - will have to research that.

If you have any suggestions, I would gladly appreciate that!

[appinteractive]

We solved that for nitro by having a proxy from Frontend to backend. So the Browser would request for example http://localhost:1337/api and that would be proxied internally, which also prevents CORS issues.

[appinteractive]

But as you do not have a server running on the frontend, that might not be your solution. Also when the frontend has to run as a widget later.

[matboehm]

@appinteractive
Found out that you can get the IP address of the host machine in Docker with host.docker.internal, at least for development purposes.

Also which proxy do you guys use? When looking into possible solutions I also looked into using reverse proxies and Traefik seemed to get a lot of praise. Might be worth taking a look at for you.

[appinteractive]

https://github.com/chimurai/http-proxy-middleware/blob/master/README.md is what we are using for node, it’s really easy to use. You don’t need s full blown Traefik for that easy job.