skip to Main Content

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)

my local docker app, I can start the container by clicking a button 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. 4 separate repositories for each image as defined in the documentation best practices

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


  1. the command should be docker-compose up. docker run will only start one container. Docker Compose up official docs

    Login or Signup to reply.
  2. Let’s focus on a single service. You’ll need to make similar changes to all of them.

      react:
    
        build:
          context: ./frontend
          dockerfile: Dockerfile
    

    This builds the frontend directory on your local system. You need to replace this with an image: line pointing at your Docker Hub image.

          args:
            - API_SERVER=${ENV_API_SERVER}
    

    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.

        volumes:
          - react_static_volume:/usr/src/app/build/static
    

    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 to COPY the static files into its image.)

        expose:
          - 3000
    

    This does nothing and can safely be removed.

        env_file:
          - .env
    

    This .env file only exists on your local system. You can either distribute that file or convert it to inline environment: variables, or depending on what the settings are, fix them with Dockerfile ENV instructions.

        command: serve -s build -l 3000
    

    This overrides the image’s CMD and shouldn’t be necessary.

        depends_on:
          - django
    

    This is fine.

    After cleaning this all up, for this service I’d expect something a little more like:

      react:
        image: 2fresh/frontend
        depends_on:
          - django
    

    You may find it helpful to have a docker-compose.override.yml file next to the docker-compose.yml. This provides definitions that you only need for local development, such as how to build: the images. The two files will be combined, and having both build: and image: together tells Compose what name to use for the built image.

    # docker-compose.override.yml
    version: '3.8'
    services:
      react:
        build: ./frontend
        # all other settings in main docker-compose.yml file
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search