AnalogJS项目中SSR模式下Vite开发服务器端口自动推断方案

背景介绍

在Angular应用开发中，使用AnalogJS框架结合Vite构建工具时，开发者在服务器端渲染(SSR)模式下会遇到一个常见问题：当使用ngSrc指令加载图片资源时，由于Domino无法正确解析相对路径，导致图片资源加载失败。这个问题在开发环境下尤为明显，因为Vite开发服务器的端口通常是动态分配的。

问题分析

在SSR模式下，当Angular尝试通过window.location.href解析资源路径时，Domino会将其解析为根路径/。这意味着任何相对路径的资源请求（如/assets/image.png）都会失败，因为服务器无法正确构建完整的URL。在生产环境中，这个问题可以通过配置imageLoader来解决，但在开发环境下则需要更灵活的解决方案。

现有解决方案的局限性

目前开发者常用的临时解决方案包括：

1. 在Vite配置中固定开发服务器端口
2. 通过环境变量手动指定开发端口
3. 在资源路径处理函数中硬编码完整的开发服务器URL

这些方法虽然可行，但存在以下缺点：

• 需要手动配置，不够自动化
• 硬编码的端口号降低了配置的灵活性
• 代码可维护性较差

技术实现方案

方案一：自动推断开发服务器端口

通过分析Vite开发服务器的请求对象，我们可以自动获取当前运行的服务器端口和协议信息。具体实现如下：

export default async function render(
  _path: string,
  document: string,
  { req }: { req: IncomingMessage & { originalUrl: string } },
) {
  const protocol = getRequestProtocol(req);
  const { originalUrl, headers } = req;

  return await renderApplication(bootstrap, {
    document,
    url: `${protocol}://${headers.host}${originalUrl}`,
  });
}

function getRequestProtocol(
  req: IncomingMessage,
  opts: { xForwardedProto?: boolean } = {},
) {
  if (
    opts.xForwardedProto !== false &&
    req.headers['x-forwarded-proto'] === 'https'
  ) {
    return 'https';
  }
  return (req.connection as any)?.encrypted ? 'https' : 'http';
}

方案二：框架层面的集成解决方案

AnalogJS框架可以在底层自动处理这个问题，提供两种配置方式：

1. 自动推断模式('INFER')：框架自动检测开发服务器配置
2. 手动指定模式：开发者可以显式配置基础URL

这种方案的优势在于：

• 对开发者透明，无需额外配置
• 保持开发和生产环境行为一致
• 支持动态端口分配

最佳实践建议

1. 开发环境配置：建议使用自动推断模式，充分利用Vite的动态端口特性
2. 生产环境配置：仍然推荐使用明确的imageLoader配置
3. 资源路径处理：统一使用框架提供的工具函数处理资源路径

未来优化方向

1. 在框架层面提供统一的HTTP客户端拦截器，自动处理基础URL
2. 增强开发服务器集成，支持更复杂的部署场景（如反向代理）
3. 提供更灵活的资源路径解析策略

总结

通过自动推断Vite开发服务器端口，可以显著改善AnalogJS项目在SSR模式下的开发体验。这种方案不仅解决了ngSrc指令的资源加载问题，还为更复杂的部署场景提供了基础支持。开发者可以根据项目需求选择自动推断或手动配置的方式，实现更灵活的资源管理。