Skip to main content

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

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

ساخت یک اپ React JS#

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

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

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

cd darkube-react-app
yarn start

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

اپ ساخته شده توسط React JS

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

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

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

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

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

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

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

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

انتخاب ریپو گیت مورد نظر

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

انتخاب برنچ و سایر تنظیمات ریپو در دارکوب

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

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

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

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

انتخاب پلن میزان حافظه و پردازنده

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

تکمیل اطلاعات اپ در دارکوب

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

انتخاب زیردامنه اپ ساخته شده در دارکوب

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

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

در انتظار برای ساخته شدن اپ React JS در دارکوب

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

لاگ اپ در حال بیلد در دارکوب

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

مشاهده اپ ساخته شده در مرورگر

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

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

  مقدار ورودی

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

استفاده از Build Arguments#

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

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

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

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

وارد کردن مقدار --max-old-space-size از بخش آرگومان‌های بیلد

مرحله دوم: در داکرفایل خود، متغیر 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

وارد کردن مقدار --max-old-space-size از بخش متغیرهای محیطی

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

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

تنظیم --max-old-space-size از بخش متغیرهای مشترک در دارکوب
تنظیم max-old-space-size از بخش متغیرهای مشترک در دارکوب

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

وارد کردن مقدار --max-old-space-size در بخش متغیرهای مشترک
وارد کردن مقدار --max-old-space-size در بخش متغیرهای مشترک

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

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