Kategoria : Automatyzacja
⚙️ Co działa teraz automatycznie w środowisku React + Docker + Traefik
W tym artykule podpowiem, jak
po skonfigurowaniu Dockera i Traefika frontend Reacta działa automatycznie, stabilnie i z pełnym hot-reloadem, bez manualnego restartowania serwera po każdej zmianie w kodzie.
🧠 1️⃣ Automatyczny start po restarcie systemu
W pliku konfiguracyjnym docker-compose.react.yml znajduje się kluczowa linijka:
restart: always
➡️ Dzięki temu Docker automatycznie uruchamia kontener react-dev po każdym restarcie systemu lub demona Dockera (systemctl restart docker).
Nie trzeba nic manualnie włączać — serwer Reacta wystartuje sam i będzie dostępny jak wcześniej.
🔥 2️⃣ Natychmiastowe odświeżanie zmian w kodzie
W kontenerze ustawione są zmienne środowiskowe:
CHOKIDAR_USEPOLLING=true WATCHPACK_POLLING=true WDS_SOCKET_PORT=0
➡️ Dzięki nim React korzysta z polling-based file watcher (zamiast domyślnego inotify), co pozwala wykrywać zmiany w plikach choćby przez wolumeny Dockera.
Każdy zapisany plik w katalogu:
/var/www/wirtualna-redakcja/src
powoduje natychmiastowy rebuild w kontenerze — bez restartu procesu.
W praktyce wygląda to tak:
✏️ Zmieniasz coś w kodzie
🧠 React w kontenerze wykrywa zmianę
🔄 Strona w przeglądarce odświeża się automatycznie w ciągu 1–2 sekund
To prawdziwy hot reload – w pełni zintegrowany z Dockerem.
🌐 3️⃣ Dostęp przez Traefika
Wtedy aplikacja jest dostępna np. pod adresem:
👉 http://dev-wr.onenetworks.pl
(lub bezpośrednio pod http://:3000)
Dzięki konfiguracji sieci i etykiet Traefika:
networks:
traefik:
external: true
labels:
- „traefik.enable=true”
- „traefik.http.routers.react.rule=Host(
dev-wr.onenetworks.pl)” - „traefik.http.services.react.loadbalancer.server.port=3000”
Traefik automatycznie wykrywa kontener i dodaje trasę do Twojego frontendu Reacta.
Nie trzeba konfigurować Nginx’a ani proxy manualnie.
🧩 4️⃣ Stabilny hot reload choćby przy restarcie Traefika
W poprzednich wersjach środowiska restart Traefika potrafił zatrzymać proces Reacta.
Obecnie, dzięki poprawionej konfiguracji:
React działa niezależnie od restartów proxy,
Traefik po ponownym uruchomieniu automatycznie ponownie podłącza kontener do sieci,
nie ma potrzeby restartowania aplikacji manualnie.
🧱 5️⃣ Jak to przetestować
🔁 Sprawdź automatyczny start
Uruchom ponownie serwer:
sudo reboot
Po kilku minutach:
sudo docker ps | grep react-dev
Kontener react-dev powinien być widoczny jako Up, czyli aktywny.
💻 Sprawdź hot reload
Otwórz projekt w edytorze i zmień coś w pliku:
src/App.js
Po zapisaniu zobaczysz, iż przeglądarka automatycznie się odświeży – bez żadnego manualnego restartu.
🔒 Co dalej?
Kolejnym krokiem może być dodanie pełnego HTTPS z certyfikatami Let’s Encrypt, tak by serwer automatycznie uruchamiał się z bezpiecznym połączeniem:
👉 https://dev-wr.onenetworks.pl
To pozwoli używać tego samego środowiska również do testów produkcyjnych i integracji z backendem.
✍️ Autor:
Roman Berens
Projekt: Wirtualna Redakcja / OneNetworks
Temat: Automatyzacja środowiska React + Docker + Traefik
