server.js 5.6 KB

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