آموزش راه اندازی reactjs و nodejs روی هاست + mongodb

در این مقاله آموزش راه اندازی پروژه نود جی اس که frond آن با ریکت (reactjs) و backend آن با نود جی اس (nodejs) نوشته شده ارایه شده است. همچنین بخش backend آن به دیتابیس مونگو دی بی متصل می شود.

ویدیو آموزش راه اندازی پروژه نود جی اس و ریکت جی اس همراه با دیتابیس مونگو در ادامه قرار داده شده است.

1- وارد شدن به سی پنل هاست

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

2- ایجاد ساب دامین برای backend

برای شروع در محیط سی پنل ابتدا باید یک ساب دامین برای backend ایجاد می کنیم.
در قسمت دامین بر روی ساب دامین کلیک می کنیم.

بعد ورود به این بخش یک ساب دامین به نام api ایجاد می کنیم و در قسمت Document Root چیزی نمی نویسم و به صورت پیش فرض باقی می گذاریم و بر روی cereat کلیک می کنیم.

3- ساختن اپلیکیشن Node.js

بعد از ساخته شدن ساب دامین در صفحه اصلی سی پنل در بخش Software بر روی Setup Node.js App کلیک می کنیم. و در صفحه بعد CREATE APPLICATION را میزنیم

در این صفحه ورژن Node.js را بر روی ورژن 8.11.3 قرار می دهیم و Application Root را هم نام فولدری که می خواهیم Root ما باشد وارد میکنیم که ما به عنوان نمونه project نامگذاری می کنیم.
در بخش Application URL ساب دامینی که ساختیم را انتخاب میکنیم.
در Application Startup file قرار است برای اولین بار بخش Node.js اجرا شود که ما برای مثال در این آموزش server/server.js را می نویسیم و بر روی CREATE کلیک می کنیم

4- آپلود کردن پروژه

بعد از ساختن اپلیکشن نوبت به آپلود کردن پروژه می رسد برای این منظور ابتدا به محیط سی پنل برمی گردیم و File Manger را انتخاب می کنیم

بعد از وارد شدن به File Manger فولدری را که ساختیم را پیدا می کنیم که برای ما project بود را انتخاب می کنیم و آپلود را میزنیم و پروژه خود را آپلود می کنیم.
نکته مهم این است که پروژه حتما باید فشرده و با پسوند zip باشد.

فایل آپلود شده را extract می کنیم و محتویات پوشه ای را که به عنوان پروژه آپلود کردیم را با کلیک بر روی select all انتخاب کرده و بر روی move کلیک کرده و به پوشه اصلی یا همان project انتقال می دهیم.

5- نصب NPM

بعد Extract فایل ها دوباره به قسمت Setup Node.js App برمیگردیم و بر روی ویرایش برنامه ای که ساختیم کلیک می کنیم.
در این قسمت برای نصب NPM دو راه داریم یا بر روی گزینه ی Run NPM Install کلیک کنیم و NPM را نصب کنیم یا از طریق محیط ssh این کار را انجام دهیم.
ما نصب از طریف محیط ssh را برای شما توضیح می دهیم.

برای نصب از طریق محیط ssh نیاز به برنامه PuTTY داریم. برنامه را باز می کنیم و دامنه یا آی پی هاست را وارد می کنیم در صورت فعال نبودن دامنه از آی پی استفاده کنید پورت را هم 1396 وارد کنیم اگر پورت اشتباه بود از پشتیبانی میزبان هاست خود می توانید پورت درست را بپرسید.
بر روی open کلیک کنید تا محیط ssh بر روی صفحه ظاهر شود.

در صفحه ظاهر شده برای login کردن نام کاربری هاست به همراه رمز عبور ( رمز عبور سی پنل ) را وارد می کنیم.
بعد از لاگین شدن با خط فرمان ls می توانید محتویات هاست را مشاهده کنید.

برای اجرا کردن خط دستورات NPM و NODE ابتدا باید به محیط سی پنل برگردیم و خط فرمان زیر را کپی کنید و در محیط SSH اجرا کنید.
بعد این دستور شما اگر در این محیط ls را بزنید مشاهده می کنید که شما را به پوشه project برده است و دستورات NPM و NODE فعال شده است.

در محیط ssh بعد از فعال شدن این دستورات شما با تایپ کردن npm -v و node -v می توانید نسخه های هر دو را مشاهده کنید و سپس با تایپ کردن npm install می توانید NPM را نصب کنید .

6- تهیه ی ‌Build از Reactjs برای بخش Front

برای تهیه Build دو راه دارید اول اینکه از سیستم خودتان می توانید build را تهیه کنید و داخل هاست آپلود کنید یا اینکه از محیط ssh دستور npm run build را بزنید در پوشه ای که ایجاد می شود محتویات آن را بعد از فشرده سازی در داخل هاست درون پوشه ی Public html آپلود کرده و سپس از حالت فشرده خارج می کنید تا بخش ظاهری سایت ایجاد شود.
اگر دامنه را در مرورگر وارد کنید مشاهده خواهید کرد بخش front ایجاد شده است.

7- کانفیگ mongodb

برای mongodb چون سی پنل آن را ساپورت نمی کند و هیچ پنل تحت وبی هم ندارد باید یک تیکت به بخش پشتیبانی بزنید و دیتابیس mongodb را دریافت کنید
برای تنظیم mongodb وارد هاست می شویم و پوشه project را باز می کنیم و وارد پوشه server می شویم و پوشه database را باز می کنیم درون پوشه فایل DB.js را انتخاب کرده و بر روی edit کلیک می کنیم.
و نوشته را به این صورت تغییر می دهیم که قبل از لوکال هاست ابتدا یوزرنیم_user:پسورد@ را وارد می کنیم و در آخر نام دیتابیس را مطابق شکل وارد می کنیم و Save Changes را می زنیم

8- ارتباط بخش Front با بخش Backend

دوباره به پوشه public html برمیگردیم وارد پوشه Static و سپس js می شویم و فایل main.js را انتخاب کرده و edit را میزنیم و localhost را سرچ می کنیم و به جای localhost و پورتی که در ادامه آن نوشته آدرس دامنه api را وارد میکنیم منظور همان ساب دامینی هست که برای backend ایجاد کردیم که 6 مورد می باشد و save را می زنیم.
الان backend به mongodb متصل شده و front هم به backend وصل شده است.

دوباره دامنه را در مرورگر وارد می کنیم و روی create کلیک کرده و در کادر name و port به ترتیب test و 22 را وارد می کنیم و index را میزنیم.

برای مطمئن شدن از اینکه data ما وارد mongodb شده است از نرم افزار robot 3t استفاده می کنیم و اطلاعات هاست و دیتا را وارد می کنیم و connect را می زنیم و طبق تصویر نشان می دهد که به mongodb متصل شده است.

همانطور که مشاهده میکنید اطلاعات وارد شده ما در بخش فرانت به دیتابیس وارد شده است.

امیدوارم مفید واقع شده باشد.