Блог

Попытка создать простой сайт React Express и развернуть его на Heroku оказывается довольно сложной задачей. Настройки, которые работают на моем локальном компьютере, следующие:

1. Способ 1: Я запускаю npm start в корневом каталоге, а затем npm start в каталоге клиента с прокси-сервером в пакете клиента.json, указывающем на адрес/порт сервера.
2. Метод 2: Я запускаю npm run build в каталоге клиента и запускаю только npm start в корневом каталоге. (чтобы проверить это, я удалил оператор if, который проверяет работоспособность, чтобы он работал в процессе разработки)

Оба этих метода отлично работают на моей локальной машине, однако при развертывании на heroku я постоянно получаю ошибку 404 при попытке перейти к /api, моей конечной точке сервера. Я видел кучу сообщений на SO по этому вопросу и перепробовал все предложения, которые я прочитал, но безрезультатно.

Сервер index.js

 const express = require("express");
const PORT = process.env.PORT || 8080;
const app = express();
const path = require('path');
const cors = require('cors')
app.use(cors())

// API
const router = require('./router/index');
app.use("/api", router);

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "client", "build")))
      
  app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "client", "build", "index.html"));
  });
}

app.listen(PORT, () => {
  console.log(`app listening on ${PORT}`)
})
 

Серверный пакет.json

 {
  "name": "ltb_calculator",
  "version": "1.0.0",
  "description": "An application for calculating interest for the Lifestyle Trading Bot on Telegram",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "install": "cd client amp;amp; npm install",
    "build": "cd client amp;amp; npm run build",
    "test": "mocha"
  },
  "engines": {
    "node": "^16.2.0"
  },
  "author": "Sonny Parlin",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "http-proxy-middleware": "^2.0.0",
    "mocha": "^9.0.0",
    "query-string": "^7.0.0",
    "react-fetch-hook": "^1.8.5",
    "react-json-view": "^1.21.3"
  }
}
 

Клиентский пакет.json

 {
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8080",
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
 

Весь проект находится на github, здесь. Судя по количеству вопросов об этом на SO, многие люди сталкиваются с этим по разным причинам. Заранее спасибо за любую информацию.

Я использовал неправильный пакет сборки. Я не помню, как настраивал пакет сборки, возможно, это что-то, что добавил heroku. В любом случае, я удалил пакет сборки react и добавил пакет сборки nodejs, и это, похоже, устранило проблему для меня. Должно быть, он запускал сервер react вместо экспресс-сервера.