آموزش پابلیش پروژه React در پوشه فرعی

نویسنده پوریا ستایش پوریا ستایش
1399/05/09
0
88
زمان مطالعه 2 دقیقه
آموزش پابلیش پروژه React در پوشه فرعی

بسیاری اوقات پیش می‌آید بخواهیم سایتی که با ReactJs طراحی شده است را روی یک پوشه فرعی در هاست موردنظر پابلیش کنیم. در حالت عادی اگر پروژه را در root اصلی هاست پابلیش کنیم با هیچ مشکلی روبه‌رو نمی‌شویم ولی آیا پابلیش در یک اصطلاحاً SubDirectory نیز همین‌طور است؟ قطعاً خیر.

در این مقاله در ۴ مرحله پروژه مورد نظر را برای پابلیش در یک پوشه فرعی یا Subdirectory آماده می‌کنیم.

  • مرحله اول: تعریف HomePage در Package.json
  • مرحله دوم: اصلاح مسیرها در Route
  • مرحله سوم: ویرایش لینک‌ها در جای‌‌جای پروژه
  • مرحله چهارم: ویرایش فایل‌های استاتیک

تعریف HomePage در Package.json

فرض کنید پروژه شما قرار است روی آدرسی مثل http://localhost:3000/mysite/newversion پابلیش شود. وارد فایل package.json می‌شویم و برای عبارت homepage مقدارِ http://localhost:3000/mysite/newversion را قرار می‌دهیم. به تصویری که از فایل package.json گرفته شده است توجه بفرمایید و همانند تصویر عمل کنید.

آموزش افزودن HomePage به پروژه

اصلاح مسیرها در Route

در مرحله بعدی اگر از react-router-dom استفاده کرده‌اید؛ شما می‌بایست مسیرها را اصلاح بفرمایید. منظور از مسیر چیست؟ منظور آدرسی است که برای route در router ری اکت استفاده کرده‌اید. به تصویر زیر توجه بفرمایید.

ویرایش مسیر برای Subdirectory در ReactJs

به path در عبارت بالا توجه بفرمایید. در حالت عادی و در پابلیش روی root اصلی هاست مشکلی وجود ندارد ولی برای پابلیش در یک subdirectory می‌بایست آدرس فرعی را وارد نمایید. البته به‌صورت دستی این کار را انجام نمی‌دهیم. برای نوشتن این آدرس از عبارت process.env.PUBLIC_URL استفاده می‌کنیم.

به تصویر زیر توجه بفرمایید سپس همانند تصویر پروژه خود را ویرایش کنید.

ویرایش Route برای پابلیش

ویرایش لینک‌ها در جای‌‌جای پروژه

در این مرحله می‌بایست هر چه link در پروژه استفاده شده است متناسب با subdirectory موردنظر ویرایش شود.

به عبارت زیر توجه کنید. این لینک در subdirectory کار نخواهد کرد.

<Link to="/Home">
  Home
</Link>

برای ایجاد صحیح لینک می‌بایست از همان دستور process.env.PUBLIC_URL استفاده کنیم. به شکل زیر:

<Link to={`${process.env.PUBLIC_URL}/Home`}>
  Home
</Link>

ویرایش فایل‌های استاتیک

به فایل index.html موجود در پوشه public بروید. هیچ‌کدام از فایل‌ها در subdirectory به شکل صحیح بارگیری نمی‌شوند و  خطای ۴۰۴ در کنسول نمایش داده می‌شود. هر نوع فایل استاتیک اعم از تصویر، CSS و جاوا اسکریپت را پیدا کنید. این بار چون در فضای جاوا اسکریپتی نیستیم و نمی‌توانیم از دستور process.env.PUBLIC_URL استفاده کنیم می‌بایست از %PUBLIC_URL% قبل از آدرس هر فایل استفاده نماییم. هر دو عبارت یک مفهوم را دارند یکی در جاوا اسکریپت و دیگری در فایل html استفاده می‌شود.

به عبارت زیر توجه بفرمایید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.min.css" />

    <link rel="stylesheet" href="%PUBLIC_URL%/css/style.css" />

    <title>پابلیش در SubDirectory</title>
</head>
<body>
    <div id="root"></div>

    <script src="%PUBLIC_URL%/js/custom.js"></script>

</body>
</html>

امیدوارم از این مطلب استفاده کرده باشید. اگر سؤالی داشتید آن را در قسمت نظرات عنوان کنید؛ حتماً پاسخ میدهیم.