aws部署nodejs express后端服务HTML文件但无法加载反应js文件

Question

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

这是我的 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

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

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

所以也许先尝试构建反应应用程序，然后再启动节点应用程序。

更新：

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

aws部署nodejs express后端服务HTML文件但无法加载反应js文件

问题描述

1 个解决方案

解决方案1
0 2020-04-21 21:12:38

aws部署nodejs express后端服务HTML文件但无法加载反应js文件

问题描述

1 个解决方案

解决方案1 0 2020-04-21 21:12:38

解决方案1
0 2020-04-21 21:12:38