我刚刚在Google的Compute Engine上部署了Node.js / React应用。我的VM正在运行带有节点版本10.11.0的Linux Debian 9。我的React应用是使用create-react-app创建的。我还使用react-app-rewired为我的一个库添加了一个加载器。问题是，当我构建应用程序并进行部署时，第一次从任何浏览器加载该应用程序时都会收到错误：Syntax error: Unexpected token <。经过进一步检查，我发现这是因为静态文件夹（/ build目录）中的main.js文件是我在静态目录中的index.html。如果刷新页面，该错误已修复。然后，如果我转到另一个浏览器（仅包括链接到其他电子邮件的另一个chrome浏览器），则会发生相同的情况。因此，基本上，任何人第一次尝试在浏览器中加载页面时，即使是在部署页面后的几天，也会发生这种情况。然后它们刷新，一切正常。有谁知道这可能导致什么？以下是我的package.json文件以及我如何在server.js文件中为页面提供服务。我不知道还有哪些其他相关信息，但是让我知道可能需要其他哪些信息，可以添加它。预先感谢。
package.json：
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^1.4.0",
"@material-ui/icons": "^1.1.0",
"@material-ui/lab": "^1.0.0-alpha.8",
"@react-pdf/renderer": "^1.0.0-alpha.14",
"ajv": "^6.5.2",
"axios": "^0.18.0",
"blob-stream": "^0.1.3",
"classnames": "^2.2.6",
"debug": "^3.1.0",
"fs": "0.0.1-security",
"fullcalendar-reactwrapper": "^1.0.7",
"html-react-parser": "^0.4.7",
"joi-browser": "^13.4.0",
"jwt-decode": "^2.2.0",
"moment": "^2.22.2",
"pdfmake": "^0.1.37",
"react": "^16.4.1",
"react-app-rewired": "^1.5.2",
"react-big-calendar": "^0.19.2",
"react-calendar": "^2.16.1",
"react-dom": "^16.4.1",
"react-dropzone": "^4.2.13",
"react-load-script": "0.0.6",
"react-number-format": "^3.5.0",
"react-pdf": "^3.0.5",
"react-redux": "^5.0.7",
"react-responsive": "^4.1.0",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"react-signature-pad": "0.0.6",
"react-text-mask": "^5.4.2",
"react-transition-group": "^2.4.0",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.5",
"redux-thunk": "^2.3.0",
"socket.io-client": "^2.1.1",
"transform-loader": "^0.2.4",
"twilio-video": "^1.13.0",
"yoga-layout": "github:naminho/yoga-layout-windows"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"
}
server.js摘录：
// Serve static assets if in production
if (process.env.NODE_ENV === "production") {
// Set static folder
app.use(express.static("client/build"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
}
更新：
浏览器第一次加载页面时，如果我检查js文件夹，则其主js文件的名称不正确。文件名始终为main.#####.js，其中#####是一系列随机字母和数字。当我将其与服务器上的序列进行比较时，该序列是不正确的，但是在重新加载时，会出现一个与服务器匹配的新文件名，并且一切正常。有趣的是，错误地在错误的main.#####.js文件下提供的html文件包含指向正确的main.#####.js文件名的链接。再说一次，我并不是说这是在第一次请求时发生的。每当新的浏览器尝试加载页面时都会发生这种情况（Firefox，Chrome，Edge和Safari已经过测试，并且行为均相同）。那么部署后几天仍会发生这种情况？