server.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. import fs from 'node:fs/promises';
  2. import { URL } from 'node:url';
  3. import { Transform } from 'node:stream';
  4. import { Readable } from 'node:stream';
  5. import { pipeline } from 'node:stream/promises';
  6. import { serve } from '@hono/node-server';
  7. import { Hono } from 'hono';
  8. import { createServer as createNodeServer } from 'node:http';
  9. // 创建 Hono 应用
  10. const app = new Hono();
  11. // Constants
  12. const isProduction = process.env.NODE_ENV === 'production';
  13. const port = process.env.PORT || 5173;
  14. const base = process.env.BASE || '/';
  15. const ABORT_DELAY = 10000;
  16. // 解析基础路径为 URL 对象,方便后续处理
  17. const baseUrl = new URL(base, `http://localhost:${port}`);
  18. // Cached production assets
  19. let templateHtml = '';
  20. if (isProduction) {
  21. templateHtml = await fs.readFile('./dist/client/index.html', 'utf-8');
  22. }
  23. // 生产环境中间件
  24. let compressionMiddleware;
  25. let sirvMiddleware;
  26. if (isProduction) {
  27. compressionMiddleware = (await import('compression')).default();
  28. sirvMiddleware = (await import('sirv')).default('./dist/client', {
  29. extensions: [],
  30. baseUrl: base
  31. });
  32. }
  33. // Vite 开发服务器
  34. /** @type {import('vite').ViteDevServer | undefined} */
  35. let vite;
  36. if (!isProduction) {
  37. const { createServer } = await import('vite');
  38. vite = await createServer({
  39. server: { middlewareMode: true },
  40. appType: 'custom',
  41. base,
  42. });
  43. }
  44. // 将请求处理逻辑适配为 Hono 中间件
  45. app.use(async (c) => {
  46. try {
  47. // 使用 c.env 获取原生请求响应对象(关键修复)
  48. const req = c.env.incoming;
  49. const res = c.env.outgoing;
  50. const url = new URL(req.url, `http://${req.headers.host}`);
  51. const path = url.pathname;
  52. // 检查是否匹配基础路径
  53. if (!path.startsWith(baseUrl.pathname)) {
  54. return c.text('Not found', 404);
  55. }
  56. // 处理基础路径
  57. const normalizedUrl = path.replace(baseUrl.pathname, '/') || '/';
  58. // 开发环境:使用 Vite 中间件
  59. if (!isProduction && vite) {
  60. // 使用 Vite 中间件处理请求
  61. const handled = await new Promise((resolve) => {
  62. vite.middlewares(req, res, () => resolve(false));
  63. });
  64. // 如果 Vite 中间件已经处理了请求,直接返回
  65. if (handled) {
  66. return c.body;
  67. }
  68. }
  69. // 生产环境:使用 compression 和 sirv 中间件
  70. else if (isProduction) {
  71. // 先尝试 compression 中间件
  72. const compressed = await new Promise((resolve) => {
  73. compressionMiddleware(req, res, () => resolve(false));
  74. });
  75. if (compressed) {
  76. return c.body;
  77. }
  78. // 再尝试 sirv 中间件处理静态文件
  79. const served = await new Promise((resolve) => {
  80. sirvMiddleware(req, res, () => resolve(false));
  81. });
  82. if (served) {
  83. return c.body;
  84. }
  85. }
  86. // 处理所有其他请求的 SSR 逻辑
  87. /** @type {string} */
  88. let template;
  89. /** @type {import('./src/entry-server.ts').render} */
  90. let render;
  91. if (!isProduction && vite) {
  92. // 开发环境:读取最新模板并转换
  93. template = await fs.readFile('./index.html', 'utf-8');
  94. template = await vite.transformIndexHtml(normalizedUrl, template);
  95. render = (await vite.ssrLoadModule('/src/entry-server.tsx')).render;
  96. } else {
  97. // 生产环境:使用缓存的模板
  98. template = templateHtml;
  99. render = (await import('./dist/server/entry-server.js')).render;
  100. }
  101. let didError = false;
  102. let abortController;
  103. // 创建一个可读流用于 SSR 渲染内容
  104. const [htmlStart, htmlEnd] = template.split(`<!--app-html-->`);
  105. const ssrStream = new Readable({ read: () => {} });
  106. // 写入 HTML 头部
  107. ssrStream.push(htmlStart);
  108. // 设置响应头和状态码
  109. c.header('Content-Type', 'text/html');
  110. // 处理渲染
  111. const { pipe, abort } = render(normalizedUrl, {
  112. onShellError() {
  113. didError = true;
  114. c.status(500);
  115. ssrStream.push('<h1>Something went wrong</h1>');
  116. ssrStream.push(null); // 结束流
  117. },
  118. onShellReady() {
  119. // 将渲染结果通过管道传入 ssrStream
  120. const transformStream = new Transform({
  121. transform(chunk, encoding, callback) {
  122. ssrStream.push(chunk, encoding);
  123. callback();
  124. }
  125. });
  126. pipe(transformStream);
  127. // 当 transformStream 完成时,添加 HTML 尾部
  128. transformStream.on('finish', () => {
  129. ssrStream.push(htmlEnd);
  130. ssrStream.push(null); // 结束流
  131. });
  132. },
  133. onError(error) {
  134. didError = true;
  135. console.error(error);
  136. },
  137. });
  138. // 设置超时中止
  139. abortController = new AbortController();
  140. const abortTimeout = setTimeout(() => {
  141. abort();
  142. abortController.abort();
  143. }, ABORT_DELAY);
  144. // 将流通过 Hono 响应返回
  145. return c.body(ssrStream, {
  146. onEnd: () => {
  147. clearTimeout(abortTimeout);
  148. }
  149. });
  150. } catch (e) {
  151. if (!isProduction && vite) {
  152. vite.ssrFixStacktrace(e);
  153. }
  154. console.error(e.stack);
  155. return c.text(e.stack, 500);
  156. }
  157. });
  158. // 使用 Hono 的 serve 启动服务器
  159. serve({
  160. fetch: app.fetch,
  161. createServer: createNodeServer,
  162. port: port,
  163. }, () => {
  164. console.log(`Server started at http://localhost:${port}`);
  165. });