بسته بندی (Containerize کردن) پروژه‌های خود با Docker، تجربه توسعه را ساده کرده و استقرار ساده در محیط‌های ابری را تسهیل می‌نماید. در این آموزش، مشاهده خواهید کرد که چگونه می‌توانید یک سایت React را به صورت یک کانتینر Docker بسته بندی کنید.

این مقاله بر روی پروژه‌هایی تمرکز دارد که با استفاده از Create-React-app (CRA) راه اندازی شده‌اند. اگر پیکربندی CRA خود را حذف کرده‌اید یا از یک فرآیند ساخت سفارشی استفاده می‌نمایید، باید npm run build را بر اساس آن تنظیم کنید.

Imageهای داکر از طریق یک Dockerfile ایجاد می‌شوند. این فایل، یک image پایه مورد استفاده، مانند وب سرور آپاچی را تعریف می‌کند. با استفاده از آن شما می‌توانید مجموعه‌ای از دستورات را به منظور اضافه کردن بسته‌ها فهرست کنید. پس از آن تغییرات پیکربندی را اعمال کرده و در فایل‌های مورد نیاز برنامه خود کپی نمایید.

 

این مطلب نیز ممکن است برای شما مفید باشد: مزیت استفاده از Multi Stage Build در داکر

 

تعریف نیازهای ما

CRA شامل یک سیستم ساخت و بارگذاری زنده است که از طریق npm run start به آن دسترسی خواهید داشت. این دستور به شما امکان می‌دهد تا در طول توسعه با سرعت در سایت خود فرآیند را تکرار کنید.

هنگام رفتن به سمت تولید، شما باید منابع استاتیک خود را با استفاده از دستور npm run build کامپایل نمایید. این دستور، بسته‌های HTML، CSS و جاوا اسکریپت را در دایرکتوری build شما تولید می‌کند. این فایل‌ها همان چیزی است که شما در وب سرور خود آپلود می‌کنید.

یک رویکرد اساسی برای Dockerize کردن می‌تواند استفاده از دستور npm run build به صورت محلی باشد. سپس شما باید محتویات دایرکتوری build را در image داکر خود (با استفاده از یک image پایه وب سرور) کپی کرده و آن را فراخوانی نمایید.

این رویکرد به‌خوبی مقیاس‌پذیر نیست، به‌ویژه هنگامی‌که image داکر خود را در یک محیط CI می‌سازید. در چنین حالتی، فرآیند ساخت برنامه شما به طور کامل در ساخت کانتینر کپسوله نشده است؛ زیرا به دستور npm run biuld خارجی بستگی دارد.

در ادامه، با یک مثال تمام فرآیند در داکر شرح داده شده است.

 

یک Dockerfile برای CRA

FROM node:latest AS build
WORKDIR /build

COPY package.json package.json
COPY package-lock.json package-lock.json
RUN npm ci

COPY public/ public
COPY src/ src
RUN npm run build

FROM httpd:alpine
WORKDIR /var/www/html
COPY --from=build /build/build/ .

این Dockerfile همه موارد مورد نیاز برای بسته بندی کامل پروژه را در خود جای داده است. در این فایل، از ساخت‌های چند مرحله‌ای Docker استفاده شده است تا ابتدا React build را اجرا کرده و سپس خروجی را در یک کانتینر سرور آپاچی alpine کپی نماید. این تضمین می‌کند که image نهایی تا حد امکان حجم کمی داشته باشد. برای اطلاعات بیشتر می‌توانید این مقاله را مطالعه کنید: مزیت استفاده از Multi Stage Build در داکر

 

بخش اول فایل، مرحله ساخت را تعریف می‌کند. در اینجا، از image اصلی Node.js استفاده می‌شود. فایل‌های package.json و package-lock.json در آن کپی می‌شوند. سپس npm ci برای نصب بسته‌های npm پروژه استفاده می‌شود. ci به جای install استفاده می‌شود؛ زیرا یک مطابقت دقیق با محتویات package-lock.json را فراهم می‌کند.

