Skip to main content

ساخت یک اپ React Js در دارکوب

در بستر استقرار ابری دارکوب، می‌توانید اپ‌ها و دیتابیس‌های گوناگون را ساخته و به راحتی از آن‌ها استفاده کنید. در این مستند، نحوه ساخت یک اپ React JS آموزش داده خواهد شد.

ساخت یک اپ React JS

ابتدا با وارد کردن دستور زیر در خط فرمان، اپ جدید خود را می‌سازیم. در این‌جا نام اپ را darkube-react-app قرار می‌دهیم.

yarn create react-app darkube-react-app

با استفاده از این دستور، تمام Dependency‌های مربوط به یک اپ بر پایه React ساخته خواهد شد.

حال می‌توانیم به پوشه مربوط به اپ خود جابجا شده و آن را اجرا کنیم.

cd darkube-react-app
yarn start

پس از اتمام فرایند کامپایل، اپ ما از آدرس http://localhost:3000 در دسترس خواهد بود.

تا این مرحله، از اجرای اپ خود به صورت صحیح مطمئن شدیم. در مرحله بعد می‌توانیم اپ را در یک ریپو گیت پوش کنیم.

ساخت داکرفایل

برای ساخت اپ‌هایی بر پایه ریپو گیت در دارکوب، لازم است ریپوی ما یک داکرفایل داشته باشد. محتوای داکرفایل می‌تواند شبیه به کد زیر باشد:

FROM node:latest as build
WORKDIR /app
COPY package.json .
RUN yarn install
COPY . .
RUN yarn run build
FROM nginx
COPY --from=build /app/build /usr/share/nginx/html

در خط اول از آخرین نسخه یک ایمیج node استفاده کرده و آن را build نام‌گذاری می‌کنیم.

در خط دوم، محل root اپ را پوشه /app قرار می‌دهیم.

با دستور خط سوم، فایل package.json را در کانتینر خود کپی می‌کنیم.

در خط چهارم dependencyهای تعریف شده در فایل package.json را با این دستور در کانتینر نصب می‌کنیم: RUN yarn install

سپس در خط پنجم، تمامی فایل‌های اپ را درون کانتینر کپی می‌کنیم.

با این دستور عملیات build فایل‌های اپ را در کانتینر انجام می‌دهیم: RUN yarn run build

سپس ایمیج بیلد‌شده‌ی خود را در یک وب‌سرور nginx اجرا می‌کنیم.

پوش کردن اپ در ریپوی‌ گیت

برای دیپلوی اپ، دارکوب Source اپ ما را از یک ریپو در هم‌گیت و یا گیت‌هاب دریافت می‌کند. در این مرحله اپ را روی یک ریپوی هم‌گیت، پوش می‌کنیم. برای دریافت اطلاعات بیشتر می‌توانید به صفحه هم‌گیت؛ سرویس گیت مدیریت‌شده بر پایه گیت‌لب مراجعه کنید.

برای این کار، به حساب کاربری هم‌گیت خود وارد می‌شویم و در صورت نداشتن حساب کاربری، ثبت نام می‌کنیم. سپس یک Private Repository می‌سازیم و در بخش Project URL، نام سازمان خود را انتخاب می‌کنیم.

حال با استفاده از دستورات زیر، می‌توانیم اپ خود را در ریپو هم‌گیت پوش کنیم:

git init
git remote add origin <repo_url>
git add .
git commit -m "Initial commit"
git push origin master

ساخت اپ در دارکوب

در هنگام ساخت اپ، نوع اپ خود را "منبع گیت" انتخاب می‌کنیم.

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

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

در بخش بعدی و قسمت اطلاعات عمومی اپ، فیلدهای نام اپ و پورت از ما دریافت می‌شود. در صورتی که پورت مشخصی برای اپ خود تنظیم نکرده باشیم، از آنجایی که اپ ما توسط یک nginx بالا می‌آید، مقدار "80" را برای فیلد پورت سرویس وارد می‌کنیم.

