كيفية إرساء تطبيق React

يمكن أن يؤدي إرساء تطبيق React إلى تبسيط سير عمل التطوير لديك، وضمان بيئات متسقة عبر مراحل مختلفة من التطوير، وتبسيط عمليات النشر. سيرشدك هذا الدليل خلال خطوات Dockerize a React، بدءًا من إعداد بيئة Docker وحتى إنشاء صور Docker وتشغيلها.

المتطلبات الأساسية

1. Docker: تأكد من تثبيت Docker على جهازك. يمكنك تنزيله من موقع Docker الرسمي.

2. تطبيق React : يجب أن يكون لديك تطبيق React تم إنشاؤه باستخدام create-react-app أو طريقة أخرى. إذا لم يكن لديك واحدًا، فيمكنك إنشاء تطبيق أساسي باستخدام تطبيق create-react-app.
   

npx create-react-app my-react-app
cd my-react-app

الخطوة 1: إنشاء ملف Dockerfile

ملف Dockerfile هو برنامج نصي يحتوي على سلسلة من الإرشادات حول كيفية إنشاء صورة Docker لتطبيقك. في الدليل الجذر لتطبيق React الخاص بك، قم بإنشاء ملف باسم Dockerfile بالمحتوى التالي:

# Use an official node runtime as a parent image
FROM node:16-alpine

# Set the working directory
WORKDIR /app

# Copy the package.json and package-lock.json files to the working directory
COPY package*.json ./

# Install the dependencies
RUN npm install

# Copy the rest of the application code to the working directory
COPY . .

# Build the React app
RUN npm run build

# Install a simple server to serve the React app
RUN npm install -g serve

# Set the command to run the server
CMD ["serve", "-s", "build"]

# Expose port 3000
EXPOSE 3000

الخطوة 2: إنشاء ملف .dockerignore

يحدد ملف .dockerignore الملفات والأدلة التي يجب تجاهلها عند نسخ الملفات إلى صورة Docker. يمكن أن يساعد ذلك في تقليل حجم الصورة وتسريع عملية الإنشاء. قم بإنشاء ملف .dockerignore في الدليل الجذر بالمحتوى التالي:

node_modules
build
.dockerignore
Dockerfile
.git
.gitignore

الخطوة 3: إنشاء صورة Docker

لإنشاء صورة Docker لتطبيق React الخاص بك، انتقل إلى الدليل الجذر لتطبيقك وقم بتشغيل الأمر التالي:

docker build -t my-react-app .

يطلب هذا الأمر من Docker إنشاء صورة باستخدام العلامة my-react-app باستخدام الدليل الحالي (.) كسياق.

الخطوة 4: تشغيل حاوية Docker

بمجرد إنشاء صورة Docker، يمكنك تشغيلها في حاوية باستخدام الأمر التالي:

docker run -p 3000:3000 my-react-app

يقوم هذا الأمر بتعيين المنفذ 3000 على جهازك المحلي إلى المنفذ 3000 في الحاوية، مما يسمح لك بالوصول إلى تطبيق React في متصفحك على http://localhost:3000.

الخطوة 5: إنشاء عامل ميناء (اختياري)

إذا كنت تريد إدارة حاويات متعددة أو إضافة المزيد من التكوين، فيمكنك استخدام Docker Compose. قم بإنشاء ملف docker-compose.yml في الدليل الجذر بالمحتوى التالي:

version: '3'

services:
  react-app:
    build: .
    ports:
      - "3000:3000"

لبدء الخدمات المحددة في ملف docker-compose.yml، قم بتشغيل الأمر التالي:

docker-compose up

خاتمة

باتباع هذه الخطوات، تكون قد نجحت في إرساء تطبيق React الخاص بك. لا يضمن إرساء تطبيقك الاتساق عبر بيئات مختلفة فحسب، بل يعمل أيضًا على تبسيط عملية النشر، مما يسهل إدارة تطبيقك وتوسيع نطاقه.

مصادر إضافية

• وثائق عامل الميناء
• وثائق التفاعل
• وثائق إنشاء عامل الميناء

لا تتردد في تخصيص تكوين Dockerfile وDocker Compose وفقًا للاحتياجات المحددة لمشروعك. إرساء سعيد!