时间戳

首页 > 解决方案 > Aws-Amplify：manifest.json 和 env.json 加载 index.html

reactjs - Aws-Amplify：manifest.json 和 env.json 加载 index.html

问题描述

我正在构建的 React App 有一个 manifest.json 和一个 env.json，如下所示，

但是，当我使用 AWS-Amplify 将网站发布到 S3 存储桶时，manifest.json 和 env.json 会加载我的 index.html。一切都在 localhost 中正常工作，但在生产中我们遇到了上一个问题，即使我们可以获取其他文件作为图标和 robots.txt。

我们公用文件夹的内容如下：

asset-manifest.json
browserconfig.xml
ec4c4f981671b5dee24ab5f541f07720.png
ef7c6637c68f269a882e73bcb57a7f6a.woff2
env.json <----- loading index.html
icons
index.html
main-5fbcf0b95e5bf6891f54.js
main-5fbcf0b95e5bf6891f54.js.LICENSE.txt
manifest.json. <----- loading index.html
robots.txt.   <------ working
service-worker.js

amplify.yml 文件如下所示：

 version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - NODE_ENV=$MY_ENV_SELECTOR node ./node_modules/webpack/bin/webpack.js --mode production --env=prod 
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

看起来它正在为我们提供 index.html，因为它没有找到请求的文件，但我们不知道为什么会发生这种情况。

我们希望任何人都可以帮助我们解决这个问题。

标签： reactjsaws-amplify

解决方案

我可能已经找到了答案，为我工作。

所以我正在使用 React 和 React-router 构建一个单页应用程序 (SPA)。

我必须输入重定向规则来管理路由器的工作方式。根据放大文档。

Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Type: 200 (Rewrite)

似乎这也在推动manifest.json去的请求index.html

我通过在我的放大控制台中添加另一个规则来解决这个问题：

Source address: /manifest.json
Target address: /manifest.json  
Type: 200 (Rewrite)

有兴趣知道这是否适用于其他人。

推荐阅读