به‌عنوان توسعه‌دهندگان React، همه ما با استقرار برنامه‌های خود در محیط‌های مختلف یا راه‌اندازی آنها بر روی دستگاه‌های مختلف، دردسر را پشت سر گذاشته‌ایم که در واقع اصلاً سرگرم کننده نیست. Docker به ما کمک می کند تا برنامه های React خود را با تمام بسته ها و وابستگی هایی که برای اجرای آسان برنامه بر روی سرورهای مختلف مورد نیاز است، محفظه بندی کنیم. در این مقاله، ما در مورد فرآیند گام به گام کانتینری کردن برنامه های React با استفاده از Docker برای استقرار آسان تر و سریع صحبت خواهیم کرد.
داکر چیست؟
این پست وبلاگ یک راهنمای کامل Docker نیست، بنابراین من خیلی عمیق به این موضوع نمی پردازم. اما فقط برای دریافت جزییات، Docker یک ابزار کانتینری‌سازی است که برنامه شما را به همراه تمام وابستگی‌های آن در کانتینرهایی بسته‌بندی می‌کند که به ارسال، آزمایش و استقرار سریعتر کمک می‌کند.
هنگامی که یک تصویر داکر ایجاد می کنید، بخشی از هسته دستگاه شما را به اشتراک می گذارد و یک محیط مستقل و ایزوله برای اجرای برنامه در اختیار شما قرار می دهد.
مزایای استفاده از Docker با برنامه React
استفاده از Docker با برنامه‌های React می‌تواند از بسیاری جهات مفید باشد که تعدادی از آنها عبارتند از:
-
محیط سازگار: Docker به ایجاد یک محیط سازگار برای اجرای برنامه شما صرف نظر از سیستم عاملی که در دستگاه میزبان خود استفاده می کنید کمک می کند. این می تواند به جلوگیری از بسیاری از مشکلات اساسی که ممکن است به دلیل ناسازگاری بین محیط هایی که در آن برنامه خود را اجرا می کنید، رخ دهد، کمک کند.
-
دسته بندی وابستگی ها با هم: Docker به جمع‌آوری تمام وابستگی‌هایی که برای اجرای برنامه با هم نیاز دارند کمک می‌کند تا از احتمال درگیری یا نسخه‌سازی مسائل مرتبط جلوگیری شود.
-
استقرار سریعتر: Docker می تواند به طور قابل توجهی فرآیند استقرار را ساده کند، اما برنامه را در یک کانتینر می سازد که به راحتی می تواند در محیط های مختلف مستقر شود. علاوه بر این، Docker دارای یک مکانیسم کش بسیار قدرتمند است که روند استقرار را سریعتر می کند.
راه اندازی Docker برای برنامه React
اکنون که متقاعد شده‌اید که Docker می‌تواند ابزار مفیدی در هنگام کار با برنامه‌های React باشد، بیایید ببینیم چگونه میتوانیم آن را همراه با یک برنامه React تنظیم کنیم.
برای شروع به یک برنامه React نیاز داریم. ما می توانیم از یک برنامه موجود استفاده کنیم یا یک برنامه جدید ایجاد کنیم.
راه اندازی Dockerfile
هنگامی که یک برنامه React را راه اندازی کردیم، گام بعدی ایجاد یک برنامه است Dockerfile در ریشه پروژه
🗒 توجه : نام فایل باید باشد
Dockerfile(بدون پسوند).
Dockerfile یک سند متنی است که تمام دستورالعمل های مورد نیاز برای ساخت یک تصویر را دارد.
هر Dockerfile باید با شروع شود FROM دستورالعمل، که یک تصویر پایه را مشخص می کند که می تواند برای ساخت تصویر بعدی استفاده شود.
FROM node:alpine
در مورد ما، ما استفاده می کنیم node:alpine به عنوان تصویر پایه ما که یک نسخه بسیار سبک تر از گره است و دانلود و استقرار را بسیار سریعتر می کند.
بیایید اکنون همه فایل‌ها را از برنامه React خود در تصویر Docker با استفاده از آن کپی کنیم COPY دستورالعمل
دستورالعمل COPY تمام فایل ها و دایرکتوری ها را از مسیر مبدا تا مسیر مقصد در داخل تصویر ما کپی می کند.
FROM node:alpine
COPY . .
با استفاده از دستورالعمل فوق، ما تمام فایل ها را از ریشه برنامه خود به تصویر خود کپی کردیم.
اکنون که همه فایل ها و دایرکتوری ها کپی شده اند، اکنون می توانیم اجرا کنیم npm install داخل تصویر ما برای نصب تمام وابستگی های مورد نیاز برای برنامه ما. برای این کار می توانیم استفاده کنیم RUN دستورالعملی که برای اجرای دستورات در داخل کانتینر استفاده می شود.
FROM node:alpine
COPY . .
RUN npm install
اکنون تمام وابستگی‌های مورد نیاز در کانتینر ما نصب می‌شود و اکنون باید همه چیزهایی را که برای راه‌اندازی برنامه React خود نیاز داریم داشته باشیم.
ما می توانیم برنامه خود را با استفاده از CMD دستورالعملی که برای اختصاص فایل های اجرایی پیش فرض به کانتینر استفاده می شود که با اجرای تصویر اجرا می شود.
FROM node:alpine
COPY . .
RUN npm install
CMD ["npm", "start"]
استفاده می کنیم ["npm", "start"] به عنوان دستور پیش فرض ما که برای چرخش سرور React ما استفاده می شود.
اکنون زمان آن است که تصویر خود را بسازیم، می توانیم اجرا کنیم docker build . دستور از ترمینال ما برای ساخت تصویر.
docker build .
هنگامی که تصویر با موفقیت ساخته شد، یک شناسه تصویر را برمی گرداند که می تواند برای اجرای تصویر استفاده شود.
برچسب گذاری یک تصویر در داکر
استفاده از شناسه تصویر برای اجرای تصویر ممکن است راحت‌ترین کار نباشد، برای جلوگیری از آن داکر راهی برای تگ کردن تصاویر ما به یک نام خاص و سپس اجرای تصاویر با استفاده از آن نام به جای استفاده از شناسه تصویر دارد.
docker build -t react-docker .
ما میتوانیم استفاده کنیم -t با دستور ساخت docker پرچم گذاری کنید تا یک تصویر را به یک نام خاص برچسب گذاری کنید، در مورد ما از ” استفاده می کنم react-docker” برای نام تصویر ما، اما می توانیم از هر نام دیگری که می خواهیم استفاده کنیم.
اجرای تصاویر در داکر
هنگامی که تصویر با موفقیت به یک نام خاص برچسب گذاری شد، می توانیم تصویر را با استفاده از آن اجرا کنیم docker run فرمان
docker run react-docker
این دستور دستور پیش فرضی که به آن داده ایم را اجرا می کند CMD دستورالعمل در Dockerfile ما. در مورد ما، آن فرمان بود npm start که سرور React را راه اندازی می کند.
هنگامی که تصویر شروع به اجرا کرد، باید پیام مشابه زیر را در ترمینال خود مشاهده کنیم:
این به ما می گوید که برنامه ما با موفقیت اجرا می شود localhost:3000.
نقشه برداری پورت در داکر
پس از اجرای docker run دستور نشان داده شده در بالا، اگر سعی کنید از آن بازدید کنید localhost:3000 متوجه یک چیز بسیار عجیب خواهید شد مشاهده خواهید کرد که هیچ چیزی در لوکال هاست نمایش داده نمی شود، حتی اگر پیام بالا می گوید که برنامه ما در حال اجرا است.
این به این دلیل است که وقتی دستور پیش‌فرض را اجرا می‌کنیم، سرور را در داخل ظرف ما راه‌اندازی می‌کند و ما سعی می‌کنیم به آن سرور در دستگاه میزبان خود دسترسی پیدا کنیم، اما هیچ ارتباط واقعی بین این دو محیط مختلف وجود ندارد.
برای حل این مشکل داکر تکنیکی به نام ” نقشه برداری پورت“، همچنین به عنوان ” پورت حمل و نقل” که برای صادرات پورت کانتینرهای Docker در دستگاه میزبان ما استفاده می‌شود و امکان دسترسی به سرویس‌هایی که در داخل کانتینرهای ما از خود دستگاه میزبان ما در حال اجرا هستند را می‌دهد.
ساده ترین راه برای نگاشت پورت ها در داکر استفاده از آن است -p پرچم همراه با دستور اجرای docker.
docker run -p 3000:3000 react-docker
این همه سرویس‌های در حال اجرا در پورت 3000 روی کانتینر ما را در معرض دستگاه میزبان ما قرار می‌دهد.
اگر سعی کنیم بازدید کنیم localhost:3000 اکنون در مرورگر ما، باید برنامه ما با موفقیت اجرا شود.
رفع چند مشکل با تنظیمات فعلی
تا اینجای کار خیلی خوبه! برنامه ما به درستی اجرا می‌شود و به نظر می‌رسد همه چیز خوب کار می‌کند، اما اجازه دهید به شما بگویم، چند مشکل در پیکربندی فعلی وجود دارد که نیاز به توجه ما دارد.
اولین چیز این است که ما در حال کپی کردن همه فایل ها و دایرکتوری ها از برنامه React خود در ریشه کانتینر خود هستیم که معمولاً عمل خوبی نیست.
توصیه می‌شود برای نگهداری بهتر و جلوگیری از تداخل با فایل‌های پیش‌فرض، همه فایل‌های خود را در یک فهرست کار در کانتینر سازماندهی کنید. برای این کار می توانیم استفاده کنیم WORKDIR دستورالعمل ایجاد یک دایرکتوری کاری در داخل کانتینر ما و تمام دستورالعمل های بعدی فقط در دایرکتوری کاری اجرا می شود.
FROM node:alpine
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "start"]
اکنون یک دایرکتوری کاری به نام ایجاد می شود app داخل کانتینر و تمام دستورالعمل های بعد از آن در همان دایرکتوری کاری اجرا می شود.
مشکل بزرگ دیگر با تنظیمات فعلی این است که هر زمان که ما تغییری در هر یک از فایل‌ها ایجاد می‌کنیم و تصویر خود را بازسازی می‌کنیم، همه دستورالعمل‌ها دوباره اجرا می‌شوند. npm install فرمان
تا آنجا که ما یک برنامه کوچک با چند وابستگی داریم اما با رشد پروژه و اضافه کردن چندین وابستگی در حال اجرا، این خوب است. npm install بعد از هر تغییر می تواند بسیار زمان بر باشد و چیزی نیست که ما بخواهیم.
Docker مکانیزم کش بسیار مفیدی دارد که هر لایه از تصویر را هنگام اجرای تصویر کش می‌کند و در طول ساخت بعدی، کش را بررسی می‌کند تا ببیند آیا نسخه کش دارد یا نه و به جای ساخت مجدد تصویر از آن استفاده می‌کند.
برای استفاده از این مکانیسم کش، مهم است که پیکربندی Docker خود را به گونه‌ای ساختار دهیم که دستورالعمل‌هایی که اغلب در حال تغییر هستند در انتهای فایل قرار گیرند.
در مورد ما، ما می خواهیم اجرا کنیم npm install فقط زمانی که تغییراتی در آن ایجاد کرده باشیم package.json.
FROM node:alpine
WORKDIR /app
COPY ./package.json /app/package.json
RUN npm install
COPY . .
RUN npm install
CMD ["npm", "start"]
این اکنون فقط اجرا خواهد شد npm install فقط زمانی که تغییری در آن وجود داشته باشد package.json فایل در غیر این صورت از نسخه کش استفاده می کند و فقط دستورالعمل های تغییر یافته را دوباره اجرا می کند.
نتیجه
در این مقاله، نحوه کانتینریزه کردن برنامه های React را با استفاده از Docker و برخی از پیکربندی های توصیه شده برای سرعت بخشیدن به فرآیند ساخت، یاد گرفتیم.
به طور کلی، ما میتوانیم از Docker با برنامه React خود برای اطمینان از ساخت منسجم در محیط‌های مختلف استفاده کنیم که منجر به استقرار و آزمایش سریعتر برنامه ما می‌شود.
این برای این مقاله است، امیدوارم که آن را دوست داشته باشید. لطفاً نظرات خود را در نظرات اضافه کنید.
اگر این مقاله را دوست داشتید، احتمال زیادی وجود دارد که توییت های من را نیز دوست داشته باشید. لطفا من را بررسی کنید توییتر محتوای بیشتری در مورد توسعه وب، جاوا اسکریپت، React و بسیاری موارد دیگر در نظر بگیرید.
