[Bug]: How to handle middleware when changing express to koa in ssr-express-with-manifest #4799

sytana · 2025-03-15T07:19:50Z

sytana
Mar 15, 2025

Version

System:
    OS: macOS 12.7.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 559.75 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Browsers:
    Chrome: 134.0.6998.89
    Safari: 15.6.1
  npmPackages:
    @rsbuild/core: ^1.2.19 => 1.2.19 
    @rsbuild/plugin-stylus: ^1.0.8 => 1.0.8 
    @rsbuild/plugin-vue: ^1.0.7 => 1.0.7

Details

我用rsbuild+koa+vue3实现SSR项目，开发环境项目启动后资源加载不正确，js/css资源全部404，但是单独新标签页打开是正常的，我怀疑是rsbuild中间件使用koa-connect转换后存在兼容问题，但调试了很久一直解决不了。

完整代码我放在了这个仓库：https://github.com/sytana/rsbuild-koa-vue3-ssr ，烦请大佬帮我看一下，真的谢谢！！
（pnpm i && pnpm dev:xiezq.www 即可启动项目）

rsbuild配置：

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
import { pluginStylus } from '@rsbuild/plugin-stylus';
import AutoImport from 'unplugin-auto-import/rspack';
import Components from 'unplugin-vue-components/rspack';

export default defineConfig({
    plugins: [
        pluginVue(),
        pluginStylus(),
    ],
    tools: {
        rspack: {
            plugins: [
                AutoImport({
                    //
                }),
                Components({
                    //
                }),
            ]
        },
        htmlPlugin: false
    },
    server: {
        middlewareMode: true,
    },
    environments: {
        'xiezq.www.client': {
            source: {
                entry: {
                    index: './src/pages/xiezq.www/index.client.js',
                },
            },
            output: {
                target: 'web',
                manifest: true,
                distPath: {
                    root: './dist/xiezq.www.client',
                    css: 'css',
                    cssAsync: 'css/async',
                    js: 'js',
                    jsAsync: 'js/async',
                    svg: 'images',
                    font: 'fonts',
                    wasm: 'wasm',
                    image: 'images',
                    media: 'media',
                    assets: 'others'
                }
            },
        },
        'xiezq.www.server': {
            source: {
                entry: {
                    index: './src/pages/xiezq.www/index.server.js',
                },
            },
            output: {
                target: 'node',
                distPath: {
                    root: './dist/xiezq.www.server',
                }
            }
        },
    },
});

开发环境启动脚本：

import path from 'path';
import fse from 'fs-extra';
import { createRsbuild, loadConfig, logger } from '@rsbuild/core';
import Koa from 'koa';
import koaConnect from 'koa-connect';
import koaStatic from 'koa-static';

const templateHtml = fse.readFileSync(path.resolve(process.cwd(), 'src/server/template.html'), 'utf-8');

let manifest;

const { content } = await loadConfig();

const rsbuild = await createRsbuild({ rsbuildConfig: content });

rsbuild.onDevCompileDone(async () => {
    manifest = await fse.promises.readFile(path.resolve(process.cwd(), 'dist/xiezq.www.client/manifest.json'), 'utf-8');
})

const koa = new Koa();

const rsbuildServer = await rsbuild.createDevServer();

// koa.use(koaStatic(path.join(process.cwd(), 'dist/xiezq.www.client')));

koa.use(koaConnect(rsbuildServer.middlewares));

koa.use(async (ctx, next) => {
    if (ctx.request.path == '/') {
        try {
            const { createApp } = await rsbuildServer.environments['xiezq.www.server'].loadBundle('index');

            const html = await createApp();

            const { entries } = JSON.parse(manifest);

            const { js = [], css = []} = entries['index'].initial;

            const scriptTags = js.map((url) => `<script src="${url}" crossorigin defer></script>`).join('\n');
            const styleTags = css.map((file) => `<link rel="stylesheet" href="${file}">`).join('\n');

            ctx.response.status = 200;
            ctx.response.type = 'text/html';
            ctx.response.body = templateHtml.replace('<!--app-content-->', html).replace('<!--app-head-->', `${scriptTags}\n${styleTags}`);
        } catch (err) {
            logger.error('SSR render error, downgrade to CSR...\n', err);
            await next();
        }
    } else {
        await next();
    }
});

const httpServer = koa.listen(rsbuildServer.port, () => {
    rsbuildServer.afterListen();
    console.log(`Server started at http://localhost:${rsbuildServer.port}`);
});

rsbuildServer.connectWebSocket({ server: httpServer });

// return {
//     close: async () => {
//         await rsbuildServer.close();
//         httpServer.close();
//     },
// };