در بخش آدرس دامنه، می‌توانید تنظیماتی نظیر ساخت گواهی SSL، HTTPS Redirect، آدرس زیردامنه قابل دسترسی از فضای وب و Host Address را مشخص نمایید. اپ ما روی زیردامنه‌ای که تعیین می‌کنیم و روی دامنه darkube.app قابل دسترسی خواهد بود. در اینجا darkube-react-app.darkube.app را به عنوان مسیری که می‌خواهیم اپ ما روی آن اجرا شود، انتخاب می کنیم.

در صورت نیاز به اعمال تنظیمات بیشتر، می‌توانید از سایر بخش‌های تکمیلی برای اطلاعات اپ نظیر متغیرهای محیطی (Environment Variables)، پورت‌ها و ... استفاده نمایید.

پس از فشردن دکمه ذخیره تغییرات، بعد از مدت زمانی کوتاه (معمولا چند ثانیه) اپ شما به راحتی ساخته و build خواهد شد.

در این مرحله پلن مدنظر خود برای ساخت اپ، namespace و دیتاسنتر را انتخاب می‌کنیم.

 نحوه محاسبه هزینه ساخت اپ

نکته قابل توجه در تمامی اپ‌های ساخته شده در دارکوب، محاسبه هزینه اپ‌ها به صورت ساعتی است و در زمان‌هایی که اپ خود را خاموش کرده باشیم، هزینه‌ای محاسبه نخواهد شد.

هزینه دیسک فعال‌شده به صورت جداگانه و فارغ از خاموش یا روشن بودنِ اپ، محاسبه خواهد شد.

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

در این‌جا اپ ساخته شده از طریق آدرس darkube-react-app.darkube.app قابل مشاهده است.

تنظیم مقدار حافظه مصرفی RAM

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

  مقدار ورودی

مقدار ورودی این متغیر باید بر اساس مگابایت باشد.

استفاده از Build Arguments

برای تغییر حافظه رم مصرفی در هنگام بیلد شدن اپ، می‌توانیم از این امکان به عنوان یک آرگومانِ بیلد استفاده کنیم.

خطای Kill شدن هنگام بیلد یک کانتینر

در صورتی که هنگام بیلد شدن کانتینر خود با خطای Kill شدن مواجه شدیم، می‌توانیم با افزایش میزان مصرف حافظه رم در کانتینر خود، این خطا را رفع کنیم. مقدار حافظه رم در دارکوب هنگام بیلد اپ 4GB است.

مرحله اول: از بخش آرگومان‌های بیلد در دارکوب این متغیر را تنظیم می‌کنیم.

مرحله دوم: در داکرفایل خود، متغیر NODE_OPTIONS را به عنوان یک آرگومان بیلد تعریف می‌کنیم. پس از اعمال این تغییر، داکرفایل ما به شکل زیر خواهد شد:

FROM node:latest as build
ARG NODE_OPTIONS
WORKDIR /app
COPY package.json .
RUN yarn install
COPY . .
RUN yarn run build
FROM nginx
COPY --from=build /app/build /usr/share/nginx/html

استفاده از Enviornment Variables

با استفاده از بخش Enviornment Variables در دارکوب، می‌توانید از این متغیر در هنگام اجرای اپ‌های خود بهره بگیرید. مطابق تصویر زیر، می‌توان این امکان را در بخش متغیرهای محیطی تعریف کرد.

 خطایی که ممکن است برای رفع آن نیاز به تنظیم میزان استفاده رم داشته باشید

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

استفاده از متغیرهای مشترک

همچنین در صورت نیاز می‌توانید در بخش متغیرهای مشترک، لیستی از متغیرهایی که برای اپ‌های بر پایه جاوا اسکریپت را ساخته و از آن‌ها در اپ‌های خود استفاده کنید.

حال لیستی جدید از متغیرهای خود می‌سازیم.

نهایتاً در بخش Enviornment Variables در هر اپ، می‌توانیم از لیست ایجاد شده استفاده کنیم.