使用 .env 文件在代理后面提供 create-react-app 提供白屏、错误和误报答案

【问题标题】：serving create-react-app behind a proxy with .env file giving white screen, errors and false positives使用 .env 文件在代理后面提供 create-react-app 提供白屏、错误和误报
【发布时间】：2020-02-28 13:25:30
【问题描述】：

我正在尝试从 nginx 反向代理后面提供 CRA 应用程序。我得到一个白屏，React 报告了误报的 http 获取结果，并且浏览器中的控制台日志没有帮助。服务器上不存在域/静态文件夹，并且不是由 react-scripts 3.3 创建的。

此处的工作（损坏）示例：

https://react.syntapse.co.uk/rewired

.env 文件

PUBLIC_URL="https://react.syntapse.co.uk/rewired"
PORT=3120
WDS_SOCKET_HOST="https://react.syntapse.co.uk/rewired"
WDS_SOCKET_PORT=3121

nginx 配置：

server {
    listen 80;
    server_name react.syntapse.co.uk;

    # rewired
    location ^~ /rewired/sockjs-node/ {
        proxy_pass http://0.0.0.0:3121/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    location ^~ /rewired {
        proxy_pass http://0.0.0.0:3120/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

浏览器错误日志：

Uncaught SyntaxError: Unexpected token '<'
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.preload.js.map
0.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
main.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.postload.js.map

加载时的网络历史记录在所有捆绑包上显示 200。

rewired 200 document    Other   1.1 KB  112 ms  Script
bundle.js   200 script  rewired 1.1 KB  48 ms Script
0.chunk.js  200 script  rewired 1.1 KB  52 ms   Script
main.chunk.js   200 script  rewired 1.1 KB  53 ms   
Manifestmanifest.json   200 manifest    Other   1.1 KB  145 ms  
Otherfavicon.ico    200 text/html   Other   1.1 KB  96 ms

捆绑文件引用了一个静态目录，该目录不存在于我服务器上的文件路径中。捆绑文件应该存放在哪里。

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="/rewired/static/js/bundle.js"></script>
  <script src="/rewired/static/js/0.chunk.js"></script>
  <script src="/rewired/static/js/main.chunk.js"></script>

</body>

我的系统上不存在静态位置，我可以找到捆绑文件。对于默认 CRA 应用，它们应该位于何处？

谢谢

【问题讨论】：

标签： javascript reactjs create-react-app

【解决方案1】：

create-react-app in development 允许您在开发前端时忽略后端，它通过在本地运行开发服务器来实现。当您完成开发并准备好部署应用程序时，您需要运行构建脚本，它会为您创建一个静态文件文件夹，以便从您的服务器提供服务。

https://create-react-app.dev/docs/deployment/#other-solutions

【讨论】：