هاست ReactJS چیست؟ راهنمای نصب ReactJS روی هاست

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

البته نه هر هاستی!

این دست از اپلیکیشن‌ و سایت‌های ری‌اکتی، باید روی هاستی میزبانی شوند که ReactJS روی آن نصب شده باشد. به این هاست، اصطلاحاً هاست ReactJS می‌گویند.

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

هاست چیست؟

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

قبل از اینکه به موضوع اصلی مقاله، یعنی هاست ReactJS چیست بپردازیم، باید اول مفهوم هاست و ری‌اکت را جداگانه توضیح دهیم.

به‌طور خلاصه، هاست به فضایی از یک سرور گفته می‌شود که تمام محتویات و کدهای یک وب‌سایت در آن ذخیره و نگهداری می‌شود تا همه‌ کاربران اینترنت بتوانند وب‌سایت ساخته‌شده را مشاهده کنند. برای اینکه به‌طور کامل با مفهوم هاست آشنا شوید، پیشنهاد ما این است که مقالهٔ «هاست چیست و چه کاربردی دارد؟ (+انواع هاست)» را مطالعه کنید.

خرید انواع هاست 🍋

بهترین سرویس‌های میزبانی وب را از لیموهاست بخواهید

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

شروع قیمت از
سالیانه ۵۹۰ هزار تومان

خرید هاست

ری‌اکت (React) چیست؟

ری‌‌اکت یکی از محبوب‌ترین کتابخانه‌های جاوا اسکریپت است که برای برنامه‌نویسی فرانت‌اند، ساخت رابط کاربری(UI) و توسعهٔ اپلیکیشن‌های تک‌صفحه‌ای (SPA) از آن استفاده می‌شود.

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

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

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

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

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

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

برگردیم سر بحث اصلی‌مان و ببینیم هاست ری اکت چیست.

هاست ReactJS چیست؟

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

وقتی در حال نوشتن کدهای پروژهٔ ری‌اکت روی کامپیوتر خود هستیم، در محیط توسعه (Development) قرار داریم. 

معمولا اینگونه است که پروژهٔ ساخته شده را می‌توانیم روی آدرس http://localhost:3000 ببینیم. با هر تغییر در کدهای پروژه، تغییرات اعمال‌شده را می‌توانیم بلافاصله در این آدرس مشاهده کنیم. اما همانطور که گفتیم، وقتی در محیط توسعه هستیم، فقط در کامپیوتر خود می‌توانیم وب‌سایتی را که ساخته‌ایم ببینیم. آدرس http://localhost:3000 یک آدرس محلی است و کاربران دیگر با ورود به این آدرس، هیچی نمی‌بینند. 

برای اینکه بقیه‌ٔ کاربران بتوانند وب‌سایت ما را ببینند، مانند همهٔ وب‌سایت‌های دیگر نیاز داریم که آن را روی اینترنت بارگذاری کنیم. چطور؟

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

دامنه همان نام و شناسهٔ یک وب‌سایت در دنیای اینترنت است. برای مثال limoo.host نام دامنه‌ٔ وب‌سایت لیموهاست است که در قسمت URL مرورگر خود آن را مشاهده می‌کنید.

اگر هنوز برای وب‌سایت و کسب‌و‌کار خود دامنه‌ای انتخاب نکرده‌اید، می‌توانید به صفحهٔ ثبت و خرید دامنه در لیموهاست بروید و به‌راحتی نام‌ دامنهٔ مورد نظر خود را جستجو و آن را خریداری کنید.

جست‌و‌جو و ثبت دامنه

از بین بیش از ۸۰۰ پسوند مختلف، دامنه دلخواهتان را جست‌و‌جو و ثبت کنید.

شروع قیمت از
۴۹ هزار تومان

خرید دامنه

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

تا اینجا و مرحله خرید هاست و دامنه، در سایت‌های ری‌اکتی و غیرری‌اکتی یکسان است؛ از اینجا به بعد برای میزبانی سایت‌های ری‌اکتی بایدکدهای پروژه را آماده و به هاست انتقال دهید.

هاست لینوکس سی‌پنل

مدیریت میزبانی در اختیار شماست! مناسب برای تمام CMS‌ها و سازگار با انواع زبان‌ها

شروع قیمت از
۹۹۰ هزار تومان (سالیانه)

خرید هاست لینوکس

نحوه نصب ReactJS روی هاست و انتقال پروژه ری‌اکت به آن

همانطور که گفتیم، در حین نوشتن کدهای وب‌سایت در محیط توسعه (Development) قرار داشتیم. 

از آنجایی که کدهای ما قبل از انتقال به هاست، فقط برای همان محیط توسعه و برنامه‌نویسی قابل استفاده است و از طرفی، ممکن است از یک سری ابزارها برای دیباگ و خطایابی استفاده کرده‌ باشیم یا اسم‌های طولانی برای متغیر‌های خود انتخاب کرده‌ باشیم و حجم فایل‌های ما برای آپلود در اینترنت احتمالا مقداری زیاد باشد، لازم است که کدهای خود را برای بارگذاری در اینترنت بهینه‌تر کنیم؛ یا اصطلاحاً کدهای نوشته‌شده را از حالت توسعه (Development) به حالت تولید (Production) دربیاوریم. 

حالت تولید (Production) به حالتی گفته می‌شود که کدهای وب‌سایت، برای استفاده روی محیط سرور یا هاست آماده شده‌اند. کدها در حالت production در بهینه‌ترین حالت ممکن قرار می‌گیرند که هدف آن سریع‌تر شدن وب‌سایت و افزایش امنیت است. این کار معمولاً توسط خود کتابخانه ری‌اکت و با استفاده از ابزارهایی مانند Webpack انجام می‌شود و چند مزیت دارد:

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

