نحوه دیپلوی کردن برنامه React روی هاست و Vercel (راهنمای کامل)

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

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

چنانچه در هر یک از بخش‌ها به مشکل برخوردید یا سوال داشتید، حتماً مطرح کنید.

چک‌لیست قبل از شروع استقرار سایت React

قبل از اینکه پروژه React خود را روی سرور یا سرویس‌های میزبانی (مانند Vercel، Netlify، سرور لینوکس یا هاست اشتراکی) مستقر کنید، بهتر است چند مورد را بررسی کنید تا هنگام دیپلوی با خطا یا رفتار غیرمنتظره مواجه نشوید.

۱. از اجرای صحیح پروژه مطمئن شوید

اول از همه پروژه‌تان را در محیط توسعه اجرا کنید و مطمئن شوید هیچ خطایی وجود ندارد.

برای این کار می‌توانید از دستورات زیر استفاده کنید:

npm install
npm run dev
# یا
npm start

این دستورات باید در ترمینال (Terminal) و داخل پوشه پروژه React اجرا شوند. مثلاً اگر از Visual Studio Code استفاده می‌کنید، پروژه را باز کنید و از منوی ترمینال روی New Terminal کلیک کنید. بعد می‌توانید دستور را اجرا کنید.

۲. مطمئن شوید پروژه بدون خطا Build می‌شود

یکی از مهم‌ترین مراحل قبل از دیپلوی، گرفتن نسخه Production است. برای این کار npm run build را در ترمینال وارد کنید. توجه کنید که اگر در این مرحله خطایی دریافت کنید، پروژه روی سرور نیز اجرا نخواهد شد؛ پس در صورت مشاهده خطا حتما آن را رفع کنید.

۳. فایل‌های Environment را بررسی کنید

اگر از فایل‌های .env استفاده می‌کنید، مقادیر Production را آماده کنید. دقت کنید که اطلاعات حساس را به هیچ وجه داخل سورس کد قرار ندهید و مطمئن شوید متغیرهای موردنیاز در قسمت متغیرهای محیطی یا Environment Variables سرور نیز تنظیم می‌شوند.

برای نمونه متغیر محیطی زیر را ببینید:

BASE_API_URL=https://api.example.com

• نام متغیر: BASE_API_URL
• آدرس API پروژه: https://api.example.com

از این متغیرها برای نگهداری تنظیمات پروژه استفاده می‌شود.

نکتۀ مهم: اگر پروژه شما از فایل .env برای نگهداری تنظیمات (مانند آدرس API) استفاده می‌کند، قبل از دیپلوی مطمئن شوید مقادیر نسخه Production را تنظیم کرده‌اید. اما اگر پروژه از متغیرهای محیطی استفاده نمی‌کند، می‌توانید این مرحله را نادیده بگیرید.

۴. آدرس APIها را بررسی کنید

گاهی ممکن است به دلیل اشتباه در آدرس API، پروژۀ شما اجرا نشود. برای جلوگیری از این مشکل رایج، قبل از انتشار مطمئن شوید درخواست‌ها به آدرس صحیح ارسال می‌شوند.

• مثلاً آدرس‌دهی به این شکل اشتباه است: http://localhost:5000/api (دقت کنید که این آدرس در محیط توسعه یا لوکال کار می‌کند؛ اما روی سرور نه.)
• آدرس‌دهی درست: https://api.example.com/api

۵. وابستگی‌های پروژه را دریابید

هر پروژه React برای اجرا به کتابخانه‌ها و پکیج‌های مختلفی (مانند React، React Router، Axios، Redux و غیره) نیاز دارد؛ این پکیج‌ها باید در فایل package.json ذخیره شده باشند.

مثلاً کد زیر را ببینید:

{
"dependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.0.0",
"axios": "^1.9.0"
}
}

موقع دیپلوی، سرور این فایل را می‌خواند و تمام پکیج‌های موردنیاز را نصب می‌کند. حالا اگر کتابخانه‌ای در package.json ثبت نشده باشد، احتمالاً با خطاهایی مانند Module not found یا Cannot find package مواجه خواهید شد.

۶. نسخه Node.js را چک کنید

گاهی نسخه Node روی سیستم شما با نسخۀ روی سرور متفاوت است و همین باعث خطا می‌شود. برای بررسی نسخه Node از دستور node -v استفاده کنید و اگر نیاز بود، با دستور زیر نسخۀ مورد نیازتان را در فایل package.json مشخص کنید. 👇

"engines": {
"node": ">=20"
}

