React-router typed-url 并在 tomcat、弹性 beanstalk 上刷新

Posted 2023-03-04

【中文标题】React-router typed-url 并在 tomcat、弹性 beanstalk 上刷新

【英文标题】：React-router typed-url and refresh on tomcat, elastic beanstalk

【发布时间】：2019-09-06 22:19:08

【问题描述】：

关于这个主题有很多问题，即输入的 URL 和刷新在生产中使用 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 '<'。 在火狐上，我得到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 或 text 不起作用。无论如何，我不知道如何告诉浏览器以正确的方式解析它们，为什么它以正常方式解析它们而没有错误（不解决路由问题）？ 我尝试将 type 属性添加到 index.html 中的链接和脚本标签，但没有奏效。

在 aws 实例的配置文件中有很多我特别厌倦的东西，但很难把它们全部放在这里。我希望从 cmets 找出问题的根源，然后我可以提供任何缺失的信息。

【参考方案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。