تعلم كيفية إعداد بيئة تطوير JavaScript قوية ومتسقة باستخدام حاويات Docker. يغطي هذا الدليل الشامل كل شيء من الإعداد الأساسي إلى التكوينات المتقدمة، مما يضمن سير عمل سلس وفعال.
بيئة تطوير JavaScript: تكوين حاوية Docker
في عالم تطوير البرمجيات سريع الخطى اليوم، يعد الحفاظ على بيئة تطوير متسقة وقابلة للتكرار أمرًا بالغ الأهمية. يمكن أن تؤدي أنظمة التشغيل المختلفة وإصدارات البرامج المتغيرة والتبعيات المتعارضة إلى متلازمة "إنه يعمل على جهازي" المزعجة. توفر Docker، وهي منصة رائدة للحوسبة بالحاويات، حلاً قويًا لهذه المشكلة، مما يسمح للمطورين بتغليف تطبيقاتهم وتبعياتها في وحدة واحدة معزولة.
سيرشدك هذا الدليل خلال عملية إعداد بيئة تطوير JavaScript قوية ومتسقة باستخدام حاويات Docker. سنغطي كل شيء بدءًا من الإعداد الأساسي إلى التكوينات المتقدمة، مما يضمن سير عمل سلسًا وفعالًا لمشاريع JavaScript الخاصة بك، بغض النظر عن أنظمة التشغيل المتنوعة لفريقك.
لماذا نستخدم Docker لتطوير JavaScript؟
قبل الخوض في التفاصيل، دعنا نستكشف فوائد استخدام Docker لبيئة تطوير JavaScript الخاصة بك:
- الاتساق: يضمن Docker أن يعمل كل فرد في فريقك بنفس البيئة تمامًا، مما يزيل مشكلات التوافق ويقلل من احتمالية ظهور الأخطاء الناتجة عن اختلافات البيئة. هذا مهم بشكل خاص للفرق الموزعة جغرافيًا.
- العزل: توفر الحاويات العزل عن النظام المضيف، مما يمنع التعارض مع المشاريع الأخرى ويضمن عدم تداخل تبعياتك مع بعضها البعض.
- قابلية التكرار: يمكن مشاركة صور Docker ونشرها بسهولة، مما يجعل من السهل إعادة إنتاج بيئة التطوير الخاصة بك على أجهزة مختلفة أو في بيئة الإنتاج. هذا مفيد بشكل خاص عند ضم أعضاء جدد للفريق أو النشر على مزودي خدمات سحابية مختلفين.
- قابلية النقل: يمكن تشغيل حاويات Docker على أي منصة تدعم Docker، بما في ذلك Windows و macOS و Linux، مما يسمح للمطورين باستخدام نظام التشغيل المفضل لديهم دون التأثير على المشروع.
- نشر مبسط: يمكن استخدام نفس صورة Docker المستخدمة في التطوير للاختبار والإنتاج، مما يبسط عملية النشر ويقلل من مخاطر الأخطاء.
المتطلبات الأساسية
قبل أن تبدأ، تأكد من تثبيت ما يلي:
- Docker: قم بتنزيل وتثبيت Docker Desktop لنظام التشغيل الخاص بك من موقع Docker الرسمي (docker.com). يتضمن Docker Desktop محرك Docker و Docker CLI و Docker Compose وأدوات أساسية أخرى.
- Node.js و npm (اختياري): على الرغم من أنها ليست مطلوبة بشكل صارم على جهازك المضيف لأنها ستكون داخل الحاوية، إلا أن تثبيت Node.js و npm محليًا يمكن أن يكون مفيدًا للمهام خارج الحاوية أو عند إعداد هيكل مشروعك الأولي. يمكنك تنزيلها من nodejs.org.
- محرر أكواد: اختر محرر الأكواد المفضل لديك (على سبيل المثال، VS Code، Sublime Text، Atom). يحتوي VS Code على إضافات Docker ممتازة يمكنها تبسيط سير عملك.
التكوين الأساسي لملف Dockerfile
أساس أي بيئة قائمة على Docker هو ملف Dockerfile. يحتوي هذا الملف على تعليمات لبناء صورة Docker الخاصة بك. لنقم بإنشاء ملف Dockerfile أساسي لتطبيق Node.js:
# استخدم وقت تشغيل Node.js رسمي كصورة أساسية
FROM node:18-alpine
# حدد دليل العمل في الحاوية
WORKDIR /app
# انسخ package.json و package-lock.json إلى دليل العمل
COPY package*.json ./
# قم بتثبيت تبعيات التطبيق
RUN npm install
# انسخ الكود المصدري للتطبيق إلى دليل العمل
COPY . .
# قم بعرض المنفذ 3000 للعالم الخارجي (عدّل إذا كان تطبيقك يستخدم منفذًا مختلفًا)
EXPOSE 3000
# حدد الأمر الذي سيتم تشغيله عند بدء تشغيل الحاوية
CMD ["npm", "start"]
لنفصل كل سطر:
FROM node:18-alpine: يحدد الصورة الأساسية للحاوية. في هذه الحالة، نستخدم صورة Node.js 18 Alpine الرسمية، وهي توزيعة Linux خفيفة الوزن. تشتهر Alpine بحجمها الصغير، مما يساعد على إبقاء صورة Docker الخاصة بك صغيرة الحجم. ضع في اعتبارك إصدارات Node.js الأخرى حسب ما يناسب مشروعك.WORKDIR /app: يضبط دليل العمل داخل الحاوية على/app. هذا هو المكان الذي سيتواجد فيه كود التطبيق الخاص بك.COPY package*.json ./: ينسخ ملفاتpackage.jsonوpackage-lock.json(أوyarn.lockإذا كنت تستخدم Yarn) إلى دليل العمل. يسمح نسخ هذه الملفات أولاً لـ Docker بتخزين خطوةnpm installمؤقتًا، مما يسرع بشكل كبير من أوقات البناء عندما تقوم فقط بتغيير كود التطبيق.RUN npm install: يثبت تبعيات التطبيق المحددة فيpackage.json.COPY . .: ينسخ جميع الملفات والمجلدات المتبقية من دليل مشروعك المحلي إلى دليل العمل داخل الحاوية.EXPOSE 3000: يعرض المنفذ 3000، مما يجعله متاحًا من الجهاز المضيف. هذا مهم إذا كان تطبيقك يستمع على هذا المنفذ. عدّل رقم المنفذ إذا كان تطبيقك يستخدم منفذًا مختلفًا.CMD ["npm", "start"]: يحدد الأمر الذي سيتم تشغيله عند بدء الحاوية. في هذه الحالة، نستخدمnpm start، وهو أمر شائع لبدء تطبيقات Node.js. تأكد من أن هذا الأمر يطابق الأمر المحدد في قسمscriptsفي ملفpackage.jsonالخاص بك.
بناء صورة Docker
بمجرد إنشاء ملف Dockerfile الخاص بك، يمكنك بناء صورة Docker باستخدام الأمر التالي:
docker build -t my-node-app .
حيث:
docker build: أمر Docker لبناء الصور.-t my-node-app: يحدد الوسم (الاسم) للصورة. اختر اسمًا وصفيًا لتطبيقك..: يحدد سياق البناء، وهو الدليل الحالي. سيستخدم Docker ملفDockerfileفي هذا الدليل لبناء الصورة.
سيقوم Docker بعد ذلك بتنفيذ التعليمات الموجودة في Dockerfile الخاص بك، وبناء الصورة طبقة تلو الأخرى. في المرة الأولى التي تبني فيها الصورة، قد يستغرق الأمر بعض الوقت لتنزيل الصورة الأساسية وتثبيت التبعيات. ومع ذلك، ستكون عمليات البناء اللاحقة أسرع بكثير لأن Docker يخزن الطبقات الوسيطة مؤقتًا.
تشغيل حاوية Docker
بعد بناء الصورة، يمكنك تشغيل حاوية منها باستخدام الأمر التالي:
docker run -p 3000:3000 my-node-app
حيث:
docker run: أمر Docker لتشغيل الحاويات.-p 3000:3000: يربط المنفذ 3000 على الجهاز المضيف بالمنفذ 3000 داخل الحاوية. يتيح لك هذا الوصول إلى تطبيقك من متصفحك باستخدامlocalhost:3000. الرقم الأول هو منفذ المضيف، والرقم الثاني هو منفذ الحاوية.my-node-app: اسم الصورة التي تريد تشغيلها.
يجب أن يكون تطبيقك الآن قيد التشغيل داخل حاوية Docker. يمكنك الوصول إليه عن طريق فتح متصفحك والانتقال إلى localhost:3000 (أو المنفذ الذي حددته). يجب أن ترى شاشة الترحيب أو واجهة المستخدم الأولية لتطبيقك.
استخدام Docker Compose
بالنسبة للتطبيقات الأكثر تعقيدًا التي تحتوي على خدمات متعددة، يعد Docker Compose أداة لا تقدر بثمن. يسمح لك بتحديد وإدارة التطبيقات متعددة الحاويات باستخدام ملف YAML. لنقم بإنشاء ملف docker-compose.yml لتطبيق Node.js الخاص بنا:
version: "3.9"
services:
app:
build: .
ports:
- "3000:3000"
volumes:
- .:/app
environment:
NODE_ENV: development
command: npm run dev
لنفحص كل قسم:
version: "3.9": يحدد إصدار تنسيق ملف Docker Compose.services: يحدد الخدمات التي يتكون منها تطبيقك. في هذه الحالة، لدينا خدمة واحدة تسمىapp.build: .: يحدد أنه يجب بناء الصورة منDockerfileفي الدليل الحالي.ports: - "3000:3000": يربط المنفذ 3000 على الجهاز المضيف بالمنفذ 3000 داخل الحاوية، على غرار أمرdocker run.volumes: - .:/app: ينشئ وحدة تخزين (volume) تقوم بربط الدليل الحالي على جهازك المضيف بدليل/appداخل الحاوية. يتيح لك هذا إجراء تغييرات على الكود الخاص بك على الجهاز المضيف وعكسها تلقائيًا داخل الحاوية، مما يتيح التحديث الفوري (hot reloading).environment: NODE_ENV: development: يضبط متغير البيئةNODE_ENVداخل الحاوية علىdevelopment. هذا مفيد لتكوين تطبيقك للعمل في وضع التطوير.command: npm run dev: يتجاوز الأمر الافتراضي المحدد في Dockerfile. في هذه الحالة، نستخدمnpm run dev، والذي يستخدم غالبًا لبدء خادم تطوير مع التحديث الفوري.
لبدء التطبيق باستخدام Docker Compose، انتقل إلى الدليل الذي يحتوي على ملف docker-compose.yml وقم بتشغيل الأمر التالي:
docker-compose up
سيقوم Docker Compose ببناء الصورة (إذا لزم الأمر) وبدء الحاوية. يمكن إضافة العلامة -d لتشغيل الحاوية في وضع منفصل (في الخلفية).
خيارات التكوين المتقدمة
فيما يلي بعض خيارات التكوين المتقدمة لتحسين بيئة تطوير JavaScript الخاصة بك باستخدام Docker:
1. البناء متعدد المراحل
يسمح لك البناء متعدد المراحل باستخدام تعليمات FROM متعددة في ملف Dockerfile الخاص بك، حيث تمثل كل منها مرحلة بناء مختلفة. هذا مفيد لتقليل حجم صورتك النهائية عن طريق فصل بيئة البناء عن بيئة وقت التشغيل.
# المرحلة 1: بناء التطبيق
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# المرحلة 2: إنشاء صورة وقت التشغيل
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
في هذا المثال، تقوم المرحلة الأولى (builder) ببناء التطبيق باستخدام Node.js. تستخدم المرحلة الثانية Nginx لخدمة ملفات التطبيق المبنية. يتم نسخ الملفات المبنية فقط من المرحلة الأولى إلى المرحلة الثانية، مما ينتج عنه صورة أصغر وأكثر كفاءة.
2. استخدام متغيرات البيئة
تعد متغيرات البيئة طريقة قوية لتكوين تطبيقك دون تعديل الكود. يمكنك تحديد متغيرات البيئة في ملف docker-compose.yml الخاص بك أو تمريرها في وقت التشغيل باستخدام العلامة -e.
services:
app:
environment:
API_URL: "http://api.example.com"
داخل تطبيقك، يمكنك الوصول إلى متغيرات البيئة هذه باستخدام process.env.
const apiUrl = process.env.API_URL;
3. ربط وحدات التخزين للتطوير
ربط وحدات التخزين (كما هو موضح في مثال Docker Compose) أمر بالغ الأهمية للتطوير لأنه يسمح لك بإجراء تغييرات على الكود الخاص بك على الجهاز المضيف وعكسها على الفور داخل الحاوية. هذا يلغي الحاجة إلى إعادة بناء الصورة في كل مرة تقوم فيها بإجراء تغيير.
4. تصحيح الأخطاء باستخدام VS Code
يتمتع VS Code بدعم ممتاز لتصحيح أخطاء تطبيقات Node.js التي تعمل داخل حاويات Docker. يمكنك استخدام إضافة VS Code Docker للاتصال بحاوية قيد التشغيل وتعيين نقاط التوقف وفحص المتغيرات والتنقل عبر الكود الخاص بك.
أولاً، قم بتثبيت إضافة Docker في VS Code. بعد ذلك، قم بإنشاء ملف launch.json في دليل .vscode الخاص بك بالتكوين التالي:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach to Docker",
"port": 9229,
"address": "localhost",
"remoteRoot": "/app",
"localRoot": "${workspaceFolder}"
}
]
}
تأكد من بدء تشغيل تطبيق Node.js الخاص بك باستخدام العلامة --inspect أو --inspect-brk. على سبيل المثال، يمكنك تعديل ملف docker-compose.yml الخاص بك لتضمين هذه العلامة:
services:
app:
command: npm run dev -- --inspect=0.0.0.0:9229
بعد ذلك، في VS Code، حدد تكوين "Attach to Docker" وابدأ في تصحيح الأخطاء. ستتمكن من تعيين نقاط التوقف وتصحيح أخطاء الكود الذي يعمل داخل الحاوية.
5. استخدام سجل npm خاص
إذا كنت تعمل على مشروع به حزم npm خاصة، فستحتاج إلى تكوين حاوية Docker الخاصة بك للمصادقة مع سجل npm الخاص بك. يمكن القيام بذلك عن طريق تعيين متغير البيئة NPM_TOKEN في ملف docker-compose.yml الخاص بك أو عن طريق إنشاء ملف .npmrc في دليل مشروعك ونسخه إلى الحاوية.
# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
COPY .npmrc .
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
يجب أن يحتوي ملف .npmrc على رمز المصادقة الخاص بك:
//registry.npmjs.org/:_authToken=YOUR_NPM_TOKEN
تذكر استبدال YOUR_NPM_TOKEN برمز npm الفعلي الخاص بك. حافظ على هذا الرمز آمنًا ولا تقم بتثبيته في مستودعك العام.
6. تحسين حجم الصورة
يعد الحفاظ على حجم صورة Docker صغيرًا أمرًا مهمًا لسرعة أوقات البناء والنشر. إليك بعض النصائح لتحسين حجم الصورة:
- استخدم صورة أساسية خفيفة الوزن، مثل
node:alpine. - استخدم البناء متعدد المراحل لفصل بيئة البناء عن بيئة وقت التشغيل.
- أزل الملفات والمجلدات غير الضرورية من الصورة.
- استخدم ملف
.dockerignoreلاستبعاد الملفات والمجلدات من سياق البناء. - اجمع أوامر
RUNالمتعددة في أمر واحد لتقليل عدد الطبقات.
مثال: تحويل تطبيق React إلى حاوية Docker
دعنا نوضح هذه المفاهيم بمثال عملي: تحويل تطبيق React تم إنشاؤه باستخدام Create React App إلى حاوية Docker.
أولاً، قم بإنشاء تطبيق React جديد باستخدام Create React App:
npx create-react-app my-react-app
cd my-react-app
بعد ذلك، قم بإنشاء ملف Dockerfile في الدليل الجذر للمشروع:
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
أنشئ ملف docker-compose.yml:
version: "3.9"
services:
app:
build: .
ports:
- "3000:80"
volumes:
- .:/app
environment:
NODE_ENV: development
ملاحظة: نحن نربط المنفذ 3000 على المضيف بالمنفذ 80 داخل الحاوية لأن Nginx يخدم التطبيق على المنفذ 80. قد تحتاج إلى تعديل ربط المنفذ اعتمادًا على تكوين تطبيقك.
أخيرًا، قم بتشغيل docker-compose up لبناء وبدء التطبيق. يمكنك بعد ذلك الوصول إلى التطبيق عن طريق الانتقال إلى localhost:3000 في متصفحك.
المشكلات الشائعة واستكشاف الأخطاء وإصلاحها
حتى مع التكوين الدقيق، قد تواجه مشكلات عند العمل مع Docker. فيما يلي بعض المشكلات الشائعة وحلولها:
- تعارض المنافذ: تأكد من أن المنافذ التي تقوم بربطها في ملف
docker-compose.ymlأو أمرdocker runليست قيد الاستخدام بالفعل من قبل تطبيقات أخرى على جهازك المضيف. - مشكلات ربط وحدات التخزين: تحقق من الأذونات على الملفات والمجلدات التي تقوم بربطها. قد لا يمتلك Docker الأذونات اللازمة للوصول إلى الملفات.
- فشل بناء الصورة: افحص بعناية مخرجات أمر
docker buildبحثًا عن الأخطاء. تشمل الأسباب الشائعة صيغةDockerfileغير صحيحة، أو تبعيات مفقودة، أو مشكلات في الشبكة. - تعطل الحاوية: استخدم أمر
docker logsلعرض سجلات الحاوية الخاصة بك وتحديد سبب التعطل. تشمل الأسباب الشائعة أخطاء التطبيق، أو متغيرات البيئة المفقودة، أو قيود الموارد. - أوقات بناء بطيئة: قم بتحسين ملف
Dockerfileالخاص بك باستخدام البناء متعدد المراحل، وتخزين التبعيات مؤقتًا، وتقليل عدد الطبقات.
الخاتمة
يوفر Docker حلاً قويًا ومتعدد الاستخدامات لإنشاء بيئات تطوير JavaScript متسقة وقابلة للتكرار. باستخدام Docker، يمكنك التخلص من مشكلات التوافق، وتبسيط النشر، وضمان أن يعمل كل فرد في فريقك بنفس البيئة.
لقد غطى هذا الدليل أساسيات إعداد بيئة تطوير JavaScript باستخدام Docker، بالإضافة إلى بعض خيارات التكوين المتقدمة. باتباع هذه الخطوات، يمكنك إنشاء سير عمل قوي وفعال لمشاريع JavaScript الخاصة بك، بغض النظر عن تعقيدها أو حجم فريقك. احتضن Docker وأطلق العنان للإمكانات الكاملة لعملية تطوير JavaScript الخاصة بك.
الخطوات التالية:
- استكشف Docker Hub للحصول على صور مسبقة الصنع تناسب احتياجاتك الخاصة.
- تعمق أكثر في Docker Compose لإدارة التطبيقات متعددة الحاويات.
- تعرف على Docker Swarm و Kubernetes لتنسيق حاويات Docker في بيئات الإنتاج.
من خلال دمج أفضل الممارسات هذه في سير عملك، يمكنك إنشاء بيئة تطوير أكثر كفاءة وموثوقية وقابلية للتوسع لتطبيقات JavaScript الخاصة بك، مما يضمن النجاح في سوق اليوم التنافسي.