部署后反应白屏，错误404 chunk.js

Question

我是 React 的新手，我知道有很多关于它的答案，但没有一个对我有用。 我在 S3 存储桶上创建了一个托管在 AWS 上并由 AWS Cloudfront 部署的 React 应用程序。

有时，当我使用$ npm run deploy部署我的应用程序并转到我的浏览器时，这会显示一个白屏并显示错误：控制台上的chunk.js 404。 （ https://i.stack.imgur.com/Ri7qX .png )

这是我的“ package.json ”：我试图设置我的“主页”：使用：

• “/”
• “。”
• “https://website.com/”
• “https://website.com/django-react-portal”

“ package.json ”

"name": "django-react-portal",
"version": "0.1.0",
"private": true,
"homepage": "/",
"dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "animate.css": "^3.7.0",
    "antd": "^4.6.2",
    "axios": "^0.18.1",
    "bootstrap": "^4.5.2",
    "build": "^0.1.4",
    "clsx": "^1.1.1",
    "dropzone": "^5.7.2",
    "mailgun-js": "^0.22.0",
    "material-ui": "^0.20.2",
    "material-ui-dropzone": "^3.4.0",
    "mdbreact": "^4.27.0",
    "node-sass": "^4.14.1",
    "popper.js": "^1.14.3",
    "prop-types": "^15.7.1",
    "react": "^16.13.1",
    "react-axios": "^2.0.3",
    "react-bootstrap": "^1.3.0",
    "react-bootstrap4-form-validation": "^1.0.10",
    "react-datepicker": "^3.1.3",
    "react-dom": "^16.8.1",
    "react-dropzone": "^11.0.3",
    "react-dropzone-uploader": "^2.11.0",
    "react-google-recaptcha-v3": "^1.5.2",
    "react-icofont": "0.0.6",
    "react-icons": "^3.11.0",
    "react-image-lightbox": "^5.1.0",
    "react-mailchimp-subscribe": "^2.1.0",
    "react-modal-video": "^1.2.1",
    "react-owl-carousel3": "^2.2.5",
    "react-page-loading": "^1.0.2",
    "react-recaptcha-hook": "^1.1.1",
    "react-redux": "^7.2.1",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.3",
    "react-scroll": "^1.7.10",
    "react-scroll-up-button": "^1.6.4",
    "react-visibility-sensor": "^5.0.2",
    "react-wow": "^1.0.0",
    "reactstrap": "^8.7.1",
    "redux": "^4.0.5",
    "redux-form": "^8.3.6",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^1.2.1",
    "unidecode": "^0.1.8"
},

这是我的“ App.js ”：

function App() {
  return (
    <BrowserRouter>
      <Page loader={"bubble-spin"} color={"orange"} size={25}>
        <Switch>
          <Route path="/" component={Particuliers} />
          <Route path="/carrieres" component={Carrieres} />
          {/* <Route path="/particuliers" component={} /> */}
          <Route path="/entreprises" component={Entreprises} />
          <Route path="/test" component={HeaderAdmin} />
          <Route path="/concours" component={ConcoursCreate} />
          <Route path="/confirmation-concours" component={ConfirmationConcours} />
          <Route path="/politique-de-confidentialite" component={PolitiqueConfidentialite} />
          <Route path="/succes" component={SuccesCarrieres} />
          <Route path="/login" component={Login} />
          <Route>
            <Layout>
              <Switch>
                <PrivateRoute exact path="/careers" component={CareerList} />
                <PrivateRoute
                  exact
                  path="/careers/:clientId"
                  component={CareerDetail}
                />
                <PrivateRoute exact path="/concours-list" component={ConcoursList} />
                <PrivateRoute exact path="/livestats" component={LiveStats} />
              </Switch>
            </Layout>
          </Route>
        </Switch>
      </Page>
    </BrowserRouter>
  );
}
export default App;

这是我的“ index.js ”：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";
import "semantic-ui-css/semantic.min.css";
import { StateProvider } from "./StateProvider";
import reducer, { initialState } from "./reducer";

import App from "./App";

ReactDOM.render(
  <BrowserRouter basename={"/"}>
    <StateProvider initialState={initialState} reducer={reducer}>
      <Route path="/" component={App} />
    </StateProvider>
  </BrowserRouter>,
  document.getElementById("root")
);

奇怪的是，如果我等了大约 5-10 个小时，应用程序就会正常显示。 这就像白屏在部署后随机出现，而不是在每次部署后出现。

谢谢

Answer 1

这是 AWS Cloudfront 的缓存问题。 解决方案是创建自定义策略：

1. 前往 AWS Cloudfront
2. 选择您的发行版
3. 转到行为选项卡
4. 创建两种行为（一种用于 / 一种用于 index.html）
   • 在“缓存策略和源请求策略”中选择“创建策略”或者在Policies模块中创建策略。
5. 在 TTL 设置中，设置：
   • 最小 TTL、最大 TTL 和默认 TTL 为 0
   • 取消选中压缩支持中的 Brotli 和 Gzip