Dockerfile لتطبيق حقيقي — Node و React

الـ instructions الأساسية

سر السرعة: الـ layer cache

كل instruction بتعمل طبقة، و Docker بيعمل cache لكل طبقة. لو الطبقة وكل اللي قبلها متغيّروش، بيستخدم الكاش. أول ما طبقة تتغيّر، كل اللي بعدها يتبني من جديد.

عشان كده الترتيب مهم: الحاجات اللي بتتغير قليل (الـ dependencies) فوق، والحاجات اللي بتتغير كتير (الكود) تحت.

🧪 Lab: API بـ Node

FROM node:22-alpineWORKDIR /app# انسخ ملفات الـ dependencies الأول بس → الكاش يفضل شغال لما الكود يتغيرCOPY package.json package-lock.json ./RUN npm ci --omit=dev# بعدين الكودCOPY . .ENV NODE_ENV=productionEXPOSE 3000USER nodeCMD ["node", "src/index.js"]

ولو بتستخدم pnpm، فعّله بـ corepack enable جوه الـ image وانسخ pnpm-lock.yaml بدل package-lock.json (راجع الـ docs لأمر التسطيب المناسب).

.dockerignore

زي .gitignore بس للـ build context. من غيره، COPY . . هينسخ node_modules بتاعتك (وممكن تكون لنظام تشغيل تاني!) و .env بأسرارك.

node_modulesdist.git.env*.logDockerfiledocker-compose.yml

🧪 Lab: React app بـ multi-stage

React بعد الـ build مجرد ملفات static. مش محتاج Node في الـ production خالص، محتاج web server زي nginx. هنا ييجي الـ multi-stage build: stage يبني، و stage تاني ياخد الناتج بس.

# Stage 1: البناءFROM node:22-alpine AS buildWORKDIR /appCOPY package.json package-lock.json ./RUN npm ciCOPY . .RUN npm run build# Stage 2: التشغيل — nginx بس + ملفات الـ buildFROM nginx:alpineCOPY --from=build /app/dist /usr/share/nginx/htmlEXPOSE 80

ابني وشغّل

docker build -t my-api ./apidocker run -d --name api -p 3000:3000 my-apidocker build -t my-web ./webdocker run -d --name web -p 8080:80 my-web

خلّصت الفصل لما

• ترتب الـ Dockerfile بحيث الـ dependencies تتكاش
• تكتب .dockerignore وتعرف ليه .env لازم يبقى فيه
• تعمل multi-stage لـ React وتفهم ليه الـ image صغرت
• تعرف إن EXPOSE توثيق بس و -p هو اللي بيفتح
• تشغّل التطبيق بـ USER node مش root