۷. فایل‌های غیرضروری را حذف کنید

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

برای مثال، اگر در پروژه تصاویر آزمایشی، کامپوننت‌هایی که دیگر استفاده نمی‌شوند، فایل‌های تست یا فایل‌های موقتی مانند test.js، sample.png یا OldNavbar.jsx وجود دارند، بهتر است آن‌ها را حذف کنید. این کار علاوه بر مرتب‌تر شدن پروژه، باعث می‌شود فایل‌های اضافی وارد نسخه نهایی (Production) نشوند.

۸. Console Logهای اضافی را حذف کنید

قبل از انتشار پروژه، console.logهای اضافی را حذف کنید. این لاگ‌ها برای اشکال‌یابی در زمان توسعه مفید هستند، اما در نسخه نهایی می‌توانند اطلاعات داخلی برنامه را نمایش دهند، پیدا کردن خطاهای واقعی را دشوار کنند و در پروژه‌های بزرگ روی عملکرد برنامه نیز تأثیر منفی بگذارند.

مثلاً در زمان توسعه این کد کاملاً طبیعی است:

console.log(user);
console.log(response.data);
console.log("Button clicked");

اما قبل از دیپلوی بهتر است آن‌ها را حذف کنید و فقط در صورت نیاز، لاگ‌های مهم مانند console.error() را برای ثبت خطاها نگه دارید یا از سرویس‌های مانیتورینگ خطا مانند Sentry استفاده کنید.

۹. مسیرهای (Routes) پروژه را بازبینی کنید

اگر از React Router استفاده می‌کنید، مطمئن شوید:

• همه مسیرها درست تعریف شده‌اند.
• صفحه 404 دارید.
• تنظیمات سرور از SPA پشتیبانی می‌کند (Rewrite به index.html).

یک مثال می‌زنم. فرض کنید سایت شما این آدرس را دارد: https://example.com/about

اگر تنظیمات Rewrite روی سرور انجام نشده باشد، سرور به دنبال فایلی به نام about می‌گردد و چون چنین فایلی وجود ندارد، خطای 404 Not Found نمایش می‌دهد. اما اگر Rewrite به index.html تنظیم شده باشد، سرور همیشه فایل index.html را ارسال می‌کند و React تشخیص می‌دهد که باید صفحه About را نمایش دهد.

به همین دلیل، هنگام دیپلوی روی سرورهایی مانند Apache، Nginx یا IIS، معمولاً لازم است قانون Rewrite را برای هدایت درخواست‌ها به index.html تنظیم کنید تا تمام مسیرهای React درست کار کنند.

۱۰. تصاویر و فایل‌های استاتیک را بررسی کنید

این اقدام خیلی ساده است. فقط باید مطمئن شوید که مسیر تصاویر صحیح است، فایل‌های حجیم بهینه شده‌اند و تصاویر بدون استفاده حذف شده‌اند.

۱۱. حجم Build را بررسی کنید

بعد از اجرای دستور npm run build، نسخۀ نهایی پروژه ساخته می‌شود. حالا اگر حجم فایل‌های JavaScript، CSS یا تصاویر بیش از حد بزرگ باشد، مرورگر باید حجم بیشتری را دانلود کند؛ پس سرعت بارگذاری سایت کاهش می‌یابد و این مسئله به‌ویژه برای کاربرانی که اینترنت کندتری دارند مشکل‌ساز خواهد شد.

مثال: فرض کنید بعد از Build، فایل اصلی JavaScript پروژۀ شما حدود ۵ مگابایت حجم دارد. در این شرایط، مرورگر کاربر باید اول این فایل را دانلود کند تا سایت قابل استفاده شود. اما اگر با استفاده از تکنیک‌هایی مانند Code Splitting یا Lazy Loading حجم فایل به ۱ مگابایت برسد، سایت سریع‌تر بارگذاری می‌شود و تجربه کاربری بهتر خواهد شد.

برای همین بعد از اجرای دستور npm run build، بهتر است پوشۀ dist (در Vite) یا build (در Create React App) را بررسی کنید و اگر دیدید که فایل‌های خروجی بیش از حد بزرگ هستند، با حذف کتابخانه‌های غیرضروری، بهینه‌سازی تصاویر یا استفاده از Code Splitting، حجم آن‌ها را کاهش دهید. این کار باعث بهبود سرعت بارگذاری و عملکرد سایت در نسخه نهایی می‌شود.

۱۲. فایل‌های مهم پروژه را چک کنید

