reactjs - React-router 键入 url 并在 tomcat 上刷新，elastic beanstalk

Question

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

我将 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 属性添加到 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>

另外，令人恼火的是 dir_module 没有默认包含在 DirectoryIndex 中。要包含它，请添加 LoadModule dir_module modules/mod_dir.so。