时间戳

首页 > 解决方案 > React-router typed-url 并在 tomcat、弹性 beanstalk 上刷新

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

问题描述

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

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

标签： reactjsapachetomcatreact-routeramazon-elastic-beanstalk

解决方案

我的问题终于解决了。以下是我对 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.

推荐阅读