Проблема с развертыванием реагировать с узлом в героку

Question

Я развернул приложение реакции в героку. При успешной компиляции он указывает на api сервера, как в ссылке https://appssss1.herokuapp.com/. Я попытался развернуть код различными способами, отредактировав сервер. js, но не сработал. Итак, может кто-нибудь, пожалуйста, помогите мне разобраться, это будет оценено.

сервер. js:

const express = require('express')
const fetch = require('node-fetch')
const bodyParser = require('body-parser')
const app = express()
const cors = require('cors')
const path = require('path')
const port = process.env.PORT || 5000
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.listen(port, () => console.log(`Listening on port ${port}`))
app.use(cors())

app.get('/', (req, res) => {
  res.send('YOUR EXPRESS BACKEND IS CONNECTED')
})

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

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

{
  "name": "xx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install && npm run build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "concurrently": "^5.0.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "node-fetch": "^2.6.0"
  }
}

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

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.4.1",
    "node-sass": "^4.13.0",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-dom": "^16.12.0",
    "react-scripts": "^3.3.0",
    "sass-loader": "^8.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000"
}

Пользовательский интерфейс не отображается на root (/), но возвращение серверной части открыто. Я хочу, чтобы индекс пользовательского интерфейса. html обслуживался на root (/), а во внутреннем интерфейсе были другие URL-пути.

Спасибо

Answer 1

Хорошо, значит, пользовательский интерфейс на самом деле обслуживается на https://appssss1.herokuapp.com/client/build Вам нужно будет обслуживать его на /, поэтому смените сервер. js как показано ниже:

  app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
  })

Также удалите app.use(express.static('client/build')) и убедитесь, что все внутренние URL-адреса будут иметь вид, подобный /api/something, чтобы гарантировать отсутствие cla sh со страницами пользовательского интерфейса и маршрутизацией.

Это тогда представит пользовательский интерфейс на / и все вещи API на /api как рекомендация.