آپلود پروژه React بر روی هاست

معمولا برای اولین بار که اپلیکیشنی با استفاده از یک فریم‌ورک می‌نویسیم, این سوال پیش می‌آید که چگونه آن را بر روی یک هاست اشتراکی آپلود کنیم.معمولا فریم‌ورک‌ها شامل دو حالت development (شامل ابزار‌های ویژه برای دیباگینگ) و production (شامل فایل‌های فشرده شده همراه با کَش برخی فایل‌ها) هستند.

همواره به این نکته توجه داشته باشید که آپلود پروژه در حالت development خطر نمایش ناخواسته اطلاعات ضروری پروژه شما (مانند اطلاعات احراز هویت دیتابیس) در سَمت client را به دنبال دارد, همچنین به دلیل نبود خروجی کَش و فشرده شده از فایل‌ها سرعت بارگذاری پایین‌تری نسبت به production دارند.

قدم اول برای build گرفتن از پروژه اضافه کردن مسیر اصلی دسترسی هاست به فایل package.json است.کلید homepage را به package.json اصافه می‌کنیم و url هاست رو به عنوان مقدار اون قرار می‌دهیم:

12345678{
   &quotname&quot: &quotreact-app&quot,
   &quotversion&quot: &quot0.1.0&quot,
   &quothomepage&quot:  آدرس وبسایت,
   &quotprivate&quot: true,
   &quotdependencies&quot: { ... },
    .... 
}

سپس دستور زیر را در پوشه پروژه اجرا میکنیم:

1npm run build

بعد از اینکار پوشه build به پروژه اضافه میشه که شامل فایل‌هایی از جمله دو فایل فشرده شده css و js است.حالا به file manager هاستمون میریم و در پوشه public_html فایلی با نام .htaccess اضافه می‌کنیم که شامل این باشه:

123456789<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>

این قطعه کد مسیر‌ اصلی پروژه ما رو به سرور معرفی میکنه, حالا فایل های پوشه build رو در public_html آپلود می‌کنیم و کار تمومه.

کامل‌تر این نوشته رو می‌تونین اینجا بخونین.

نویسنده مطلب: رضا

منبع مطلب