רקע

במהלך תרגול Bind Mounts (וכל פרויקט שמשתמש ב־Create React App עם Hot Reloading), ייתכן שתיתקלו בבעיה שבה ה־Hot Reloading לא עובד כמצופה בעת הרצת הקונטיינר שנבנה מ־Dockerfile.dev.

אם גם אצלכם השינויים בקוד אינם מתעדכנים בדפדפן — קיימות שתי אפשרויות לפתרון.

פתרון 1 — הוספת משתני סביבה בזמן הרצת הקונטיינר

ניתן להשאיר את Dockerfile.dev כפי שמוצג בשיעור,

ולהוסיף שני משתני סביבה בעת הרצת הקונטיינר:

docker run --rm -d -p 3000:3000 \
  -v ./public:/app/public \
  -v ./src:/app/src \
  -e CHOKIDAR_USEPOLLING=true \
  -e WATCHPACK_POLLING=true \
  react-app:dev

מה זה עושה?

משתני הסביבה:

CHOKIDAR_USEPOLLING=true
WATCHPACK_POLLING=true

מאלצים את מנגנון ה־Hot Reloading לעבוד בשיטת polling במקום להסתמך על file system events.

פתרון 2 — הוספת משתני הסביבה בתוך Dockerfile.dev

במקום להעביר משתנים בכל הרצה, ניתן להגדיר אותם ישירות בקובץ Dockerfile.dev.

FROM node:22-alpine AS build

WORKDIR /app

COPY package*.json .

# Temporarily adding --force to avoid underlying dependency conflicts
# due to latest versions of react-scripts.
RUN npm ci --force

ENV CHOKIDAR_USEPOLLING=true
ENV WATCHPACK_POLLING=true

COPY . .
CMD ["npm", "start"]

במקרה זה, אין צורך להעביר משתני סביבה בפקודת docker run.

שימו לב: קוד המאגר הרשמי של הקורס כבר עודכן וכולל את משתני הסביבה באמצעות ENV.

הערה חשובה לגבי Polling