محمد مهدی صادقی
4 سال پیش توسط محمد مهدی صادقی مطرح شد
6 پاسخ

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

سلام. من پروژه ی 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


reactjs
تگ‌های محبوب
لاراول
php
laravel
متفرقه
reactjs
عمومی
html_css
nodejs
vuejs
وردپرس
پایتون
css
فلاتر
react
javascript
ثبت پرسش جدید
محمد مهدی صادقی
@sadeghi1376mms 4 سال پیش مطرح شد
3

ممنون از شما 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


حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 4 سال پیش مطرح شد
1

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


محمد مهدی صادقی
@sadeghi1376mms 4 سال پیش مطرح شد
1

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


اشکان اهرابی
تخصص : Front-End Developer
@ashkana 4 سال پیش مطرح شد
1

سلام، این مشکل از اینجاست که شما وقتی یک 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]

محمد مهدی صادقی
@sadeghi1376mms 4 سال پیش مطرح شد
3

ممنون از شما 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


Amin Khademian
تخصص : Front-End Developer
@khademianamin 4 سال پیش مطرح شد
0

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


محمدحسین
تخصص : Data Base Developer
@MohamadHosein 5 ماه پیش مطرح شد
0

سلام
همین تنظیمات رو در web.config گذاشتم ولی جواب نگرفتم.
در react کار دیگه ای انجام دادین ؟ تنظیم دیگه ای انجام ندادین ؟


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

ورود یا ثبت‌نام