Question

关于此主题的很多问题是，在生产环境上使用react时，键入的URL和刷新不起作用，但是我已经尝试了很长时间，由于某种原因，它不起作用。

我在Spring Boot和tomcat中使用React。我正在使用BrowserRouter进行路由。我将应用程序部署在AWS Elastic beantalk上。部署时，请执行以下操作：运行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属性添加到index.html中的链接和脚本标签，但是没有用。

我在aws实例的配置文件中特别累了很多东西，但是很难将其全部放在这里。我希望从评论中找出问题的根源，然后再提供任何缺少的信息。

Answer 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>

此外，令人讨厌的是DirectoryIndex缺省不包含dir_module。要添加它，请添加LoadModule dir_module modules/mod_dir.so。

React-router键入URL并在tomcat，弹性beantalk上刷新

1 个答案: