使用 .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