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


۱۲ اسفند ۱۳۹۹
آموزش راه‌اندازی برنامه 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

خدمات رایگان لیارا

۲.۵ گیگابایت فضای ذخیره‌سازی ابری رایگان

۲.۵ گیگابایت Object Storage سازگار با پروتکل S3 با دیسک‌های SSD به‌صورت رایگان دریافت کنید.

هاست رایگان برای دیتابیس‌

دیتابیس‌های MariaDB، PostgreSQL و Redis را فقط با یک کلیک و به‌صورت رایگان تهیه کنید.

سرویس DNS رایگان

به سادگی دامنه‌تان را اضافه کنید و به صورت رایگان رکورد‌های آن را مدیریت کنید.

۱۰۰ هزار تومان اعتبار اولیه

بعد از ثبت نام در لیارا مبلغ ۱۰۰ هزار تومان اعتبار هدیه دریافت می‌کنید که با توجه به ساعتی بودن هزینه سرویس‌ها، می‌توانید تمامی خدمات پولی را برای چندین هفته رایگان استفاده کنید.

ارسال ۱۰۰ ایمیل تراکنشی رایگان در هر ماه

در سرویس ایمیل لیارا شما می‌توانید تا ۱۰۰ ایمیل رایگان در هر ماه ارسال کنید و فقط برای بیش از آن هزینه پرداخت کنید. (به‌همراه دسترسی SMTP)

هاست رایگان برای انواع وبسایت

تفاوتی ندارد برای وبسایت خود از Node استفاده می‌کنید یا Laravel و Django، در لیارا می‌توانید به صورت کاملا رایگان آن را میزبانی کنید.

توسعه‌دهندگان درباره‌ی ما چه می‌گویند

تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...

MohammadReza
liara testimonial
keikaavousi

بعد از بسته شدن @fandoghpaas و ناراحتی همه‌مون از اینکه یه سرویس خوب و صادق نمی‌تونه از پس هزینه‌ها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوت‌هایی داشت که کمی کار می‌خواست ولی تا الان کاملا راضی.

jadi
liara testimonial
jadi

یه خسته نباشید باید به تصمیمliara_cloud@بگم،
بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
دمتون گرم.

Arch
liara testimonial
EbadiDev

واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیت‌های سرویس دیتابیس‌شون اینه که خودشون به صورت دوره‌ای بکآپ میگیرن.
...

Ali Najafi
liara testimonial
me_ali_najafi

یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@

Navid
liara testimonial
1navid

عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم

Amir H Shekari
liara testimonial
vanenshi