وجود این فایل‌ها معمولاً ضروری است:

• package.json
• package-lock.json یا yarn.lock
• .gitignore
• vite.config.js یا webpack.config.js (در صورت وجود)

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

برای مثال فرض کنید پروژه شما از Alias زیر استفاده می‌کند:

import Header from "@/components/Header";

این Alias در فایل vite.config.js تعریف شده است. اگر این فایل روی سرور وجود نداشته باشد یا تنظیمات آن حذف شود، هنگام Build با خطایی مانند Cannot resolve ‘@/components/Header’ مواجه می‌شوید و پروژه اجرا نخواهد شد.

سرویس DevOps و FinOps لیموهاست

ویژه کسب‌وکارهای بزرگ

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

شروع قیمت از
25 میلیون تومان

اطلاعات بیشتر

دیپلوی سایت React روی هاست سی‌پنل

اگر پروژۀ شما استاتیک است، می‌توانید آن را روی هاست سی‌پنل میزبانی کنید. در این بخش مراحل انجام کار را توضیح داده‌ایم. هرجا سوالی داشتید از ما بپرسید.

۱. خرید دامنه و هاست

برای راه‌اندازی یک وب‌سایت، باید یک نام دامنه ثبت‌شده و یک پلن هاست از یک ارائه‌دهنده هاستینگ تهیه کنید (این خدمات توسط لیموهاست ارائه می‌شوند).

برای آشنایی با روند خرید هاست و دامنه می‌توانید نگاهی به مقاله‌های زیر بیندازید:

• چگونه هاست بخریم؟ (مراحل خرید هاست)
• بعد از خرید دامنه و هاست چه کنیم؟

۲. اضافه کردن homepage در فایل package.json

اپلیکیشن React را باز کنید و فایل package.json را ویرایش کنید. الان باید یک ویژگی به نام homepage به آن اضافه کنید. به این صورت:

"homepage": "http://yourdomainname.whatever"

۳. ساخت فایل build

در پوشه اصلی پروژه، دستور yarn install را اجرا کنید تا وابستگی‌ها (Dependencies) نصب شوند. سپس دستور yarn build را اجرا کنید (دستورات npm install و npm build هم قابل استفاده هستند).

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

۴. اتصال به cPanel

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

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

در cPanel، روی File Manager کلیک کنید.

در آنجا لیستی از پوشه‌ها می‌بینید؛ پوشه‌ای که به آن نیاز داریم public_html است. آن را باز کنید.

۵. انتقال فایل‌های build به public_html

به پوشه build در پروژه خود بروید و تمام فایل‌های داخل آن را انتخاب کنید.

⚠️ توجه: خود پوشه build را آپلود نکنید؛ فقط محتوای داخل آن را کپی کنید. سپس این فایل‌ها را در پوشه public_html آپلود کنید.

۶. ساخت و آپلود فایل .htaccess

برای اینکه مسیرها (routes) در اپ React شما درست کار کنند، باید یک فایل .htaccess بسازید.

در پوشه public_html، یک فایل جدید با نام .htaccess ایجاد کنید و کد زیر را داخل آن قرار دهید:

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l RewriteRule . /index.html [L] </IfModule>

فایل را Save کنید.

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

دیپلوی سایت React روی Vercel

بیایید اول کمی با ورسل آشنا شویم و بعد به سراغ مراحل عملی برویم.

ورسل چیست؟

ورسل (Vercel) یک پلتفرم ابری است که کار توسعه وب را بسیار ساده کرده است. هدف اصلی این پلتفرم این است که توسعه‌دهندگان بتوانند بدون درگیر شدن با تنظیمات پیچیده فنی، برنامه‌هایی سریع، ایمن و مقیاس‌پذیر بسازند.

ورسل هم بخش‌های مربوط به ظاهر سایت (سمت کاربر) و هم بخش‌های فنی و پردازشی (سمت سرور یا APIها) را به خوبی پشتیبانی می‌کند؛ البته برای مواردی مثل مدیریت پایگاه‌داده، باید از سرویس‌های جانبی در کنار آن استفاده کنید.

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

ورسل به دلیل تمرکز ویژه بر نیازهای توسعه‌دهندگان و ارتباط بسیار نزدیک با Next.js (فریم‌ورک محبوب React که خودِ ورسل آن را ساخته)، انتخاب اول بسیاری از پروژه‌های امروزی است. علاوه بر این، چون ورسل از فریم‌ورک‌های متنوعی مثل Django، Flask، Svelte، Nuxt و Astro نیز پشتیبانی می‌کند، دست توسعه‌دهندگان برای انتخاب ابزار مورد نظرشان را کاملاً باز می‌گذارد.

