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

Question

我正在尝试从 nginx 反向代理后面提供 CRA 应用程序。 我出现白屏，React 报告误报 http 获取结果，并且浏览器中的控制台日志无用。 domain/static 文件夹在服务器上不存在，也不是由 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 应用程序，它们应该放在什么位置？

谢谢

Answer 1

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

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

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

问题描述

1 个解决方案

解决方案1
0 2020-02-28 13:38:37

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

问题描述

1 个解决方案

解决方案1 0 2020-02-28 13:38:37

解决方案1
0 2020-02-28 13:38:37