آفلاین
user-avatar

اجرای reactJS در هاست

2 سال پیش
توسط Amin Khademian آپدیت شد
آفلاین
user-avatar
محمد مهدی صادقی ( 222 تجربه )
2 سال پیش

سلام. من پروژه ی build شده ی خودم رو در هاست ویندوزی website panel آپلود کردم، وبا زدن آدرس دامنه، درست میاره. لینک های داخلی هم مثل signIn و ... با کلیک بر روی اونا، درست میاره. ولی متاسفانه اگر در صفحه ی داخلی مثل signIn باشیم و صفحه رو رفرش کنیم، ارور ۴۰۴ - File or directory not found.
The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.
رو نشون میده. کلا اگر به طور مستقیم url داخلی رو وارد کنیم، این ارور میاد. مثلا : www.siteName.ir/signIn

بهترین پاسخ انتخاب شده توسط محمد مهدی صادقی
آفلاین
user-avatar

ممنون از شما ashkana و آقای موسوی. این راهی که گفتید، مال سرور لینوکس هستش و فایل .htaccess روی ویندوز فک نکنم عملکردی داشته باشه.

خیلی گشتم تا مشکل رو حل کردم. همون تنظیمات رو باید توی فایل web.config انجام بشه:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <!-- This part is responsible for URL rewrites -->
        <rewrite>
          <rules>
            <rule name="ReactJS Routes" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
              </conditions>
              <action type="Rewrite" url="/" />
            </rule>
          </rules>
        </rewrite>
        <!-- This allows CORS for testing purposes -->
        <httpProtocol>
         <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
         </customHeaders>
       </httpProtocol>
  </system.webServer>
</configuration>

ضمنا حتما باید افزونه ی url-rewrite روی سرور نصب باشه. مال من بدون اون ارور میداد. لینکش رو میذارم:
https://www.iis.net/downloads/microsoft/url-rewrite

آنلاین
user-avatar
حسام موسوی ( 382929 تجربه )
2 سال پیش
تخصص : طراح و برنامه نویس

باید htaccess رو تغییر بدید تا اگر کاربر روت دیگه ای رو فراخونی میکنه همون روت اصلی برای شما بیاد و ادرسش همون باشه تا reactjs بتونه اون رو بگیره و handle کنه

آفلاین
user-avatar
محمد مهدی صادقی ( 222 تجربه )
2 سال پیش

ببخشید میشه بگید باید چه کار کنم؟ سرویس من vps هست و سیستم عاملش windows server 2012 هستش.
اصلا htaccess برای ویندوز هم هست؟

آفلاین
user-avatar
اشکان اهرابی ( 759 تجربه )
2 سال پیش
تخصص : Front-End Developer

سلام، این مشکل از اینجاست که شما وقتی یک single page application دارید درواقع فقط یک فایل html به نام index دارید. زمانیکه وارد اپلیکیشن خودتون میشید و وارد روت‌های مختلف می‌شید اپلیکیشن کاملا درست و بدون مشکل کار می‌کنه. اما به محض این که یک صفحه را رفرش کنید مثلا همون singIn رو، اونوقت درخواستی که به سرور ارسال میشه بهش میگه برو دنبال فایل signIn.html که درواقع همچین فایلی روی سرور وجود نداره و اون روت signIn یک روت در داخل اپلیکیشن شماست.
همونطور که آقای موسوی فرمودن باید با تغییر دادن فایل .htaccess رو سرور خودتون این مشکل رو برطرف کنید. روی سرورتون دقیقا کنار index.html یک فایل htaccess. بسازید (توجه کنید که حتما دات رو قرار بدید قبل از اسم htaccess ) و تنظیمات زیر رو داخلش کپی کنید و ذخیره‌اش کنید.

بعد که وارد سایت بشید بدون هیچ مشکلی میتونید رفرش کنید هر صفحه رو و کاملا درست صفحه رفرش میشه.

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]
آفلاین
user-avatar
محمد مهدی صادقی ( 222 تجربه )
2 سال پیش

ممنون از شما ashkana و آقای موسوی. این راهی که گفتید، مال سرور لینوکس هستش و فایل .htaccess روی ویندوز فک نکنم عملکردی داشته باشه.

خیلی گشتم تا مشکل رو حل کردم. همون تنظیمات رو باید توی فایل web.config انجام بشه:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <!-- This part is responsible for URL rewrites -->
        <rewrite>
          <rules>
            <rule name="ReactJS Routes" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
              </conditions>
              <action type="Rewrite" url="/" />
            </rule>
          </rules>
        </rewrite>
        <!-- This allows CORS for testing purposes -->
        <httpProtocol>
         <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
         </customHeaders>
       </httpProtocol>
  </system.webServer>
</configuration>

ضمنا حتما باید افزونه ی url-rewrite روی سرور نصب باشه. مال من بدون اون ارور میداد. لینکش رو میذارم:
https://www.iis.net/downloads/microsoft/url-rewrite

آفلاین
user-avatar
Amin Khademian ( 963 تجربه )
2 سال پیش
تخصص : Front-End Developer

این راه حل ها فقط کار میکنن اما راه درستی نیست پس فردا اپ رو روی یه سرو دیگه بخوای اجرا کنی دوباره باید همین کارارو انجام بدی و با express توی خود اپ میتونی این کار رو هندل کنی یه بار برای همیشه سعی کن همیشه بهترین راه رو پیدا کنی نه راهی که فقط کار میکنه

برای ارسال پاسخ باید وارد سایت شوید