۲ پیش‌نیاز برای ورسل

یک) پروژه React.js: مطمئن شوید یک پروژه React.js آماده و قابل اجرا دارید که می‌خواهید آن را منتشر (Deploy) کنید.

دو) Node.js و npm: برای ساخت و دیپلوی پروژه، Vercel به Node.js و npm نیاز دارد. بنابراین حتماً بررسی کنید که Node.js روی سیستم شما نصب باشد.

 نحوه دیپلوی React روی Vercel

۱) نصب Vercel CLI

برای Deploy پروژه React.js روی Vercel، لازم است ابزار Vercel CLI (همان رابط خط فرمان) را روی سیستم خود نصب کنید. این ابزار به شما اجازه می‌دهد مستقیماً از طریق ترمینال یا Command Prompt با سرویس‌های Vercel کار کنید.

برای نصب Vercel CLI به‌صورت سراسری (Global)، ترمینال یا Command Prompt را باز کرده و دستور زیر را اجرا کنید:

npm install -g vercel

۲) ساخت پروژه React.js

حالا باید یک نسخه نهایی یا Production Build از پروژه بسازید.

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

برای این کار، ترمینال یا Command Prompt را باز کنید، به پوشه اصلی پروژه React خود بروید و دستور زیر را اجرا کنید:

npm run build

این دستور پوشه Build را در دایرکتوری پروژه شما ایجاد می‌کند که شامل فایل‌های آماده انتشار (Production-ready) است.

۳) اتصال به Vercel

خب؛ بعد از اینکه فرآیند ساخت (Build) کامل شد، باید پروژه خود را به Vercel متصل کنید. در واقع این مرحله به Vercel اجازه می‌دهد به پروژه شما دسترسی داشته باشد و فرآیند دیپلوی را به‌صورت خودکار انجام دهد.

الان باید دستور vercel login را در خط فرمان وارد کنید.

با اجرای این دستور، یک پنجره در مرورگر باز می‌شود و در آن از شما خواسته می‌شود وارد حساب Vercel خود شوید یا اگر حساب ندارید، ثبت‌نام کنید.

بعد از ورود به حساب، دوباره به ترمینال برگردید.

در آنجا پیامی مشاهده می‌کنید که تأیید می‌کند با موفقیت وارد حساب خود شده‌اید.

۴) دیپلوی پروژه

حالا که پروژه شما به Vercel متصل شده است، می‌توانید آن را با دستور زیر دیپلوی کنید:

vercel --prod

این دستور باعث می‌شود پروژه مستقیماً در محیط نهایی (Production) منتشر شود. همچنین Vercel به‌صورت خودکار و بر اساس فایل‌های موجود در پروژه، تشخیص می‌دهد که پروژه شما یک اپلیکیشن React.js است و تنظیمات لازم را اعمال می‌کند.

یک سوال: در طول فرآیند دیپلوی چه اتفاقی می‌افتد؟

پاسخ: Vercel قبل از شروع، از شما تأیید می‌گیرد. اگر اولین بار است که پروژه را دیپلوی می‌کنید، ممکن است از شما بخواهد مشخص کنید پروژه در کدام حساب قرار بگیرد. چون دو نوع حساب شخصی (Personal) و سازمانی (Organization) داریم.

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

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

آیا برای دیپلوی کردن ری‌اکت لزوماً به Node.js نیاز داریم؟

اگر بخواهیم خیلی ساده بگوییم، Node.js محیطی است که به شما اجازه می‌دهد کدهای JavaScript را خارج از مرورگر اجرا کنید. قبل از Node Js جاوااسکریپت فقط داخل مرورگر اجرا می‌شد؛ اما این یعنی چه؟

فرض کن سال ۲۰۰۸ است؛ Node.js هنوز وجود ندارد و جاوا اسکریپت فقط داخل مرورگر اجرا می‌شود. آن زمان اگر می‌نوشتید console.log("Hello"); فقط وقتی قابل اجرا بود که آن را داخل یک صفحه HTML باز می‌کردید.

به عبارت دیگر، باید کد HTML زیر را می‌ساختید و آن را داخل کروم باز می‌کردید.

<script>
console.log("Hello");
</script>

بعد از آمدن Node.js چه اتفاقی افتاد؟