پس از نصب وابستگی‌ها، دایرکتوری‌های public و src در کانتینر کپی می‌شوند. پوشه‌ها پس از دستور npm ci کپی می‌شوند؛ زیرا احتمالاً بیشتر از وابستگی‌ها تغییر می‌نمایند. این تضمین می‌کند که ساخت image‌ می‌تواند از ذخیره لایه Docker به طور کامل استفاده کند. دقت کنید که دستور npm ci ( که بالقوه هزینه بر است) اجرا نمی‌شود؛ مگر اینکه فایل‌های package.json یا package-lock.json تغییر نمایند.

آخرین بخش در این مرحله ساخت، دستور npm run build است. با این کار، CRA برنامه React ما را کامپایل کرده و خروجی آن را در دایرکتوری build قرار می‌دهد.

مرحله دوم در Dockerfile بسیار ساده‌تر است؛ چراکه image پایه httpd:alpine انتخاب شده است. به عبارت دیگر، شامل وب سرور آپاچی در یک imageای است که حدود 5 مگابایت حجم دارد. در آخر، HTML، CSS و جاوا اسکریپت کامپایل شده از کانتینر مرحله ساخت در image نهایی کپی می‌شود.

 

این مطلب نیز ممکن است برای شما مفید باشد: ایجاد و اجرای Docker Image با استفاده از Dockerfile

 

استفاده از image داکر

از دستور docker build برای ساخت image خود استفاده کنید:

docker build -t my-react-app:latest .

این دستور image را ساخته و آن را به عنوان my-react-app:latest برچسب گذاری می‌نماید. پس از آن، از Dockerfile موجود در دایرکتوری کنونی شما (که با کاراکتر “.” مشخص می‌شود) استفاده می‌کند.

ساخت image ممکن است چند دقیقه طول بکشد تا بطور کامل انجام شود. البته ساخت‌های بعدی سریع‌تر خواهند بود؛ زیرا لایه‌هایی مانند دستور npm ci بین اجراها ذخیره می‌شوند.

هنگامی‌که image شما ساخته شد، می‌توانید از آن استفاده کنید:

docker run -d -p 8080:80 my-react-app:latest

Docker با استفاده از image با نام my-react-app:latest یک کانتینر جدید ایجاد می‌کند. پورت 8080 در میزبان (ماشین شما) به پورت 80 داخل کانتینر متصل است. این بدان معنی است که شما می‌توانید برای مشاهده پروژه React خود آدرس  http://localhost:8080 را در مرورگر خود باز کنید! با توجه به اینکه در دستور بالا پرچم -d وجود دارد؛ بنابراین کانتینر در پس‌زمینه اجرا می‌شود.

 

تغییر وب سرور به NGINX

اگرچه مثال بالا از Apache استفاده می‌کند؛ اما شما می‌توانید به‌راحتی به NGINX بروید.

FROM nginx:alpine
COPY --from=build /build/build/ /usr/share/nginx/html

شما می‌توانید وب سرورهای جایگزین را به روشی مشابه اتخاذ کنید. از آنجایی که CRA خروجی کاملا ایستا تولید می‌کند، انعطاف پذیری زیادی در انتخاب نحوه میزبانی سایت خود دارید. بدین منظور کافیست محتویات دایرکتوری /build/build را از مرحله build در دایرکتوری HTML پیش فرض نرم افزار سرور انتخابی خود کپی نمایید.

 

مزایای این رویکرد

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

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

با استفاده از ساخت‌های چند مرحله‌ای، image نهایی ساده باقی می‌ماند و شما باید تنها چند مگابایت حافظه داشته باشد. image نود (node) بسیار بزرگ‌تر تنها در طول مرحله کامپایل استفاده می‌شود که در آن Node و npm ضروری هستند.

 

 

 

منبع:

cloudsavvyit