ساخت یک اپ 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 شدن مواجه شدیم، میتوانیم با افزایش میزان مصرف حافظه رم در کانتینر خود، این خطا را رفع کنیم. مقدار حافظه رم در دارکوب هنگام بیلد اپ 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 در هر اپ، میتوانیم از لیست ایجاد شده استفاده کنیم.