كيفية إرساء تطبيق React باستخدام Vite

سأوضح لك في هذه المقالة كيفية إرساء تطبيق React المبني باستخدام Vite. سنمر عبر:

تكوين Vite لـ Docker
إنشاء ملف Docker
إنشاء ملف Docker Compose
بناء وتشغيل حاوية Docker

بحلول نهاية هذه المقالة، سيكون لديك تطبيق React محمول جاهز للنشر في أي بيئة.

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

لمتابعة هذا البرنامج التعليمي، أفترض أنك على دراية بأساسيات صور وحاويات Docker. سنبدأ بشرح موجز لماهية Docker ثم نتعمق في العملية العملية.

Docker عبارة عن نظام أساسي مفتوح المصدر يقوم بتجميع تطبيقك وتبعياته في بيئة معزولة تُعرف باسم الحاوية. باستخدام مجموعة صغيرة فقط من التعليمات، يمكنك بسهولة إنشاء الصور وتشغيلها كحاويات، مما يجعل تطبيقاتك محمولة ومتسقة عبر بيئات مختلفة.

الخطوة 1: تكوين Vite لـ Docker

أولاً، نحتاج إلى تكوين Vite للعمل بسلاسة داخل بيئة Docker. دعونا نقوم بتحديث vite.config.js الملف للتأكد من توافقه.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    watch: {
      usePolling: true,
    },
  },
});

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

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

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

الآن، لنقم بإنشاء ملف Dockerfile في الدليل الجذر لمشروعنا وأضف التعليمات الخاصة ببناء صورة Docker الخاصة بنا.

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

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Expose the port the app runs on
EXPOSE 5173

# Command to run the app
CMD ["npm", "run", "dev"]

الخطوة 3: إنشاء ملف Docker Compose

الآن، دعنا ننتقل إلى إنشاء ملف Docker Compose. لكن أولاً، ما هو Docker Compose؟ Docker Compose هي أداة لتحديد وتشغيل تطبيقات Docker متعددة الحاويات.

لنقم بإنشاء ملف docker-compose.yml الملف في الدليل الجذر لمشروعنا وأضف التعليمات اللازمة:

version: '3.8'
services:
  web:
    build: .
    ports:
      - "5173:5173"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true

دعونا نحلل الخطوات في docker-compose.yml ملف لنشر مشروع React Vite:

version: '3.8': يحدد إصدار ملف Docker Compose
services:: يحدد قائمة الخدمات التي سيديرها Docker Compose
web:: هذا هو اسم خدمتنا.
build: .: يخبر Docker Compose بإنشاء صورة Docker باستخدام ملف Dockerfile في الدليل الحالي
ports: "5173:5173": يقوم بتعيين المنفذ الداخلي للحاوية 5173 إلى منفذ الجهاز المضيف 5173، مما يسمح لك بالوصول إلى التطبيق عبر http://localhost:5173
volumes:: يقوم بتحميل دليل المشروع على جهازك المضيف إلى ملف /app الدليل داخل الحاوية، مما يسمح بالتحديثات المباشرة. المجلد الثاني يؤكد ذلك node_modules لا يتم الكتابة فوق.
environment:: يضبط متغيرات البيئة داخل الحاوية. CHOKIDAR_USEPOLLING=true يضمن أن التطبيق يراقب بشكل صحيح تغييرات الملفات داخل Docker.

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

لنقم الآن بإنشاء صورة Docker باستخدام الأمر التالي:

docker-compose up --build

يخبر هذا الأمر Docker Compose بإنشاء صورة Docker وفقًا لملف Dockerfile ثم بدء الخدمة. ال --build العلم يفرض إعادة بناء الصورة، حتى لو لم تكن هناك تغييرات.

تشغيل الحاوية

بمجرد اكتمال الإنشاء، سيبدأ Docker Compose الحاوية تلقائيًا. يمكنك الوصول إلى التطبيق الخاص بك عن طريق الانتقال إلى http://localhost:5173 في المتصفح الخاص بك.