| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360 |
- import fs from 'node:fs/promises';
- import { URL } from 'node:url';
- import { Transform } from 'node:stream';
- import { Readable } from 'node:stream';
- import { pipeline } from 'node:stream/promises';
- import { serve } from '@hono/node-server';
- import { Hono } from 'hono';
- import { createServer as createNodeServer } from 'node:http';
- import process from 'node:process';
- // 创建 Hono 应用
- const app = new Hono();// API路由
- // Constants
- const isProduction = process.env.NODE_ENV === 'production';
- const port = process.env.PORT || 8080;
- const base = process.env.BASE || '/';
- const ABORT_DELAY = 10000;
- // 解析基础路径为 URL 对象,方便后续处理
- const baseUrl = new URL(base, `http://localhost:${port}`);
- // 使用 Hono 的 serve 启动服务器
- const parentServer = serve({
- fetch: app.fetch,
- createServer: createNodeServer,
- port: port,
- }, () => {
- console.log(`Server started at http://localhost:${port}`);
- });
- // Cached production assets
- // let templateHtml = '';
- // if (isProduction) {
- // templateHtml = await fs.readFile('./dist/client/index.html', 'utf-8');
- // }
- // 生产环境中间件
- let compressionMiddleware;
- let sirvMiddleware;
- if (isProduction) {
- compressionMiddleware = (await import('compression')).default();
- sirvMiddleware = (await import('sirv')).default('./dist/client', {
- extensions: [],
- baseUrl: base
- });
- }
- // Vite 开发服务器
- /** @type {import('vite').ViteDevServer | undefined} */
- let vite;
- if (!isProduction) {
- const { createServer } = await import('vite');
- vite = await createServer({
- server: { middlewareMode: {
- server: parentServer
- },
- hmr: {
- port: 8081,
- clientPort: 443, // 或其他可用端口
- path: 'vite-hmr'
- },
- proxy: {
- '/vite-hmr': {
- target: 'ws://localhost:8081',
- // Proxying WebSocket
- ws: true,
- },
- },
- },
- appType: 'custom',
- base,
- });
- }
- if (!isProduction) {
- // 使用 vite.ssrLoadModule 替代原生 import
- const apiModule = await vite.ssrLoadModule('./src/server/api.ts');
- app.route('/', apiModule.default);
- }else{
- const api = (await import('./dist/api/api.js')).default
- app.route('/', api);
- }
- // 将请求处理逻辑适配为 Hono 中间件
- app.use(async (c, next) => {
- try {
- // 使用 c.env 获取原生请求响应对象(关键修复)
- const req = c.env.incoming;
- const res = c.env.outgoing;
- const url = new URL(req.url, `http://${req.headers.host}`);
- const path = url.pathname;
- // 检查是否匹配基础路径
- if (!path.startsWith(baseUrl.pathname)) {
- return c.text('Not found', 404);
- }
- // 处理基础路径
- // const normalizedUrl = path.replace(baseUrl.pathname, '/') || '/';
- // 开发环境:使用 Vite 中间件
- if (!isProduction && vite) {
- // 使用 Vite 中间件处理请求
- const handled = await new Promise((resolve) => {
- vite.middlewares(req, res, () => resolve(false));
- });
-
- // 如果 Vite 中间件已经处理了请求,直接返回
- if (handled) {
- return c.body;
- }
- }
- // 生产环境:使用 compression 和 sirv 中间件
- else if (isProduction) {
- // 先尝试 compression 中间件
- const compressed = await new Promise((resolve) => {
- compressionMiddleware(req, res, () => resolve(false));
- });
-
- if (compressed) {
- return c.body;
- }
-
- // 再尝试 sirv 中间件处理静态文件
- const served = await new Promise((resolve) => {
- sirvMiddleware(req, res, () => resolve(false));
- });
-
- if (served) {
- return c.body;
- }
- }
- // // 处理所有其他请求的 SSR 逻辑
- // /** @type {string} */
- // let template;
- // /** @type {import('./src/server/index.tsx').render} */
- // let render;
-
- // if (!isProduction && vite) {
- // // 开发环境:读取最新模板并转换
- // template = await fs.readFile('./index.html', 'utf-8');
- // template = await vite.transformIndexHtml(normalizedUrl, template);
- // render = (await vite.ssrLoadModule('/src/server/index.tsx')).render;
- // } else {
- // // 生产环境:使用缓存的模板
- // template = templateHtml;
- // render = (await import('./dist/server/index.js')).render;
- // }
- // let didError = false;
- // let abortController;
- // // 创建一个可读流用于 SSR 渲染内容
- // const [htmlStart, htmlEnd] = template.split(`<!--app-html-->`);
- // const ssrStream = new Readable({ read: () => {} });
-
- // // 写入 HTML 头部
- // ssrStream.push(htmlStart);
- // // 设置响应头和状态码
- // c.header('Content-Type', 'text/html');
-
- // // 处理渲染
- // const { pipe, abort } = render(normalizedUrl, {
- // onShellError() {
- // didError = true;
- // c.status(500);
- // ssrStream.push('<h1>Something went wrong</h1>');
- // ssrStream.push(null); // 结束流
- // },
- // onShellReady() {
- // // 将渲染结果通过管道传入 ssrStream
- // const transformStream = new Transform({
- // transform(chunk, encoding, callback) {
- // ssrStream.push(chunk, encoding);
- // callback();
- // }
- // });
- // pipe(transformStream);
-
- // // 当 transformStream 完成时,添加 HTML 尾部
- // transformStream.on('finish', () => {
- // ssrStream.push(htmlEnd);
- // ssrStream.push(null); // 结束流
- // });
- // },
- // onError(error) {
- // didError = true;
- // console.error(error);
- // },
- // });
- // // 设置超时中止
- // abortController = new AbortController();
- // const abortTimeout = setTimeout(() => {
- // abort();
- // abortController.abort();
- // }, ABORT_DELAY);
- // // 将流通过 Hono 响应返回
- // return c.body(ssrStream, {
- // onEnd: () => {
- // clearTimeout(abortTimeout);
- // }
- // });
- await next()
- } catch (e) {
- if (!isProduction && vite) {
- vite.ssrFixStacktrace(e);
- }
- console.error(e.stack);
- return c.text(e.stack, 500);
- }
- });
- // 将请求处理逻辑适配为 Hono 中间件
- app.use(async (c) => {
-
- try {
- // 使用 c.env 获取原生请求响应对象(关键修复)
- const req = c.env.incoming;
- const res = c.env.outgoing;
- const url = new URL(req.url, `http://${req.headers.host}`);
- const path = url.pathname;
- // 检查是否匹配基础路径
- if (!path.startsWith(baseUrl.pathname)) {
- return c.text('Not found', 404);
- }
- // 处理基础路径
- const normalizedUrl = path.replace(baseUrl.pathname, '/') || '/';
- // 处理所有其他请求的 SSR 逻辑
- /** @type {string} */
- let template;
- /** @type {import('./src/server/index.tsx').render} */
- let render;
-
- if (!isProduction && vite) {
- // 开发环境:读取最新模板并转换
- // template = await fs.readFile('./index.html', 'utf-8');
- const module = (await vite.ssrLoadModule('/src/server/index.tsx'));
- template = module.template;
- template = await vite.transformIndexHtml(normalizedUrl, template);
- render = module.render;
- } else {
- // 生产环境:使用缓存的模板
- // const module = (await import('/src/server/index.tsx'))
- // template = module.template;
- // 读取原始模板
- const module = await import('./dist/server/index.js');
- // 读取 manifest.json 并处理模板
- try {
- // 读取 manifest
- const manifestPath = new URL('./dist/client/.vite/manifest.json', import.meta.url);
- const manifestContent = await fs.readFile(manifestPath, 'utf-8');
- const manifest = JSON.parse(manifestContent);
- // 获取 index.html 对应的资源信息
- const indexManifest = manifest['index.html'];
- if (!indexManifest) {
- throw new Error('manifest 中未找到 index.html 入口配置');
- }
- template = module.template;
- // 替换 CSS 链接
- const cssLinks = indexManifest.css?.map(cssFile => {
- // 结合基础路径生成完整 URL(处理 base 前缀)
- const cssUrl = new URL(cssFile, baseUrl).pathname;
- return `<link href="${cssUrl}" rel="stylesheet" />`;
- }).join('\n') || ''; // 无 CSS 则清空
- // 替换入口脚本
- const jsEntryPath = new URL(indexManifest.file, baseUrl).pathname;
- const entryScript = `<script type="module" src="${jsEntryPath}"></script>`;
- // 执行替换
- template = template
- .replace(/<link href="\/src\/style.css" rel="stylesheet"\/>/, cssLinks)
- .replace(/<script type="module" src="\/src\/client\/index.tsx"><\/script>/, entryScript);
- } catch (err) {
- console.error('生产环境模板处理失败:', err);
- throw err; // 终止启动,避免使用错误模板
- }
- render = module.render;
- }
- let didError = false;
- let abortController;
- // 创建一个可读流用于 SSR 渲染内容
- const [htmlStart, htmlEnd] = template.split(`<!--app-html-->`);
- const ssrStream = new Readable({ read: () => {} });
-
- // 写入 HTML 头部
- ssrStream.push(htmlStart);
- // 设置响应头和状态码
- c.header('Content-Type', 'text/html');
-
- // 处理渲染
- const { pipe, abort } = render(normalizedUrl, {
- onShellError() {
- didError = true;
- c.status(500);
- ssrStream.push('<h1>Something went wrong</h1>');
- ssrStream.push(null); // 结束流
- },
- onShellReady() {
- // 将渲染结果通过管道传入 ssrStream
- const transformStream = new Transform({
- transform(chunk, encoding, callback) {
- ssrStream.push(chunk, encoding);
- callback();
- }
- });
- pipe(transformStream);
-
- // 当 transformStream 完成时,添加 HTML 尾部
- transformStream.on('finish', () => {
- ssrStream.push(htmlEnd);
- ssrStream.push(null); // 结束流
- });
- },
- onError(error) {
- didError = true;
- console.error(error);
- },
- });
- // 设置超时中止
- abortController = new AbortController();
- const abortTimeout = setTimeout(() => {
- abort();
- abortController.abort();
- }, ABORT_DELAY);
- // 将流通过 Hono 响应返回
- return c.body(ssrStream, {
- onEnd: () => {
- clearTimeout(abortTimeout);
- }
- });
- } catch (e) {
- if (!isProduction && vite) {
- vite.ssrFixStacktrace(e);
- }
- console.error(e.stack);
- return c.text(e.stack, 500);
- }
- });
|