۲. فعال شدن کشینگ (caching): وظیفهٔ کشینگ این است که یک سری اطلاعات را در مرورگر کاربر ذخیره می‌کند و در دفعات بعدی که کاربر از وب‌سایت بازدید می‌کند، به‌جای بارگذاری و دانلود مجدد آن، مرورگر از این اطلاعات از قبل ذخیره‌شده استفاده می‌کند که سرعت وب‌سایت را تا حدود زیادی افزایش می‌دهد.

۳. غیرفعال شدن ابزارهای خطایابی: برنامه‌نویس‌ها هنگام توسعه و تست پروژه از یک سری ابزارهای خطایابی استفاده می‌کنند که باعث نمایش پیام‌هایی در پروژه می‌شود. در حالت پروداکشن این ابزارها غیرفعال می‌شوند تا کارایی و کیفیت وب‌سایت افزایش یابد.

خب در این مثال ما در نظر داریم پروژهٔ ساخته شده با آخرین نسخهٔ فریم‌ورک Next.js را به هاست منتقل کنیم.

نکته: در زمان نوشتن این مقاله، نسخهٔ ۱۴.۲.۷، آخرین نسخهٔ منتشر شدهٔ فریم‌ورک Next.js است.

برای ری‌اکت فریم‌ورک‌های مختلفی ساخته شده است که از محبوب‌ترین آن‌ها می‌توان به Next.js اشاره کرد و معمولا انتخاب اول برنامه‌نویس‌های ری‌اکت، همین فریم‌ورک Next.js است. فریم‌ورک مجموعه‌ای از ابزارها و کتابخانه‌ها هستند که به برنامه‌نویس کمک می‌کند در یک چارچوب مشخص، برنامه‌ٔ خود را توسعه دهد.

برای این کار باید مراحل زیر را طی کنیم:

فایل next.config.js را باز کنید و آن را به شکل زیر تغییر دهید.

حالا کافی‌ست که دستور npm run build را در ترمینال اجرا کنید.

پس از اتمام عملیات، همان‌طور که در تصویر زیر می‌بینید یک پوشه به نام out در پوشهٔ پروژه ساخته شده است.

فایل‌ها و پوشه‌های ساخته‌شده را در تصویر زیر مشاهده می‌کنید. همهٔ آن‌ها را در یک فایل Zip ذخیره کنید. 

این نکته را در نظر داشته باشید که در این مثال، روی پروژهٔ ساخته‌شده از فریم‌ورک Next.js، هیچ تغییری اعمال نشده است. اگر شما پروژهٔ خود را توسعه داده باشید، احتمالا فایل‌های پروژهٔ شما بیشتر از فایل‌هایی باشد که در تصویر زیر می‌بینید. 

حالا نوبت به انتقال فایل Zip به هاست است.

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

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

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

در این صفحه پوشه‌ها و فایل‌های هاست را می‌توانید ببینید. روی public_html دو بار کلیک کنید تا وارد آن شوید.

پوشه‌ٔ public_html همان پوشه‌ای است که ما باید فایل‌های وب‌سایت خود را در آن بارگذاری کنیم. وقتی بار اول وارد public_html شوید یک‌سری فایل‌ها وجود دارد؛ آن‌ها را پاک کنید. 

وقتی روی دکمهٔ Upload کلیک کنید، یک تب جدید در مرورگر شما باز می‌شود. فایل Zip که قبلا ساخته‌اید را انتخاب کرده و صبر کنید تا فایل به‌طور کامل آپلود شود.

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

روی فایل Zip آپلود‌شده کلیک راست کنید و گزینه‌ٔ Extract را انتخاب کنید.

در پنجرهٔ بازشده که در تصویر زیر می‌بینید، آدرس public_html/ را وارد کرده و روی دکمهٔ extract کلیک کنید.

در آخرین مرحله، نوبت ساخت فایل htaccess. است.

برای انجام این‌کار در صفحهٔ File Manager روی دکمهٔ File در قسمت بالا سمت چپ صفحه کلیک کنید.

پس از باز شدن پنجره، شما باید اسم فایل جدیدی که می‌خواهید بسازید را وارد کنید. در قسمت New File Name عبارت «htaccess.» را تایپ کنید و بر روی دکمهٔ «Create New File» کلیک کنید.

روی فایل htaccess. ساخته‌شده کلیک راست کرده و گزینهٔ Edit را انتخاب کرده تا تب جدیدی در مرورگر باز شود.

در این صفحه یک ویرایشگر متن مشاهده می‌کنید. کد زیر را کپی و در ویرایشگر متن Paste کنید و دکمهٔ Save Changes را بزنید.

RewriteEngine On

RewriteRule ^([^/]+)/$ $1.html

RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^([^/]+)/$ $1.html

RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.html

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$

RewriteRule (.*)$ /$1/ [R=301,L]

و تمام! اکنون می‌توانید آدرس دامنهٔ خود را در مرورگر وارد کنید و پروژهٔ ری‌اکت ساخته‌شده خود را ببینید.

جمع‌بندی

در این مقاله با هاست ری‌اکت آشنا شدید و نحوه انتقال پروژه ری‌اکت‌تان به هاست را یاد گرفتید. اگر به کمک بیشتری نیاز دارید، یا قسمتی از این مقاله برایتان نامفهوم و گنگ بود، حتماً در قسمت نظرات برایمان بنویسید تا بیشتر راهنمایی‌تان کنیم.