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