#reactjs #apache #tomcat #react-router #amazon-elastic-beanstalk
#reactjs #apache #tomcat #react-router #amazon-elastic-beanstalk
Вопрос:
Есть много вопросов по этой теме, которые заключаются в том, что typed URL и refresh не работают при использовании react на производстве, но я пытаюсь уже давно, и по какой-то причине это не работает.
Я использую React с Spring boot и tomcat. Я использую BrowserRouter для маршрутизации. Я развертываю приложение на aws elastic beanstalk. При развертывании я делаю следующее: запускаю npm run build
, затем копирую полученные файлы в папке сборки в папку WebContent, затем экспортирую проект как файл war и развертываю его в aws.
Как я понял, основным решением для этого является сервер index.html файл для всех запросов, и я попробовал сделать это следующим образом: — добавьте следующее в /etc/httpd/conf/httpd.conf
<VirtualHost *:80>
DocumentRoot /var/lib/tomcat8/webapps/ROOT/
ServerName domain.elasticbeanstalk.com
AliasMatch ^/(.*)$ /var/lib/tomcat8/webapps/ROOT/index.html
<Directory "/var/lib/tomcat8/webapps/ROOT">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^/(.*)$ - [L]
RewriteRule ^/(.*)$ /index.html [L]
</Directory>
</VirtualHost>
Из вопросов, которые я прочитал, предлагается использовать /var/www/html, но я не понял, почему. Я пытался использовать его, скопировав все из ROOT в него, но также не сработало.
Я перепробовал много вариантов кода, который я поместил в файл конфигурации.
При настройке я получаю сообщение об ошибке SyntaxError: expected expression, got '<'
. В Firefox я получаю The script from “http://awsdomain.com/static/js/2.7322c0fb.chunk.js” was loaded even though its MIME type (“”) is not a valid JavaScript MIME type.
и в Chrome я получаю ту же ошибку, но с файлами css, а не js.
На данный момент я предполагаю, что обслуживание index.html работает, но есть еще одна проблема, связанная с тем, что сервер пытается проанализировать некоторые файлы js или css, такие как html или текст, которые не будут работать. В любом случае, я понятия не имею, как указать браузеру правильно их анализировать и почему он анализирует их без ошибок обычным способом (без решения проблемы маршрутизации)? Я попытался добавить атрибут type к тегам link и script в index.html но ничего не вышло.
В файлах конфигурации экземпляра aws есть много вещей, которые я специально устал, но было бы сложно поместить все это здесь. Я надеюсь из комментариев получить корень проблем, а затем я смогу предоставить любую недостающую информацию.
Ответ №1:
Моя проблема, наконец, исправлена. Следующее — мое последнее дополнение к httpd.conf
<VirtualHost *:80>
DocumentRoot /var/lib/tomcat8/webapps/ROOT/
ServerName domain.elasticbeanstalk.com
<Directory /var/lib/tomcat8/webapps/ROOT>
Options FollowSymLinks MultiViews
AllowOverride All
Require all granted
DirectoryIndex index.html
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
</Directory>
</VirtualHost>
Кроме того, раздражало, что dir_module не был включен по умолчанию, что необходимо DirectoryIndex . Чтобы включить его, добавьте LoadModule dir_module modules/mod_dir.so
.