Как настроить сервер Apache для маршрута React?

У меня есть приложение для работы с приложениями, которое отлично работает на моем локальном сервере-разработчике, но оно не сработало, когда я сбрасываю свои готовые файлы прямо в каталог Apache htdocs:

Вот что я имею:

/var/www/index.html
/var/www/bundle.js

и я имею

DocumentRoot /var/www

в /etc/apache2/sites-available/000-default.conf

Это факт
1). когда я обращаюсь к http://...com/, который перенаправил меня на страницу входа
2). После того, как я нажал ссылку

<Link to="main"><button>Log In</button></Link>

содержимое в поле местоположения браузера станет:

http://...comhttps://stackoverflow.com/main

3). Теперь, если я перезагружу этот URL (http://...comhttps://stackoverflow.com/main), я получил

The requested URL https://stackoverflow.com/main was not found on this server

Мой рунинг в реактиве:

    <Router history={browserHistory }>
      <Route path="/" component={TopContainer}>
          <IndexRoute component={Login} />
          <Route path='main' component={MainContainer} />   
      </Route>
</Router>

Что еще мне не хватает в конфигурации apache?

Спасибо

Ответы

Ответ 1

Измените конфигурацию VirtualHost (обычно находится в /etc/httpd/conf.d\vhosts.conf), добавив следующие строки Rewrite *:

<VirtualHost *:8080>
  ServerName example.com
  DocumentRoot /var/www/httpd/example.com

  <Directory "/var/www/httpd/example.com">
    ...

    RewriteEngine on
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]
  </Directory>
</VirtualHost>

Это говорит Apache для обслуживания любых файлов, которые существуют, но если они не существуют, просто используйте /index.html а не 404: not found.

Справочник по Apache: настройка виртуальных хостов Apache
Справочник по истории react-router: Настройка вашего сервера

Полный ответ с благодарностью украден отсюда

Ответ 2

Похоже, эта ссылка (https://gkedge.gitbooks.io/react-router-in-the-real/content/apache.html) именно то, что вам нужно...

Этот фрагмент конфигурации полезен для SPA:

Это заставляет Apache обслуживать любые файлы, которые существуют, но если они не существуют, просто отправьте файл /index.html вместо 404: не найдено

Надеюсь, что решит вашу проблему!

Ответ 3

Вышеупомянутое решение работает и для Ubuntu, но я немного боролся с ним, поэтому вот шаги, необходимые для его работы.

Расположение файла, в котором вам нужно разместить вышеупомянутую конфигурацию, находится под

/etc/apache2/sites-enabled

по умолчанию

/etc/apache2/sites-enabled/000-default.conf

Затем вам нужно убедиться, что RewriteEngine запущен (в противном случае вы получите ошибку при перезапуске сервера Apache).

sudo a2enmod rewrite

Наконец, перезапустите сервер Apache

sudo/etc/init.d/apache2 restart

Теперь это должно работать.

Когда вы используете конфигурацию по умолчанию (корень сайта находится в /var/www/html), тогда все, что вам нужно сделать, это разместить

<Directory "/var/www/html">
    RewriteEngine on
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]
</Directory>

в вышеупомянутый файл в разделе <VirtualHost...>

Ответ 4

Если вам нужно использовать .htaccess и подкаталог, то у меня работает следующее.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Ответ 5

Перейти в этот каталог

/и т.д./apache2/сайты-доступны
открыть файл: 000-default.conf
Изменить разрешение: 777
Вставить код внизу файла

RewriteEngine on 

# Don't rewrite files or directories 

RewriteCond %{REQUEST_FILENAME} -f [OR] 

RewriteCond %{REQUEST_FILENAME} -d 

RewriteRule ^ - [L] 

# Rewrite everything else to index.html to allow html5 state links 

RewriteRule ^ index.html [L]

Перезагрузите сервер

Ответ 6

Похоже, что ни одно из опубликованных решений не решает проблему, при которой отсутствующие ресурсы неправильно возвращают 200 вместо 404, что может сделать отладку, когда некоторые файлы отсутствуют, довольно раздражающей.

Мое решение состоит в том, чтобы вместо этого посмотреть, какой тип ресурса ожидает получить запрос, поскольку браузеры будут запрашивать HTML при переходе на страницу (Firefox запрашивает text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8), но не при доступе к ресурсам после начальной загрузки (файлы JS, импортированные через <script> или, если модули ES6 запрашивают */*, файлы CSS запрашивают text/css,*/*;q=0.1, при доступе к JSON через API fetch() указывается application/json, text/plain, */* и т.д.). Полагаясь на это предположение, можно настроить Apache для обслуживания одностраничного приложения при попытке доступа к несуществующему файлу (например, по маршруту, который работает только в одностраничном приложении), не отправляя его также всякий раз, когда SPA запрашивает CSS файл, который был переименован или отсутствует JSON файл.

<Directory  "/var/www/httpd/example.com">
    RewriteEngine on

    # Browsers will specifically ask for HTML (among other things) on initial page load
    # That is, if the *user* tries to access a *nonexisting* URL, the app is loaded instead
    # but if a webpage attempts to load a missing resource it will return 404.
    # (You can still go to /myreactapp/favicon.ico, but a missing /myreactapp/favicon.png resource won't return 200)

    # if (HTTP_ACCESS.contains('text/html') && file_not_exists(REQUEST_FILENAME))
    RewriteCond %{HTTP_ACCEPT} text/html
    RewriteCond %{REQUEST_FILENAME} !-f
        RewriteRule ^ index.html [last]

    # Any ressources loaded by index.html should behave correctly (i.e: Return 404 if missing)
    RewriteRule ^ - [last]

    AllowOverride None
    Options FollowSymLinks Multiviews 
    Require all granted
</Directory>