aws 部署 nodejs express 后端提供的 HTML 文件但无法加载反应 js 文件

Question

我在 AWS EC2 实例上部署了一个带有 nodejs express 后端的 React 前端应用程序。目前它只提供 html 文件但没有正确加载 js 文件（它在本地正常工作）。我查看了 stackoverflow 并找到了 similar issue 但我无法修复它。

这是我的 server.js 文件：

const express = require("express");
const cors = require("cors");
const path = require("path");
const bodyParser = require("body-parser");
const jwt = require("jsonwebtoken");
let app = express();
const mysql = require('mysql');
const port = process.env.PORT || 5000

process.env.SECRET_KEY = 'secret';

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));
}

app.use(express.static(path.resolve(__dirname, './client/build')));

// some routes here

// app.get(“*”, (req, res) => {res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));});

app.listen(port, () => {
    console.log("Server is running on port: " + port)
})

这是我的文件夹结构：

在“/”上，它会正确地从构建文件夹中查找 html 文件，但无法找到 js 文件。我应该如何解决这个问题？谢谢！

编辑 index.html 文件，只是 create-react-app 模板中的基本 index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" type='text/javascript'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" type='text/javascript' />
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
i
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>Recommender System</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
  <!--
      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`.
    -->
</body>

</html>

Answer 1

在运行节点后端之前，您必须先构建您的 React 应用程序。

这里的问题是你有 app.use(express.static(path.resolve(__dirname, './client/build'))); 指向 ./client/build 目录，如果你在没有先完成构建你的反应应用程序的情况下启动你的节点后端，那么这个目录不存在。

所以不妨先尝试构建 react 应用，然后再启动 node 应用。

更新：

因为您在 express 中将路径设置为./client/build，所以您可以在路由之前添加./，您可以在脚本标签的src 属性中添加。赞./static/xx.js