Node.js موتور اجرای جاوااسکریپت را از داخل مرورگر جدا کرد و روی سیستم‌عامل قرار داد. اینطوری الان می‌توانیم بدون باز کردن مرورگر، داخل ترمینال node app.js را تایپ کنیم تا فایل جاوا اسکریپت مستقیماً روی ویندوز، لینوکس یا مک اجرا شود.

پس الان کد console.log("Hello"); بدون مرورگر و از طریق ترمینال اجرا می‌شود.

👈 حالا برسیم به سوال اصلی‌مان: آیا برای دیپلوی کردن ری اکت حتماً Node.js را لازم داریم؟

جواب کلی «نه» است. اما باید به یک نکتۀ مهم دقت کنید: 👇

ما برای Build گرفتن به نود جی اس نیاز داریم.

یعنی برای اجرای npm run build باید نود جی اس داشته باشیم تا فایل‌های JSX به JavaScript معمولی تبدیل شوند؛ فایل‌های CSS و JS بهینه شوند و کدها فشرده شوند. همچین برای اینکه بتوانیم از ابزارهایی مانند Next.js و Create React App استفاده کنیم، نود جی اس را لازم داریم.

اما در مرحلۀ Deployment معمولاً نیازی به Node.js نیست. چرا؟

چون بعد از Build، خروجی فقط چند تا فایل است. مانند:

index.html
assets/
app.js
app.css

این فایل‌ها کاملاً استاتیک هستند (یعنی تغییر نمی‌کند) و می‌توانید آن‌ها را روی هر وب‌سروری (مثل آپاچی و Nginx) قرار دهید.

⭐ در کل، اگر سایت استاتیک است، می‌توانید آن را روی هاست معمولی (مثل هاست اشتراکی لینوکس) دیپلوی کنید؛ اما اگر سایت یا اپ داینامیک است (یا می‌خواهید سورس پروژه را روی سرور کپی کنید)، به نود جی اس و سروری که برای این منظور کانفیگ شده است، نیاز دارید.

هاست Node.js

یک راهکار عالی برای توسعه‌دهنده‌ها و برنامه‌نویسان

پردازش داده قدرتمند و مقیاس‌پذیری

شروع قیمت از
۳۸۹ هزار تومان (ماهانه)

خرید هاست نود جی اس

چک لیست پس از استقرار ری اکت

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

1. سلامت سایت را چک کنید؛ آیا صفحات بدون خطا و صفحه سفید باز می‌شوند؟
2. درخواست‌های API را چک کنید؛ آیا همه درخواست‌ها پاسخ صحیح می‌گیرند و احراز هویت کار می‌کند؟
3. کنسول و Network را بررسی کنید؛ آیا خطاهای JavaScript، 404 یا 500 وجود دارد؟
4. HTTPS و متغیرهای محیطی را بازبینی کنید؛ آیا دامنه امن است و برنامه به API تولید (Production) متصل شده است؟
5. به‌روزرسانی را فراموش نکنید؛ آیا فایل‌های جدید جایگزین شده‌اند، کش مشکل ایجاد نکرده و نسخه تازه برای کاربران نمایش داده می‌شود؟

این موارد معمولاً بیشترین مشکلات رایج پس از استقرار یک برنامه React را پوشش می‌دهند.

عیب‌یابی خطاهای رایج دیپلوی

حدود ۸۰٪ مشکلات دیپلوی React به چند دسته محدود می‌شوند. در جدول زیر رایج‌ترین خطاها، علت آن‌ها و راه‌حلشان را آورده‌ایم.

سوالات متداول

تفاوت npm run dev و npm run build چیست؟

npm run dev پروژه را در حالت توسعه اجرا می‌کند، اما npm run build نسخه بهینه‌شده و آماده انتشار را برای محیط Production می‌سازد.

آیا می‌توان سایت React را روی هاست اشتراکی (cPanel) دیپلوی کرد؟

بله. اگر پروژه فقط یک سایت React است و بک‌اند Node.js ندارد، یا سایت استاتیک است، کافی است فایل‌های خروجی پوشه dist یا build را روی هاست آپلود کنید

بعد از دیپلوی، چرا صفحات React با خطای 404 باز می‌شوند؟

این مشکل معمولاً به دلیل تنظیم نبودن Rewrite روی وب‌سرور است. در برنامه‌های React که از React Router استفاده می‌کنند، باید همه درخواست‌ها به فایل index.html هدایت شوند.

چرا دستور npm run build با خطا مواجه می‌شود؟

