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

问题描述

我正在尝试从 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 应用程序，它们应该位于哪里？

谢谢

标签： javascriptreactjscreate-react-app

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

问题描述

解决方案

推荐阅读