Размещение приложения React в Express возвращает ERR_CONTENT_DECODING_FAILED

Question

У меня есть приложение реагирования, созданное с использованием create-react-app, я хотел бы использовать экспресс-приложение для его размещения.

Я написал экспресс-приложение следующим образом:

const express = require('express')
const path = require('path')

const app = express()
console.log(path.resolve(__dirname, '../build'))
app.use(
  express.static(
    path.resolve(__dirname, '../build'),
    { index: false,
      fallthrough: true,
      setHeaders: function (res, path, stat) {
        if (stat && stat.size && /\.\w{8}(\.chunk)?\.(js|css)$/.test(path)) {
          res.set('Content-Encoding', 'gzip')
        } else if (stat && stat.size && /service-worker\.js$/.test(path)) {
          res.set('Cache-Control', 'no-cache, max-age=0')
        }
      }
    }
  )
)

app.get('/healthz', (_, res) => {
  res.append('Cache-Control', 'no-cache, no-store, max-age=0')
  res.sendStatus(200)
})

app.get('*', (_, res) => {
  res.sendFile(path.resolve(__dirname, '../build/index.html'))
})

if (!module.parent) {
  app.listen(3000)
}

module.exports = app

Я создаю свое приложение, используя "build": "react-scripts build",, который помещает вывод в папку сборки.Однако, когда я пытаюсь разместить приложение в Chrome, я вижу следующее:

Мое приложение структурировано следующим образом:

Answer 1

просто добавьте "/" к вашей маршрутизации и используйте path.join, чтобы отправить собранный файл Клинту.

const express = require('express')
const path = require('path')

const app = express()
console.log(path.resolve(__dirname, '../build'))
app.use(
  express.static(
    path.resolve(__dirname, '../build'),
    { index: false,
      fallthrough: true,
      setHeaders: function (res, path, stat) {
        if (stat && stat.size && /\.\w{8}(\.chunk)?\.(js|css)$/.test(path)) {
          res.set('Content-Encoding', 'gzip')
        } else if (stat && stat.size && /service-worker\.js$/.test(path)) {
          res.set('Cache-Control', 'no-cache, max-age=0')
        }
      }
    }
  )
)

app.get('/healthz', (_, res) => {
  res.append('Cache-Control', 'no-cache, no-store, max-age=0')
  res.sendStatus(200)
})

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

if (!module.parent) {
  app.listen(3000)
}

module.exports = app