NodeJS и развертывание приложения React на AWS: без рендеринга React UI

Я развернул приложение nodejs и реакцию на AWS EC2, следуя это руководство. Я вижу статический заголовок html, но реагирующие представления не отображаются. Глядя на вкладку сети, я заметил 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 он просто содержит список маршрутов, соответствующих различным компонентам.


person zzzzz_2    schedule 20.04.2020    source источник
comment
Можем ли мы взглянуть на информацию заголовка. из тех 404? Кроме того, лучше использовать const и let вместо var.   -  person Aviv Lo    schedule 20.04.2020
comment
@AvivLo Спасибо за предложение, пожалуйста, смотрите заголовочный файл выше. Я посмотрел в Интернете и обнаружил, что ошибка с консоли является результатом неудачного запроса на получение. Таким образом, кажется, что браузер не может получить файл js, но может получить статический html. Может ли причина быть в том, что приложение React работает на порту 3000, а сервер aws прослушивает порт 80? Спасибо!   -  person zzzzz_2    schedule 21.04.2020
comment
попробуйте добавить type='text/javascript' в тег ссылки html для вашего файла js. Используете ли вы express.js на сервере?   -  person Aviv Lo    schedule 21.04.2020
comment
@AvivLo Я добавил type='text/javascript', и проблема не устранена. Для бэкэнда я использую экспресс   -  person zzzzz_2    schedule 21.04.2020
comment
Можем ли мы взглянуть на ваш app.js или index.js . Просто удалите конфиденциальную информацию. Является ли разработчик. консоль в браузере по-прежнему выдает ту же ошибку?   -  person Aviv Lo    schedule 21.04.2020
comment
@AvivLo См. файл index.js выше. Консоль разработчика по-прежнему выдает ту же ошибку.   -  person zzzzz_2    schedule 21.04.2020
comment
Будет ли это работать, если вы подключитесь к экземпляру ec2 по ssh и сделаете curl на порту 80?   -  person Aviv Lo    schedule 21.04.2020
comment
Давайте продолжим обсуждение в чате.   -  person zzzzz_2    schedule 21.04.2020


Ответы (1)


Это может быть связано с тем, что server.js загружается до завершения сборки реакции. Таким образом, статический путь указывает на ./client/build, которого еще не существует. Так что, возможно, запустите server.js после того, как реакция завершит процесс сборки.

person Aviv Lo    schedule 20.04.2020