docker-compose stack ( React + Flask )

Question

it's my first time using Docker let alone docker-compose. Could I get some insight on my docker-compose file to help me get both docker containers up and running.

Folder Structure

Both of my Dockerfiles work for running each application ( React or Flask ) separately. For example:

React Container

docker build -t wedding-client .
docker run -dp 3030:3030 wedding-client

Flask Container

docker build -t wedding-server .
docker run -dp 5030:5030 wedding-server

So I'm thinking my docker-compose file is the issue. Here are the docker files:

client/DockerFile

FROM node:alpine as build
WORKDIR /app
COPY . /app
RUN npm install
RUN npm run build

FROM nginx:alpine
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY --from=build /app/build .
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 3030
CMD ["nginx", "-g", "daemon off;"]

server/DockerFile

FROM python:3.9

WORKDIR /app
COPY . /app
RUN pip install -r requirements.txt
ENV FLASK_APP server.py
EXPOSE 5030
CMD ["python", "server.py"]

docker-compose.yml

version: '3'
services:
  server:
    container_name: wedding-server
    build:
      context: server/
      dockerfile: Dockerfile
    network_mode: host
    ports:
      - 5030:5030
  client:
    container_name: wedding-client
    build:
      context: client/
      dockerfile: Dockerfile
    network_mode: host
    ports:
      - 3030:3030
    depends_on:
      - server

Docker Output:

user_10149347 · Answer

Client Docker File

# Stage 0, "build-stage", based on Node.js to build the frontend
FROM node:alpine as build
WORKDIR /app
COPY package*.json /app/
RUN npm install
COPY . /app/
RUN npm run build

# Stage 1, based on NGINX to provide a configuration to be used with react-router
FROM nginx:alpine
RUN rm /etc/nginx/conf.d/default.conf
COPY --from=build /app/build /usr/share/nginx/html
COPY ./nginx/nginx.conf /etc/nginx/conf.d
# RUN apk update && apk add bash
EXPOSE 3005
CMD ["nginx", "-g", "daemon off;"]

Flask Docker File

FROM python:3.9
RUN mkdir /server
WORKDIR /server
COPY requirements.txt /server/requirements.txt
RUN pip install --upgrade pip && \
    pip install -r requirements.txt
COPY . .

docker-compose.yml

version: '3'

services:
  api:
    build: server
    command: "flask run --host=0.0.0.0 --port=5005"
    environment:
      - FLASK_ENV=production
      - FLASK_APP=server.py
    ports:
      - "5005:5005"

  client:
    build: client
    ports:
      - '3005:3005'
    links:
      - api
    depends_on:
      - api

docker-compose stack ( React + Flask )

1 Answers