Dockerized React/Flask App w/ nginx live updates/docker volumes

74 Views Asked by At

I am trying to set up a development environment for a web dev project that is a React app served by a flask backend using Nginx/Gunicorn (to be honest I'm not 100% on what exactly these do yet, especially Gunicorn). I followed a tutorial to create an app that meets my criteria, but I would like to be able to get live updates for my python/flask backend as well as the react frontend. I am trying to use docker volumes for this, but there is an issue.

Here is my Dockerfile for the react client and my docker-compose file for the project:

# Latest version of Node, use first image to create second image
FROM node:16-alpine as build-step

# Define working directory
WORKDIR /app

# Setting path variable on image (I think)
ENV PATH /app/node_modules/.bin:$PATH

# Copy dependencies
COPY package.json yarn.lock ./

# Copy app code
COPY ./src ./src

# Copy static web data
COPY ./public ./public

# Install dependencies and build the app (I think)
RUN yarn install
RUN yarn build


FROM nginx:stable-alpine
COPY --from=build-step /app/build /usr/share/nginx/html
COPY deployment/nginx.default.conf /etc/nginx/conf.d/default.conf
version: "3.7"

services:
  api:
    build:
      context: .
      dockerfile: Dockerfile.api
    image: flask-app-api
  client:
    build:
      context: .
      dockerfile: Dockerfile.client
    image: react-client
    ports:
      - "3000:80"
    volumes:
      - /app/node_modules
      - .:/usr/share/nginx/html # See below

    environment:
      - WATCHPACK_POLLING=true

So I initially tried doing what most tutorials say and having a volume map .:/app but I think the issue is that my content is being served by Nginx so the content from my react build file is being copied to /usr/share/nginx/html and the original folder is no longer referenced hence the attempt at mapping it as seen above. This does not work which is why I'm here. So, my question is: how do I get live updates to my app in this environment or should I attempt to remove nginx from the equation for development purposes and only use it in the production environment?

0

There are 0 best solutions below