In a special configuration file, nf, we’ll use upstream to tell NGINX on what server port each container is running. NGINX will act as the router between the React app and the server, directing requests to the correct container. The NGINX server is different than the other containers.

Since we’re segmenting everything into their own containers, the client and server will have their own package.json files with dependencies, so remember to run npm install on each folder individually if you want to test locally. The app itself is just an input that sends some text to get logged by the server, nothing fancy. To save you the monotony of getting the basic React app and server setup and working, I’ve made this starter. It would be helpful to know how to build images with Dockerfile, which you can brush up on here, but that will mostly be taken care of in the starter. The goal being to have our client and server hosted separately with NGINX managing any requests to the correct container, so any http request to /api will be sent to the server container and everything else to the client. In this example we’re going to be setting up an NGINX server, an Express server, and our React app. This declarative approach will allow us to quickly define our images in each container and setup the networking between them. Instead we’re going to use a new special type of config file called docker-compose.yml. Single containers are easy enough to build imperatively in the command line, but doing anything more complicated can quickly get out of hand. In this article we’re going to explore how to segment our app into a small network of multiple Docker containers, each with their own images.

Tableplus connect to docker container