Как обслуживать одни и те же статические файлы независимо от маршрута? - PullRequest
Новая
       17

Как обслуживать одни и те же статические файлы независимо от маршрута?

0 голосов
/ 23 сентября 2018

У меня есть приложение реакции.С веб-паком я строю для производства.Теперь я пытаюсь настроить небольшой сервер koa для обслуживания статических файлов, сгенерированных веб-пакетом, для производства.

Итак, я сделал это 

import Koa from 'koa'
import serve from 'koa-static'

const app = new Koa()

app.use(serve('dist/'))

app.listen(3001)

Где dist/ - каталог, в котором находятся файлы(index.html, пакет и т. д.).Это работает хорошо, но только для маршрута '/' (localhost: 3001 /). В моем приложении я использую реагирующий маршрутизатор, поэтому мне нужно перейти к / login (localhost: 3001 / login) в качестве примера.Но когда я пытаюсь, я получаю "Не найдено".С devServer (через веб-пакет) этот маршрут работает хорошо.Мне просто нужно всегда служить / дистанции, независимо от маршрута.Как это сделать с коа?

Ответы [ 3 ]

0 голосов
/ 23 сентября 2018

Если koa похож на express-static, это нормально, что он возвращает «Not Found», потому что единственный присутствующий файл - это «index.html».Мое решение 

import fs from 'fs';


app.use(serve('dist/'));
// If the file is not found by koa
// intercept all request and return index.html
// this way you can manage the request in React 
app.use((ctx, next) => {
    ctx.type = 'html';
    ctx.body = fs.readFileSync('./dist/index.html');
});
0 голосов
/ 23 сентября 2018

Хорошо, я наконец выиграл 

import Koa from 'koa'
import serve from 'koa-static'
import fs from 'fs'
import path from 'path'

const app = new Koa()
const dist = path.join(__dirname, 'dist')
let validRoutes

fs.readdir(dist, (err, files) => {
  if (err) return console.log('Unable to scan directory: ' + err)
  validRoutes = files
})

function isRouteValid (url) {
  if (!validRoutes || !url) return false
  return validRoutes.find(route => url.slice(1) === route)
}

app.use(async (ctx, next) => {
  if (!isRouteValid(ctx.url)) ctx.path = 'index.html'
  await next()
})

app.use(serve(dist))

app.listen(3010)
0 голосов
/ 23 сентября 2018

Один из вариантов - перехватить клиентские маршруты реакции-маршрутизатора в Koa и переписать их в '/', чтобы загрузить index.html и активы клиента. 

const REACT_ROUTER_PATHS = [
  '/login',
  '/logout',
  '/other-client-path'
];

app
  .use(async (ctx, next) => {
    if (REACT_ROUTER_PATHS.includes(ctx.request.path)) {
      ctx.request.path = '/';
    }
    await next();
  })
  .use(serve('dist/'));
...