دلایل مختلفی مانند وجود خطا در کد، نصب نبودن وابستگی‌ها، ناسازگاری نسخه Node.js یا تنظیمات اشتباه پروژه می‌تواند باعث بروز این مشکل شود.

آیا باید پوشه node_modules را روی سرور آپلود کنیم؟

خیر. این پوشه معمولاً حجم زیادی دارد و در زمان نصب وابستگی‌ها دوباره ساخته می‌شود. در سایت‌های React استاتیک نیز اصلاً نیازی به آپلود آن نیست.

تفاوت Build و Deploy چیست؟

Build فرآیند تبدیل کدهای پروژه به نسخه قابل انتشار است، اما Deploy به معنای انتقال و انتشار همین فایل‌ها روی سرور یا هاست است.

آیا برای دیپلوی React به سرور Node.js نیاز داریم؟

نه لزوماً. اگر پروژه فقط یک فرانت‌اند React باشد، می‌توان آن را روی هر وب‌سروری که فایل‌های HTML، CSS و JavaScript را ارائه می‌دهد، میزبانی کرد.

آیا می‌توان React را روی Nginx یا Apache اجرا کرد؟

بله. هر دو وب‌سرور از میزبانی فایل‌های خروجی React پشتیبانی می‌کنند. فقط باید تنظیمات Rewrite برای مسیرهای React Router را نیز انجام دهید.

چرا بعد از دیپلوی، تصاویر یا فایل‌های CSS نمایش داده نمی‌شوند؟

این مشکل معمولاً به دلیل اشتباه بودن مسیر فایل‌ها، تنظیم نبودن Base Path یا خطا در فرآیند Build رخ می‌دهد.

آیا می‌توان پروژه React را بدون Git دیپلوی کرد؟

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

برای Vercel چه جایگزین‌هایی وجود دارد؟

از محبوب‌ترین جایگزین‌های Vercel می‌توان به Netlify، Cloudflare Pages، Render، Firebase Hosting و GitHub Pages اشاره کرد. همچنین می‌توانید پروژه React را روی سرور شخصی یا هاست اشتراکی نیز مستقر کنید.

آیا Vercel رایگان است؟

بله. Vercel یک پلن رایگان (Hobby) برای پروژه‌های شخصی و آموزشی ارائه می‌دهد که شامل استقرار خودکار، SSL رایگان و CDN است. برای پروژه‌های بزرگ یا تجاری، ممکن است به پلن‌های پولی نیاز داشته باشید.

برای Vercel در زمان قطع اینترنت ایران چه اتفاقی میفتد؟

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

جایگزین‌های ایرانی Vercel کدامند؟

در حال حاضر سرویسی با تمام قابلیت‌های Vercel در ایران وجود ندارد، اما لیارا و هم‌روش نزدیک‌ترین گزینه برای استقرار پروژه‌های React و Node.js محسوب می‌شود. از هاست نود جی اس لیموهاست نیز می‌توانید کمک بگیرید.

چرا سایت روی سیستم من درست کار می‌کند اما روی سرور خطا می‌دهد؟

رایج‌ترین دلایل عبارت‌اند از تفاوت نسخه Node.js، تنظیمات اشتباه متغیرهای محیطی (.env)، مشکلات مسیر فایل‌ها (به‌ویژه حساسیت به حروف بزرگ و کوچک در لینوکس)، یا ناقص بودن فرآیند Build.

جمع‌بندی

دیپلوی یک پروژه React فقط به آپلود فایل‌ها روی سرور محدود نمی‌شود. از بررسی پیش‌نیازها و ساخت نسخۀ Production گرفته تا انتخاب سرویس میزبانی مناسب، تنظیم مسیرهای React Router و رفع خطاهای احتمالی، هر مرحله در عملکرد صحیح و پایداری سایت نقش مهمی دارد. اگر این مراحل را به‌درستی انجام دهید، می‌توانید سایت خود را با اطمینان روی انواع سرویس‌های میزبانی مانند Vercel، Netlify، cPanel یا سرورهای لینوکسی منتشر کنید.

اگر هنگام دیپلوی با خطاهایی مانند 404 یا Build Faild یا دیگر خطاها مواجه شدید، در بخش نظرات همین مقاله سؤال خود را مطرح کنید تا در سریع‌ترین زمان ممکن راهنمایی‌تان کنیم. همچنین اگر روش یا تجربه‌ای برای دیپلوی React دارید، آن را با دیگر کاربران به اشتراک بگذارید تا این راهنما کامل‌تر و کاربردی‌تر شود.