My local docker container app is made up of 4 images, React, Django, nginx, postgres. It runs perfectly locally, (although of course I need to manually go to 127.1.1.0 on my local computer to view the app)
I want other people to be able to view this app as well, if they have docker installed on their local computer, and so, using the steps in the docker documentation, I pushed all four images to docker hub.
I am befuddled by the rest of the documentation, as when I tried an example using my local docker image name as below,
docker run -d -p 3000:8000 --restart=always --name myport myport_nginx
,
only the nginx image service was pulled,and able to start up as a single container, but the rest of the services were not called up.
Thus, my question is: How do I define those four images so that they are connected the way they are on my local computer, and so anyone with a local docker can pull my repo and inspect my app by going to 127.0.0.1 on his local computer. I know dockerbub is analogous to github and this should be straight-forward, but somehow my head has muddled this up and I would like some clarification.
Below is the dockercompose.yml file used to build the app in the first instance. I know it might be possible to modify my .yaml so that one image can call and start up all the other three, and I would like help with that if it is possible or good practice.
version: "3.7"
services:
django:
build:
context: ./backend
dockerfile: Dockerfile
volumes:
- django_static_volume:/usr/src/app/static
expose:
- 8000
env_file:
- ./backend/.env
command: gunicorn mainapp.wsgi:application --bind 0.0.0.0:8000
ports:
- "8000:8000"
depends_on:
- db
db:
image: postgres:12.0-alpine
volumes:
- postgres_data:/var/lib/postgresql/data/
env_file:
- ./postgres/.env
react:
build:
context: ./frontend
dockerfile: Dockerfile
args:
- API_SERVER=${ENV_API_SERVER}
volumes:
- react_static_volume:/usr/src/app/build/static
expose:
- 3000
env_file:
- .env
command: serve -s build -l 3000
depends_on:
- django
nginx:
restart: always
build: ./nginx
volumes:
- django_static_volume:/usr/src/app/django_files/static
- react_static_volume:/usr/src/app/react_files/static
ports:
- 80:80
depends_on:
- react
- django
volumes:
postgres_data:
django_static_volume:
react_static_volume:
2
Answers
the command should be
docker-compose up
.docker run
will only start one container. Docker Compose up official docsLet’s focus on a single service. You’ll need to make similar changes to all of them.
This builds the
frontend
directory on your local system. You need to replace this with animage:
line pointing at your Docker Hub image.This compiles in a specific URL to the image you push to Docker Hub. Other consumers might not be able to use this. If your
nginx
reverse proxy container already serves both the React application and the backend API on the same host and different URL paths, you might be able to use a path-only URL like/api
and avoid configuring this.This replaces the static files in your application with the contents of a named volume. If you’ve modified this in some way locally, your other consumers won’t have this; if you update the image, the named volume will remain unchanged and the updated files in the image won’t be visible. I’d recommend removing named volumes like this. (Your
nginx
container will need toCOPY
the static files into its image.)This does nothing and can safely be removed.
This
.env
file only exists on your local system. You can either distribute that file or convert it to inlineenvironment:
variables, or depending on what the settings are, fix them with DockerfileENV
instructions.This overrides the image’s
CMD
and shouldn’t be necessary.This is fine.
After cleaning this all up, for this service I’d expect something a little more like:
You may find it helpful to have a
docker-compose.override.yml
file next to thedocker-compose.yml
. This provides definitions that you only need for local development, such as how tobuild:
the images. The two files will be combined, and having bothbuild:
andimage:
together tells Compose what name to use for the built image.