2
0

server.js 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  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 { Hono } from 'hono';
  7. import { createServer as createNodeServer } from 'node:http';
  8. import process from 'node:process';
  9. import { createAdaptorServer } from '@hono/node-server'
  10. // 创建 Hono 应用
  11. const app = new Hono();// API路由
  12. // 常量定义
  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. console.log('========================================');
  18. console.log('开始初始化服务器...');
  19. console.log(`环境: ${isProduction ? '生产环境' : '开发环境'}`);
  20. console.log(`端口: ${port}`);
  21. console.log(`基础路径: ${base}`);
  22. console.log('========================================');
  23. // 解析基础路径为 URL 对象,方便后续处理
  24. const baseUrl = new URL(base, `http://localhost:${port}`);
  25. console.log(`基础URL解析完成: ${baseUrl.href}`);
  26. // 先创建服务器实例
  27. console.log('正在创建服务器实例...');
  28. const parentServer = createAdaptorServer({
  29. fetch: app.fetch,
  30. createServer: createNodeServer,
  31. port: port,
  32. })
  33. console.log('服务器实例创建成功');
  34. // 生产环境中间件
  35. let compressionMiddleware;
  36. let sirvMiddleware;
  37. if (isProduction) {
  38. console.log('生产环境: 加载压缩和静态文件中间件...');
  39. compressionMiddleware = (await import('compression')).default();
  40. sirvMiddleware = (await import('sirv')).default('./dist/client', {
  41. extensions: [],
  42. baseUrl: base
  43. });
  44. console.log('生产环境中间件加载完成');
  45. }
  46. // Vite 开发服务器
  47. /** @type {import('vite').ViteDevServer | undefined} */
  48. let vite;
  49. if (!isProduction) {
  50. console.log('开发环境: 初始化 Vite 开发服务器...');
  51. const { createServer } = await import('vite');
  52. vite = await createServer({
  53. server: { middlewareMode: {
  54. server: parentServer
  55. },
  56. hmr: {
  57. port: 8081,
  58. clientPort: 443, // 或其他可用端口
  59. path: 'vite-hmr'
  60. },
  61. proxy: {
  62. '/vite-hmr': {
  63. target: 'ws://localhost:8081',
  64. // 代理 WebSocket
  65. ws: true,
  66. },
  67. },
  68. },
  69. appType: 'custom',
  70. base,
  71. });
  72. console.log('Vite 开发服务器初始化完成');
  73. }
  74. // 加载 API 路由
  75. if (!isProduction) {
  76. console.log('开发环境: 从 Vite 加载 API 路由...');
  77. const apiModule = await vite.ssrLoadModule('./src/server/api.ts');
  78. app.route('/', apiModule.default);
  79. console.log('API 路由加载完成');
  80. }else{
  81. console.log('生产环境: 加载编译后的 API 路由...');
  82. const api = (await import('./dist/api/api.js')).default
  83. app.route('/', api);
  84. console.log('API 路由加载完成');
  85. }
  86. // 请求处理中间件 - 通用逻辑
  87. app.use(async (c, next) => {
  88. try {
  89. // 使用 c.env 获取原生请求响应对象
  90. const req = c.env.incoming;
  91. const res = c.env.outgoing;
  92. const url = new URL(req.url, `http://${req.headers.host}`);
  93. const path = url.pathname;
  94. // 检查是否匹配基础路径
  95. if (!path.startsWith(baseUrl.pathname)) {
  96. return c.text('未找到', 404);
  97. }
  98. // 开发环境:使用 Vite 中间件
  99. if (!isProduction && vite) {
  100. // 使用 Vite 中间件处理请求
  101. const handled = await new Promise((resolve) => {
  102. vite.middlewares(req, res, () => resolve(false));
  103. });
  104. // 如果 Vite 中间件已经处理了请求,直接返回
  105. if (handled) {
  106. return c.body;
  107. }
  108. }
  109. // 生产环境:使用 compression 和 sirv 中间件
  110. else if (isProduction) {
  111. // 先尝试 compression 中间件
  112. const compressed = await new Promise((resolve) => {
  113. compressionMiddleware(req, res, () => resolve(false));
  114. });
  115. if (compressed) {
  116. return c.body;
  117. }
  118. // 再尝试 sirv 中间件处理静态文件
  119. const served = await new Promise((resolve) => {
  120. sirvMiddleware(req, res, () => resolve(false));
  121. });
  122. if (served) {
  123. return c.body;
  124. }
  125. }
  126. await next()
  127. } catch (e) {
  128. if (!isProduction && vite) {
  129. vite.ssrFixStacktrace(e);
  130. }
  131. console.error('请求处理中间件错误:', e.stack);
  132. return c.text('服务器内部错误', 500);
  133. }
  134. });
  135. // 请求处理中间件 - SSR 渲染逻辑
  136. app.use(async (c) => {
  137. try {
  138. // 使用 c.env 获取原生请求响应对象
  139. const req = c.env.incoming;
  140. const res = c.env.outgoing;
  141. const url = new URL(req.url, `http://${req.headers.host}`);
  142. const path = url.pathname;
  143. // 检查是否匹配基础路径
  144. if (!path.startsWith(baseUrl.pathname)) {
  145. return c.text('未找到', 404);
  146. }
  147. // 处理基础路径
  148. const normalizedUrl = path.replace(baseUrl.pathname, '/') || '/';
  149. console.log(`处理请求: ${normalizedUrl}`);
  150. // 处理所有其他请求的 SSR 逻辑
  151. /** @type {string} */
  152. let template;
  153. /** @type {import('./src/server/index.tsx').render} */
  154. let render;
  155. if (!isProduction && vite) {
  156. console.log('开发环境: 加载模板和渲染函数...');
  157. // 开发环境:读取最新模板并转换
  158. const module = (await vite.ssrLoadModule('/src/server/index.tsx'));
  159. template = module.template;
  160. template = await vite.transformIndexHtml(normalizedUrl, template);
  161. render = module.render;
  162. console.log('开发环境模板处理完成');
  163. } else {
  164. // 生产环境:使用缓存的模板
  165. console.log('生产环境: 加载编译后的模板和渲染函数...');
  166. const module = await import('./dist/server/index.js');
  167. // 读取 manifest.json 并处理模板
  168. try {
  169. // 读取 manifest
  170. const manifestPath = new URL('./dist/client/.vite/manifest.json', import.meta.url);
  171. const manifestContent = await fs.readFile(manifestPath, 'utf-8');
  172. const manifest = JSON.parse(manifestContent);
  173. console.log('生产环境: 成功读取 manifest.json');
  174. // 获取 index.html 对应的资源信息
  175. const indexManifest = manifest['index.html'];
  176. if (!indexManifest) {
  177. throw new Error('manifest 中未找到 index.html 入口配置');
  178. }
  179. template = module.template;
  180. // 替换 CSS 链接
  181. const cssLinks = indexManifest.css?.map(cssFile => {
  182. // 结合基础路径生成完整 URL(处理 base 前缀)
  183. const cssUrl = new URL(cssFile, baseUrl).pathname;
  184. return `<link href="${cssUrl}" rel="stylesheet" />`;
  185. }).join('\n') || ''; // 无 CSS 则清空
  186. // 替换入口脚本
  187. const jsEntryPath = new URL(indexManifest.file, baseUrl).pathname;
  188. const entryScript = `<script type="module" src="${jsEntryPath}"></script>`;
  189. // 执行替换
  190. template = template
  191. .replace(/<link href="\/src\/style.css" rel="stylesheet"\/>/, cssLinks)
  192. .replace(/<script type="module" src="\/src\/client\/index.tsx"><\/script>/, entryScript);
  193. console.log('生产环境模板处理完成');
  194. } catch (err) {
  195. console.error('生产环境模板处理失败:', err);
  196. throw err; // 终止启动,避免使用错误模板
  197. }
  198. render = module.render;
  199. }
  200. let didError = false;
  201. let abortController;
  202. // 创建一个可读流用于 SSR 渲染内容
  203. const [htmlStart, htmlEnd] = template.split(`<!--app-html-->`);
  204. const ssrStream = new Readable({ read: () => {} });
  205. // 写入 HTML 头部
  206. ssrStream.push(htmlStart);
  207. // 设置响应头和状态码
  208. c.header('Content-Type', 'text/html');
  209. // 处理渲染
  210. const { pipe, abort } = render(normalizedUrl, {
  211. onShellError() {
  212. didError = true;
  213. c.status(500);
  214. ssrStream.push('<h1>服务器渲染出错</h1>');
  215. ssrStream.push(null); // 结束流
  216. },
  217. onShellReady() {
  218. console.log(`开始渲染页面: ${normalizedUrl}`);
  219. // 将渲染结果通过管道传入 ssrStream
  220. const transformStream = new Transform({
  221. transform(chunk, encoding, callback) {
  222. ssrStream.push(chunk, encoding);
  223. callback();
  224. }
  225. });
  226. pipe(transformStream);
  227. // 当 transformStream 完成时,添加 HTML 尾部
  228. transformStream.on('finish', () => {
  229. ssrStream.push(htmlEnd);
  230. ssrStream.push(null); // 结束流
  231. console.log(`页面渲染完成: ${normalizedUrl}`);
  232. });
  233. },
  234. onError(error) {
  235. didError = true;
  236. console.error('渲染过程出错:', error);
  237. },
  238. });
  239. // 设置超时中止
  240. abortController = new AbortController();
  241. const abortTimeout = setTimeout(() => {
  242. console.log(`渲染超时,终止请求: ${normalizedUrl}`);
  243. abort();
  244. abortController.abort();
  245. }, ABORT_DELAY);
  246. // 将流通过 Hono 响应返回
  247. return c.body(ssrStream, {
  248. onEnd: () => {
  249. clearTimeout(abortTimeout);
  250. }
  251. });
  252. } catch (e) {
  253. if (!isProduction && vite) {
  254. vite.ssrFixStacktrace(e);
  255. }
  256. console.error('SSR 处理错误:', e.stack);
  257. return c.text('服务器内部错误', 500);
  258. }
  259. });
  260. // 启动服务器
  261. console.log('准备启动服务器...');
  262. parentServer.listen(port, () => {
  263. console.log('========================================');
  264. console.log(`服务器已成功启动!`);
  265. console.log(`访问地址: http://localhost:${port}`);
  266. console.log(`环境: ${isProduction ? '生产环境' : '开发环境'}`);
  267. console.log('========================================');
  268. })
  269. // 处理服务器关闭事件
  270. process.on('SIGINT', () => {
  271. console.log('正在关闭服务器...');
  272. parentServer.close(() => {
  273. console.log('服务器已关闭');
  274. process.exit(0);
  275. });
  276. });