تغییرات اخیر

در اینجا اطلاعیه‌ها، نسخه‌ها و تغییرات جدید لیارا فهرست می‌شوند.

۰۲۵ ۳۲۰۹۸۰۰۰

آنچه در این مقاله می‌خوانید

آموزش راه‌اندازی برنامه React با NGINX در Docker


۱۲ اسفند ۱۳۹۹

React یکی از کتابخانه‌های پرکاربرد JavaScript برای توسعه رابط‌های کاربری مدرن و تعاملی است. این کتابخانه معمولاً با استفاده از ابزارهایی مانند create-react-app راه‌اندازی می‌شود که امکان توسعه سریع و آسان پروژه‌های React را فراهم می‌کند. با این حال، زمانی که قصد دارید یک برنامه React را در محیط Production مستقر کنید، تنها اجرای محلی آن کافی نیست و لازم است خروجی نهایی برنامه با استفاده از یک وب‌سرور پایدار و بهینه مانند NGINX در دسترس قرار گیرد.

در این مقاله از لیارا، نحوه استقرار یک برنامه React را در Docker به‌صورت مرحله‌به‌مرحله آموزش خواهیم داد.

همین حالا به سادگی پروژه‌های داکر خود را در هاست ابری لیارا دیپلوی کنید!
✅ دامنه رایگان ✅ ترافیک نامحدود ✅ هزینه ساعتی
خرید هاست ابری Docker

آنچه در ادامه خواهید خواند:

  • پیش نیاز ها
  • مرحله اول: ایجاد و ساخت پروژه React
  • مرحله دوم: آماده‌ سازی فایل‌ های Docker
  • مرحله سوم: ساخت Docker image
  • مرحله چهارم: اجرای Container
  • سوالات متداول
  • جمع بندی

پیش نیاز ها

پیش از شروع هرگونه فرآیندی، اطمینان حاصل کنید تا موارد زیر روی سیستم شما نصب شده باشد:

  • Node.js و npm
  • Docker Engine
  • دسترسی به ترمینال یا خط فرمان

مرحله اول: ایجاد و ساخت پروژه React

ابتدا یک پروژه‌ی جدید React را با استفاده از دستور زیر ایجاد کنید.

npx create-react-app react-nginx

این دستور یک پوشه جدید با نام react-nginx ایجاد می‌کند که شامل ساختار پایه‌ برنامه React است. وارد پوشه‌ پروژه شوید.

cd react-nginx
آموزش راه‌اندازی برنامه react با nginx در docker

مرحله دوم: آماده‌ سازی فایل‌ های Docker

تمامی مراحل را به درستی و قدم به قدم انجام دهید تا نتیجه درستی را از این فرآیند داشته باشید.

ایجاد فایل dockerignore.

برای جلوگیری از کپی شدن فایل‌ها یا پوشه‌های غیرضروری مانند node_modules به داخل Docker image، فایل .dockerignore را به شکل زیر ایجاد کنید.

echo "node_modules" > .dockerignore

ایجاد فایل Dockerfile

در ریشه پروژه (پوشه react-nginx) فایلی با نام Dockerfile ایجاد کرده و محتوای زیر را در آن قرار دهید.

# Stage 1: Build the React app
FROM node:18 AS builder

WORKDIR /usr/src/app

COPY . .

RUN npm install && npm run build

# Stage 2: Serve app using NGINX
FROM nginx:alpine

WORKDIR /usr/share/nginx/html

RUN rm -rf ./*

COPY --from=builder /usr/src/app/build .

EXPOSE 80

ENTRYPOINT ["nginx", "-g", "daemon off;"]

همین الان، هاست ابری React را با سرعت بالا راه‌اندازی کنید.
✅ بدون نیاز به پیکربندی ✅ استقرار آسان ✅ مناسب برای React
خرید هاست React

مرحله سوم: ساخت Docker image

پس از آماده‌سازی فایل‌ها، از دستور زیر برای ساخت Docker image استفاده کنید.

docker build -t react-nginx .

با اجرای این دستور، Docker فایل‌های پروژه را خوانده و image نهایی را با نام react-nginx می‌سازد.

مرحله چهارم: اجرای Container

برای اجرای container از ایمیج‌های ساخته‌شده، دستور زیر را اجرا کنید.

docker run --name react-nginx-app --rm -it -p 8000:80 react-nginx

پس از اجرای موفقیت‌آمیز کانتینرها، می‌توانید با مراجعه به آدرس زیر در مرورگر، برنامه‌ خود را مشاهده کنید.

http://localhost:8000

به این ترتیب، توانستید تا یک برنامه React را با استفاده از Docker build کرده و خروجی آن را از طریق وب‌سرور NGINX در محیط عملیاتی اجرا کنید.

سوالات متداول

در ادامه به سوالاتی که امکان دارد در این زمینه برای شما بدون پاسخ بماند، جواب‌های کوتاه اما مفیدی داده‌ایم که با استفاده از آن می‌توانید به سوال خود پاسخ صحیحی را بدهید.

چرا از دو مرحله در Dockerfile استفاده می‌ کنیم؟

استفاده از ساختار Multi-Stage باعث کاهش حجم ایمیج‌های نهایی می‌شود. در مرحله اول تنها build انجام شده و در مرحله دوم فقط فایل‌های لازم برای اجرا به image منتقل می‌شود. این موضوع به بهینه‌سازی امنیت و سرعت اجرای کانتینرها کمک می‌کند.

آیا می‌ توان برنامه React را مستقیما با Node.js اجرا کرد؟

خیر، برنامه‌های تولیدشده با create-react-app برای اجرا در حالت production نیازی به Node.js ندارند. این برنامه‌ها فقط شامل فایل‌های استاتیک HTML , CSS و JS هستند.

تفاوت بین nginx و nginx:alpine چیست؟

نسخه‌ی nginx:alpine یک image سبک‌تر از NGINX است که بر پایه Alpine Linux ساخته شده و حجم کمتری دارد. این نسخه برای استفاده در محیط production توصیه می‌شود.

چگونه می‌ توان فایل‌ های استاتیک را cache کرد؟

با ساخت یک فایل پیکربندی سفارشی NGINX و استفاده از دستوراتی مانند expires یا cache-control در آن، می‌توانید زمان انقضای کش فایل‌های JS , CSS و ایمیج را مشخص کنید. این کار باعث بهبود عملکرد برنامه می‌شود.

چگونه Consul را با استفاده از Docker پیکربندی کنیم!
پیکربندی با استفاده از Docker

جمع بندی

در این آموزش با مراحل کامل ساخت و اجرای یک برنامه React در محیط Docker آشنا شده‌ایم. با استفاده از NGINX به‌عنوان وب‌سرور و Docker برای ایزوله‌سازی محیط، می‌توان برنامه‌های Front-end را به‌صورت حرفه‌ای و در حالت production اجرا و توزیع کرد.

به اشتراک بگذارید