چجوری یک پروژه React رو با Docker روی سرور مستقر کنیم

تو این مقاله قراره یه پروژه ساده React رو با استفاده از Docker روی سرور مستقر کنیم و به اصطلاح Dockerize کنیم.

اول از همه از مزایای این کار بگم خدمتتون که اگه بطور مثال چند تا پروژه جاوا اسکریپتی داشتید که هر کدوم نیاز به ورژن‌های مختلفی از Nodejs داشته باشه، بدون داکر شما خیلی اذیت میشی. چون باید چیزی مثل NVM روی سرورتون داشته باشید که برای هر کدوم از پروژه‌هاتون سوییچ شید بین ورژن‌های مختلف nodejs و بعد شروع به نصب پکیج های اون پروژه کنید. اما به لطف Docker هم سرورتون تر تمیز می‌مونه هم ازین دردسرها رها میشید. حالا در ادامه میریم که یه پروژه ساده رو بسازیم و Dockerize کنیمش.

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

خب اول میایم یه پروژه رو init می‌کنیم با استفاده از دستور زیر:

npx create-next-app
# or
yarn create next-app

حالا فرض میکنیم شما پروژه تون رو توسعه دادید و کارتون تموم شده و حالا میخواید بزارید روی سرور. معمولا هر پروژه‌ای یه دستور برای Build کردن پروژه داره. من فایل package.json این پروژه رو اینجا میزارم تا همه باهم ببینیم که چطوری میشه متوجه شد دستوری که باید برای build پروژمون بزنیم چیه؟

{
  &quotname&quot: &quottest&quot,
  &quotversion&quot: &quot0.1.0&quot,
  &quotprivate&quot: true,
  &quotscripts&quot: {
    &quotdev&quot: &quotnext dev&quot,
    &quotbuild&quot: &quotnext build && next export&quot,
    &quotstart&quot: &quotnext start&quot
},
&quotdependencies&quot: {
  &quotnext&quot: &quot10.0.4&quot,
  &quotreact&quot: &quot17.0.1&quot,
  &quotreact-dom&quot: &quot17.0.1&quot
}

همونطور که می‌بینید ما یه Script برای Build داریم توی package.json و وقتی با استفاده از دستور:

npm run build

پروژه رو Build میکنیم در نهایت یه Directory برامون می‌سازه به اسم out که ما قراره محتوایتش رو کپی کنیم جایی که Nginx برامون Serve کنه.

خب کارمون با پروژه‌مون تمومه تقریبا و حالا بریم سراغ Dockerize کردن این پروژه.

اول از همه میایم یه فایل Dockerfile توی root پروژه‌مون می‌سازیم و دستورهای زیر و توش قرار میدیم:

# Stage 0 - build react app
From node:12 as build-stage

WORKDIR /app
COPY ./ /app/
RUN npm install
RUN npm run build

# Stage 1 - serve build app with Nginx
From nginx:1.15
COPY --from=build-stage /app/out/ /usr/share/nginx/html
COPY --from=build-stage /app/nginx.conf /etc/nginx/conf.d/default.conf

یه فایل nginx.conf هم توی همون root درست کنید و این کد‌ها رو توش قرار بدید:

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri /index.html =404;
  }
  include /etc/nginx/extra-conf.d/*.conf;
}

خب حالا بپردازیم به محتوایت این فایل‌ها و خط به خط توضیحش بدیم و ببینیم که قراره چی کار کنه برامون. اول از همه با Dockerfile شروع می‌کنیم.

اول از همه اومدیم ۲ تا Stage تعریف کردیم که توی Stage اول میایم با استفاده از image عه Nodejs پکیج های پروژه‌ مون رو نصب میکنیم و توی Stage دوم با استفاده از image عه Nginx میگیم پروژمون رو Serve کن.

توی خط ۴ عه Dockerfile میایم یه Directory به اسم app درست می‌کنیم که قراره محتوایت پروژه رو توی اون ریخته بشه.

توی خط ۵ محتویات کل پروژه رو میریزیم توی Directory عه app که بالا تعریف کردیم

توی خط ۶ میایم پکیج های پروژه رو نصب میکنیم

توی خط ۷ هم که پروژه رو Build می‌کنیم

حالا بریم سراغ stage عه بعدی و ببینیم که Nginx چجوری قراره پروژه مارو Serve کنه

توی خط ۱۱ میایم از Stage قبلی محتویات Directory عه out رو کپی می‌کنیم جایی که Nginx فایل‌هاش رو Serve میکنه

توی خط ۱۲ هم اون فایل nginx.conf که توی root پروژه گذاشتید رو کپی میکنه توی Directory عه Config های Nginx که در واقع Nginx بیاد با استفاده از این Config پروژه مارو Serve کنه

حالا بیایم باهم یه نگاهی به محتویات فایل nginx.conf بندازیم.

اینجا ما به Nginx میگیم پورت ۸۰ که پورت http هست اگه آدرس ما آدرس اصلی سایت بود، به طور مثال آدرس http://abcd.com بود بیا از مسیری که توی خط ۴ تعریف کردیم فایل های html رو بخون و تحویل مرورگر مخاطب بده.

حالا ما فرض می‌کنیم که این پروژه رو روی گیت بردیم و روی سرور Clone کردیم و میخوایم ًRun کنیم. اولین دستوری که می‌زنیم برای اینکه Docker بیاد image عه پروژه مارو بسازه اینه:

docker build -t <TAG_NAME> .

docker build -t react-front .

جای اون TAG_NAME شما اسم image ای که در نهایت داکر قراره براتون بسازه رو بزارید و من اینجا اسم react-front رو انتخاب کردم براش. به اون نقطه آخر هم توجه کنید که داکر اشاره به directory ای که توش قرار داره میکنه و قراره اونو Dockerize کنه.

بعد از زدن این دستور داکر میاد دنبال Dockerfile توی root این پروژه میگرده که خب خوشبختانه ما داریمش و داکر مرحله به مرحله دستورات رو اجرا می‌کنه و در نهایت از پروژه ما یه image به اسم react-front می‌سازه.

خب حالا چجوری این پروژه رو Run کنیم؟ با استفاده از دستور زیر:

docker run --name react-project -p 80:80 -d react-front

با name-- ما به این Container اسم میدیم

با p- میگیم روی چه پورتی بیاد بالا

با d- ما میگیم توی Background اجرا بشه. (اصطلاحا بهش میگن detach mode)

و در نهایت Container پروژه مارو با image عه react-front ای که بالا ساختیمش، اجرا میکنه.

اگه بخوایم تو قالب یه عکس ببینیم چه اتفاقی داره می‌افته یه همچین چیزی میشه

حالا شما کافیه ip سرورتون رو توی مرورگر بزنید و ببینید که پروژه React عتون Serve شده.

خیلی ممنون که تا انتهای این مقاله با من همراه بودید. امیدوارم این مقاله براتون مفید بوده باشه. خوشحال میشم نظرتون درباره این مقاله رو بدونم. اگه سوالی براتون پیش اومد یا قسمتی از مقاله رو خدایی نکرده متوجه نشدید حتما باهام درمیون بزارید.