0

I'm totally new to Docker and React, I was able to create a container that it's running a react image, but for me to see changes applied on code, I have to rebuild every time, which takes around 2 minutes, there's a way to avoid that?

# docker-compose.yml

version: "3.7"
services:

  database:
    build:
      context: .
      dockerfile: Dockerfile.postgres
    restart: always
    user: root
    volumes:
      - ./backup_data/db:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=postgres
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres

  backend:
    build: ./backend
    volumes:
      - ./backend:/app
    depends_on:
      - database
  
  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/app
      - /app/node_modules
    depends_on:
      - backend
    ports:
      - 80:80

  do-migration:
    build: ./backend
    depends_on:
      - backend
    command:
      - /bin/bash
      - -c
      - |
        echo "Apply migration"
        python manage.py makemigrations
        python manage.py migrate
        exit 0
    volumes:
      - ./backend:/app
  
  nginx_backend_server:
    build: ./nginx_backend_server
    restart: always
    ports:
        - 8000:8000
    depends_on:
        - backend

and this is my DockerFile for my frontend service

FROM node:14-alpine AS builder

RUN apk update && apk add --no-cache npm
RUN apk --no-cache add nodejs npm

WORKDIR /opt/web
COPY . ./
RUN npm install

ENV PATH="./node_modules/.bin:$PATH"

RUN npm run build

FROM nginx:1.20.1-alpine
RUN apk --no-cache add curl

RUN curl -L https://github.com/a8m/envsubst/releases/download/v1.1.0/envsubst-`uname -s`-`uname -m` -o envsubst && \
    chmod +x envsubst && \
    mv envsubst /usr/local/bin
COPY ./nginx.config /etc/nginx/nginx.template
CMD ["/bin/sh", "-c", "envsubst < /etc/nginx/nginx.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]
COPY --from=builder /opt/web/build /usr/share/nginx/html

what I'm missing here? if I can make the changes reflect on a docker-compose restart, that would be good enough for me

Raul Quinzani
  • 493
  • 1
  • 4
  • 16
  • Hi Raul, the way you are using volumes in docker is correct. Ideally, this should hot load changes once the docker is running. Can you please make changes while your app is running and see if it's reflecting once again? – Suchandra T Apr 02 '23 at 05:36
  • @SuchandraT I make any changes to my backend app, and it loads on time, but the issue is with my frontend app, I'm trying to update my App.js, it doesn't reflect unless I rebuild everything – Raul Quinzani Apr 02 '23 at 05:47
  • Do you know which part of the build is slow? One thing that jumps out is that you're repeating `npm install` on every build; [How to cache the RUN npm install instruction when docker build a Dockerfile](https://stackoverflow.com/questions/35774714/how-to-cache-the-run-npm-install-instruction-when-docker-build-a-dockerfile) or [Why COPY package*.json ./ precedes COPY . .?](https://stackoverflow.com/questions/51533448/why-copy-package-json-precedes-copy) – David Maze Apr 02 '23 at 11:26
  • @DavidMaze it is the npm run build that takes a lot of time – Raul Quinzani Apr 02 '23 at 14:55
  • Is it significantly slower than running `npm run build` on your host system? (If Docker weren't involved, would you still have to rebuild your application on each change, and would it be any faster?) – David Maze Apr 02 '23 at 15:27

0 Answers0