AWS 上的 NodeJS 和 React 应用部署：不渲染 React UI答案

【问题标题】：NodeJS and react app deployment on AWS: not rendering react UIAWS 上的 NodeJS 和 React 应用部署：不渲染 React UI
【发布时间】：2020-08-03 09:27:42
【问题描述】：

我已经按照this tutorial 部署了一个 nodejs 并将应用程序响应 AWS EC2。我可以看到静态 html 标题，但反应视图没有呈现。查看网络选项卡，我注意到 get 请求出现了一些 404，但我不确定问题出在哪里。

这是我的 nginx 设置：

server {
    listen 80;
    location / {
        proxy_pass http://{{my ec2 ip}}:{{5000}};
        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;
    }
}

客户端的package.json：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    some dependencies
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "homepage": "http://{{my ec2 ip}}",
  "proxy": "http://{{my ec2 ip}}:5000",
  "browserslist": {
    "production": [
      ">0.2%",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

最后作为一个快速的健全性检查，这是我的 server.js 和目录结构：

var express = require("express")
var cors = require("cors")
var path = require("path")
var bodyParser = require("body-parser")
var app = express()
var port = process.env.PORT || 5000

var Users = require('./routes/Users')

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

app.use(Users)

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



app.get('*',function(req,res){
  res.sendFile(path.resolve(__dirname, 'client', 'build'));
});

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

提前致谢！

更新

这是404错误的详细信息：我在控制台中得到的错误如下：

来自“http://34.203.226.71/ec2-34-203-226-71.compute-1.amazonaws.com/static/js/main.2b162001.js”的资源由于 MIME 类型（“text/html”）不匹配（X-Content-Type-Options: nosniff）而被阻止”

在网络选项卡中，获取 / 的请求返回 404

更新这是我的 index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

在我的 App.js 中，它只包含与不同组件匹配的路由列表。

【问题讨论】：

我们可以看看标题信息。那些404？加上使用const 和let 而不是var 是更好的做法。
@AvivLo 感谢您的建议，请参阅上面的头文件。我在网上查了一下，发现控制台的错误是获取请求失败的结果。因此，浏览器似乎无法获取 js 文件，但它能够获取静态 html。原因可能是反应应用程序正在端口 3000 上运行，而 aws 服务器正在侦听端口 80？谢谢！
尝试在您的 js 文件的 html 链接标签中添加 type='text/javascript'。你在后端使用 express.js 吗？
@AvivLo 我添加了type='text/javascript'，但问题仍然存在。对于后端，我使用的是 express
我们可以看看你的 app.js 或 index.js 吗？只需剥离敏感信息。是开发者。浏览器中的控制台仍然给出同样的错误？

标签： node.js reactjs amazon-ec2 nginx-config

【解决方案1】：

这可能是因为 server.js 在 react 完成构建之前加载。因此静态路径指向尚不存在的./client/build。所以也许在反应完成构建过程之后运行server.js。

【讨论】：