آموزش راهاندازی برنامه React با NGINX در Docker
۱۲ اسفند ۱۳۹۹
در این مقاله قصد داریم تا یک برنامهی React که با دستور npx create-react-app
ساخته شده است را با وب سرور NGINX بهحالت production در Docker راهاندازی کنیم بنابراین بدون فوت وقت بهسراغ پیادهسازی و راهاندازی برنامه میرویم.
ایجاد یک برنامهی جدید React
در ابتدا اطمینان حاصل کنید که Node.js بر روی سیستم شما نصب شده است. سپس یک پوشه جدید ایجاد کرده و دستور زیر را در آن مسیر اجرا کنید تا یک برنامهی React با نام react-nginx
ساخته شود:
npx create-react-app react-nginx
با استفاده از npx این اطمینان حاصل میشود که برنامهی ما با آخرین نسخهی create-react-app
ساخته میشود. پس از اجرای موفقیت آمیز دستور فوق، یک پوشهی جدید با نام react-nginx ایجاد خواهد شد که با دستور cd react-nginx
میتوانید وارد آن پوشه شوید.
پیکربندی Dockerfile و ایجاد یک Docker image
برای پیکربندی Docker بایستی دو فایل با نامهای Dockerfile
و .dockerignore
در مسیر برنامه react-nginx ایجاد کنید. سپس با اجرای دستور زیر اطمینان حاصل کنید پوشهی node_modules
در مراحل بعد دردسر ساز نشود:
echo "node_modules" > .dockerignore
حال فایل Dockerfile
را با ویرایشگر مورد علاقهی خود باز کرده و کدهای زیر را در آن قرار دهید:
# First Stage to build front-end assets
FROM node AS builder
WORKDIR /usr/src/app
COPY . .
RUN npm install && npm run-script build
# Second Stage to serve front-end assets
FROM nginx
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY --from=builder /usr/src/app/build .
EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]
FROM node AS builder
: مشخص میکنیم که از node image در Docker image نهایی بهعنوان builder برنامه استفاده میشود.WORKDIR /usr/src/app
: در این تکه کد مسیر/usr/src/app
بهعنوان working directory انتخاب میشود.COPY . .
: تمام فایلهای مسیر فعلی بهجز پوشهیnode_module
که قبلتر آن را در.dockerignore
مشخص کرده بودیم، در working directory مشخص شده کپی خواهد شد.RUN npm install && npm run-script build
: دستورهای مورد نیاز برای نصب پکیجهای موجود در فایلpackage.json
و build برنامه به حالت production با استفاده ازRUN
اجرا خواهد شد.
پس از stage اول که برنامهی نهایی ما در آن ساخته میشود به سراغ stage دوم یعنی پیادهسازی وب سرور NGINX میرویم:
FROM nginx
: در این قسمت مشخص میکنیم که image مورد استفادهی ما NGINX است.WORKDIR /usr/share/nginx/html
: حال برای این stage مسیر/usr/share/nginx/html
را بهعنوان working directory انتخاب میکنیم.RUN rm -rf ./*
: دستورrm -rf ./*
، فایلهای پیشفرض NGINX را حذف میکند.COPY --from=builder /usr/src/app/build .
: فایلهای استاتیک که در stage اول build شده است در مسیر/usr/share/nginx/html
کپی میشود.EXPOSE 80
: برای مشخص کردن پورت باز مورد نیاز برنامه از این تکه کد استفاده میشود.ENTRYPOINT ["nginx", "-g", "daemon off;"]
: در container که با استفاده از این image ساخته میشود، وب سرور NGINX بهصورت global اجرا خواهد شد.
در مرحلهی بعد بایستی با استفاده از Dockerfile
فعلی یک image با نام react-nginx
ایجاد کنید:
docker build -t react-nginx .
پس از ایجاد شدن image میتوانید با اجرای دستور زیر یک container ایجاد کرده و خروجی برنامه را در آدرس localhost:8000 مشاهده کنید:
docker run --name react-nginx-app --rm -it -p 8000:80 react-nginx
توسعهدهندگان دربارهی ما چه میگویند
تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...
MohammadReza
keikaavousi
بعد از بسته شدن @fandoghpaas و ناراحتی همهمون از اینکه یه سرویس خوب و صادق نمیتونه از پس هزینهها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوتهایی داشت که کمی کار میخواست ولی تا الان کاملا راضی.
jadi
jadi
یه خسته نباشید باید به تصمیمliara_cloud@بگم،
بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
دمتون گرم.
Arch
EbadiDev
واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیتهای سرویس دیتابیسشون اینه که خودشون به صورت دورهای بکآپ میگیرن.
...
Ali Najafi
me_ali_najafi
یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@
Navid
1navid
عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم
Amir H Shekari
vanenshi