REACT & Expressjs: Backend не может «обслуживать» статический интерфейс

Question

Я делаю простое приложение для телефонной книги в качестве упражнения для курса. У меня есть бэкэнд и внешний интерфейс, и оба работают, когда работают отдельно. Под этим я подразумеваю, что POST, GET и PUT работают должным образом, и мой веб-интерфейс отправляет эти запросы на сервер.

В моем курсе я должен создать внешние интерфейсы, переместить папку 'build' в корневую папку внутренней папки и использовать expressjs, чтобы использовать их в качестве статических файлов. Я получаю это сообщение «GET / {} 404 139 - 0,212 мс» или «GET /index.html {} 404 149 - 0,231 мс».

Кажется, он не может найти интерфейс. Я развернул свое приложение в Heroku, и бэкэнд также работает там, и когда я запускаю свой веб-интерфейс в режиме разработки, он работает и с бэкэндом Heroku.

Также, когда я пытаюсь открыть файл index.html, расположенный в «build / index.html» в Chrome, я получаю эти ошибки в консоли (хотя я не знаю, означает ли это что-нибудь):

Не удалось загрузить ресурс: net :: ERR_FILE_NOT_FOUND /P:/static/css/main.e503f880.chunk.css

Не удалось загрузить ресурс: net :: ERR_FILE_NOT_FOUND /P:/static/js/1.17677b60.chunk.js

Не удалось загрузить ресурс: net :: ERR_FILE_NOT_FOUND /P:/static/js/main.1cb95994.chunk.js

Не удалось загрузить ресурс: net :: ERR_FILE_NOT_FOUND /P:/favicon.ico

Буду признателен за любую помощь.

Все содержимое курса находится в одном репо, поэтому я создал новый репо, в котором есть только внешний и внутренний интерфейсы для этого проекта. https://github.com/porrasm/phonebook-repo

EDIT1: пробовал добавить «static.json» в корневую папку с этим { "root": "build", "routes": { "/**": "index.html" } }

Answer 1

Собирался опубликовать то, что написал Александр, но, кроме того, ваше приложение странно структурировано.

Упростите структуру следующим образом:

├── client
|   ├── build
|   |   ├── css
|   |   |   ├── main.[contenthash:8].css
|   |   |   └── main.[contenthash:8].css.map
|   |   ├── js
|   |   |   ├── main.[hash].js
|   |   |   └── main.[hash].js.map
|   |   ├── media
|   |   |   └── [hash].[ext]
|   |   ├── favicon.ico
|   |   └── index.html
|   |
|   ├── public
|   |   ├── favicon.ico
|   |   └── index.html
|   |
|   └── src
|       ├── components
|       ├── containers
|       ├── images
|       ├── reducers
|       ├── root
|       ├── routes
|       ├── store
|       ├── styles
|       ├── tests
|       ├── types
|       ├── index.js
|       └── setupTests.js
|    
|
├── controllers
├── database
├── env
├── middlewares
├── models
├── routes
├── server
├── services
├── shared
└── app.js (index.js)

Затем вы можете запустить server и client, отредактировав package.json вашего сервера (npm run dev - для разработки || npm start - для производства):

...
"scripts": {
  "start": "NODE_ENV=production node app.js",
  "server": "NODE_ENV=development nodemon app.js",
  "client": "npm start --prefix client",
  "dev": "concurrently \"npm run server\" \"npm run client\"",
},
...

Затем в app.js (index.js):

 ...required imports
 ...middlewares
 ...database
 ...shared
 ...services
 ...controllers
 ...routes


 //============================================================//
 /* PRODUCTION CONFIG */
 //============================================================//
 if (process.env.NODE_ENV === "production") {
   // Express will serve up production assets
   app.use(express.static("client/build"));

   // Express will serve up the front-end index.html file if it doesn't recognize the route
   app.get("*", (req, res) => res.sendFile(path.resolve("client", "build", "index.html")));
 }

 //============================================================//
 /* CREATE EXPRESS SERVER */
 //============================================================//
 const PORT = process.env.PORT || 3001
 app.listen(PORT);

Answer 2

Чтобы Express обслуживал ваши встроенные статические файлы React, такие как JavaScript и CSS, вам нужно на базовом уровне использовать static () . В дополнение к этому вы захотите настроить «универсальный» маршрут для обслуживания index.html, сгенерированного путем построения приложения React с использованием чего-то вроде sendFile () . Это станет исключительно необходимым, если вы в конечном итоге будете использовать маршрутизацию в приложении React с такой библиотекой, как react-router-dom.

Сначала поставьте следующую строку после вашего app.use(morganSettings), чтобы указать express, из какого каталога в вашем бэкэнд-приложении должны обслуживаться статические файлы (Images / CSS / JS). В вашем случае это папка build:

app.use(express.static(path.join(__dirname, 'build')));

Затем после маршрутов REST, добавьте следующую строку для обслуживания index.html, когда эти маршруты не выполнены / не выполнены:

app.use('*', (req, res) => res.sendFile(path.join(__dirname 'build', 'index.html')));

Насколько я понимаю, файл static.json действительно нужен, только если вы развертывали отдельное приложение React / SPA. Это не так, поскольку вы действительно развертываете приложение Express, которое обслуживает статические ресурсы.

Надеюсь, это поможет!