NodeJS和React应用程序在AWS上的部署:不呈现React UI [英] NodeJS and react app deployment on AWS: not rendering react UI

问题描述

我已经按照

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

  import从'react'导入React；从'react-dom'导入ReactDOM；导入'./index.css';从"./App"导入应用；从'./registerServiceWorker'导入registerServiceWorker;ReactDOM.render(< App/> ;, document.getElementById('root'));registerServiceWorker(); 

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

解决方案

这可能是由于 server.js 在React完成构建之前已加载的事实.因此，静态路径指向尚不存在的 ./client/build .因此，也许在React完成构建过程之后，运行 server.js .

I've deployed a nodejs and react app to AWS EC2 following this tutorial. I can see the static html title but react views are not rendering. Looking at the network tab I notice some 404 for the get request but I'm not sure where the issue is.

Here is my nginx setup:

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 for client:

{
  "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"
    ]
  }
}

Finally as a quick sanity check, here is my server.js and directory structure:

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)
})

Thanks in advance!

update

Here is the 404 error in detail: the error I got in console is the following:

The resource from "http://34.203.226.71/ec2-34-203-226-71.compute-1.amazonaws.com/static/js/main.2b162001.js" was blocked due to MIME type ("text/html") mismatch (X-Content-Type-Options: nosniff)"

And in the network tab the get requests for / returns a 404

update Here is my index.js file:

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();

In my App.js it just contains a list of routes matching to different components.

解决方案

It might be due to the fact that server.js loads before react has finished building. So the static path points to ./client/build which does not exist yet. So perhaps run server.js after the react has finished the building process.

这篇关于NodeJS和React应用程序在AWS上的部署:不呈现React UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！