برنامه نویسی

نحوه Dockerize کردن یک برنامه React

ek3nk4r 2024-07-30

0 5 خواندن این مطلب 3 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

فهرست مطالب

نحوه Dockerize کردن یک برنامه React

Docker کردن یک برنامه React می تواند گردش کار توسعه شما را ساده کند، از محیط های سازگار در مراحل مختلف توسعه اطمینان حاصل کند و فرآیندهای استقرار را ساده کند. این راهنما شما را با مراحل Dockerize a React آشنا می‌کند، از راه‌اندازی محیط Docker تا ساخت و اجرای تصاویر Docker.

پیش نیازها

داکر: مطمئن شوید که Docker روی دستگاه شما نصب شده است. می توانید آن را از وب سایت رسمی Docker دانلود کنید.
React Application: شما باید یک برنامه 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 برای برنامه React خود، به دایرکتوری ریشه برنامه خود بروید و دستور زیر را اجرا کنید:

docker build -t my-react-app .

این دستور به داکر می گوید که با تگ یک تصویر بسازد my-react-app با استفاده از دایرکتوری فعلی (.) به عنوان زمینه.

مرحله 4: Docker Container را اجرا کنید

هنگامی که تصویر Docker ساخته شد، می توانید آن را در یک کانتینر با استفاده از دستور زیر اجرا کنید:

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

این دستور پورت 3000 را در دستگاه محلی شما به پورت 3000 در کانتینر نگاشت می کند و به شما امکان می دهد به برنامه React در مرورگر خود در آدرس زیر دسترسی داشته باشید. http://localhost:3000.

مرحله 5: نوشتن Docker (اختیاری)

اگر می خواهید چندین کانتینر را مدیریت کنید یا پیکربندی بیشتری اضافه کنید، می توانید از Docker Compose استفاده کنید. ایجاد یک docker-compose.yml فایل در پوشه ریشه با محتوای زیر:

version: '3'

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

برای شروع خدمات تعریف شده در docker-compose.yml فایل، دستور زیر را اجرا کنید:

docker-compose up

نتیجه

با انجام این مراحل، برنامه React خود را با موفقیت Dockerized کرده اید. Docker کردن برنامه شما نه تنها ثبات در محیط های مختلف را تضمین می کند، بلکه فرآیند استقرار را ساده می کند و مدیریت و مقیاس برنامه شما را آسان تر می کند.