Docker react nie wyświetla nowych zmian

Question

Witam,

konfiguruje środowisko pod react i wszystko się uruchamia tylko jest problem bo po odświeżeniu strony nie widać dokonanych zmian, próbowałem instalować nodemon zmieniać śnieżki do woluminów i nadal nic, przeglądałem różne poradniki i żaden nie rozwiązał mojego problemu :/

 

FROM node:10

WORKDIR /app

COPY . .

RUN npm install

CMD ["npm", "start"]

 

version: "3"
services:
  node:
    build:
        context: .
        dockerfile: Dockerfile
    container_name: cookapp-node
    ports:
      - "3000:3000"
    volumes:
      - .:/app

 

Answer 1

Jeśli jest to środowisko developerskie, to bez sensu ładować to do kontenera. Natomiast jeśli produkcyjne, to musisz to zrobić inaczej.

Frontendowe aplikacje zazwyczaj buduje się w dwóch etapach. Najpierw, tak jak masz to zrobione, instalujemy zależności npm i budujemy aplikację (zakładam że komenda npm run build). Następnie w Dockerfile dodajesz drugiego FROM. Tutaj wybierasz sobie jakiś obraz z jakimś serwerem (apache, lite httpd, nginx). Do tego obrazu przerzucasz zbudowaną aplikację.

Pamiętaj żeby przy tworzeniu dockera, dążyć do jak najlżejszych obrazie

Comments

rozumiem, przy okazji chciałbym zapytać jak połączyć nginx na vps z nginx na dockerze?. Na vps potrzebuje żeby tworzyć subdomeny a w dockerze potrzebuje żeby odpalić aplikacje i zauważyłem że nie mogę odpalić dwóch nginx (pewnie dla tego że są na tym samym porcie 80), w jaki sposób mogę to rozwiązać?

---

@mtk3d, możesz pokazać jakiś tego przykład?

---

@`Krzychuu Z dockera wystawiasz dowolny port (inny niż 80, np 8080) i nginx'a używasz jako proxy. Jeśli nginx obsługuje tylko domeny, to poczytaj o traefiku (lekki napisany w go). Port możesz przekierować zarówno z komendy jak i z docker-compose: 
https://docs-stage.docker.com/config/containers/container-networking/
https://docs.docker.com/compose/compose-file/#ports

@kevin Napisane na szybko z palca więc nie wiem czy działa, ale mniej więcej coś takiego:

FROM node:10.16-alpine as build

WORKDIR /code
COPY . .
RUN npm install --only=prod
RUN npm run build

FROM nginx:1.17-alpine

WORKDIR /var/www
COPY --from=build /code/build .
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf

---

dzięki, już jakis zarys mam tego. A co mogę zrobić z przeładowywaniem strony na środowisku dev dałoby się to ogarnąć?

---

Masz na myśli środowisko lokalne, w trakcie developmentu?
Jeśli tak, to nie ma sensu pakować tego w kontener, bo frontend działa głównie po stronie klienta i mało zależy od środowiska. Jak na produkcji wrzucisz w kontener, to wiele się dla niego nie zmieni.

---

@mtk3d,
 a jak wygląda aktualizacja środowiska? Jeżeli były zmiany w kodzie na developie i chcę zaktualizować środowisko to wchodzę w kontenera z projektem wpisuję git pull następnie do kontenera z node i wpisuję npm run build prod ?

Answer 2

jeżeli ktoś ma taki sam problem znalazłem rozwiązanie, wystarczyło utworzyć w głównym katalogu aplikacji plik .env i dodać do niego 

CHOKIDAR_USEPOLLING=true