Astro（SSR）动态子域名实现方案咨询

1. 开发阶段本地子域名配置 #

开发时模拟多子域名访问，可通过以下两步实现：

• 修改本地hosts文件：添加通配符或指定子域名映射到本地IP。Windows用户编辑C:\Windows\System32\drivers\etc\hosts，Linux/macOS用户编辑/etc/hosts，加入：

  127.0.0.1 *.localhost
  127.0.0.1 foo.localhost
  127.0.0.1 bar.localhost
  

  注：部分系统不支持hosts通配符，可手动添加常用子域名条目。
• 配置Astro开发服务器允许任意主机：在astro.config.mjs中设置服务器监听所有IP，确保子域名请求能被接收：

  export default defineConfig({
    server: {
      host: '0.0.0.0',
      port: 4321
    },
    output: 'server' // 启用SSR模式
  });
  

  启动开发服务器后，即可通过foo.localhost:4321、bar.localhost:4321等地址测试不同子域名场景。

2. 单项目整合所有子域名内容及路由实现 #

完全无需为每个子域名创建独立项目，所有内容可整合到一个Astro SSR项目中，核心思路是通过请求头解析子域名，动态渲染对应内容：

核心实现逻辑 #

在页面或API路由中，通过request对象获取请求的Host头，解析出子域名后匹配对应内容：

• 页面组件示例（以根页面src/pages/index.astro为例）：

  ---
  export async function getServerSideProps({ request }) {
    const host = request.headers.get('host');
    // 解析子域名（过滤端口号，排除www等通用前缀）
    const [subdomain, ...rest] = host.split(':')[0].split('.');
    const validSubdomain = ['www', 'example'].includes(subdomain) ? null : subdomain;
  
    // 根据子域名获取对应内容（可从数据库、本地JSON文件或CMS拉取）
    let content = '';
    if (validSubdomain) {
      content = await fetch(`/data/${validSubdomain}.json`).then(res => res.text());
    } else {
      content = '主站点默认内容';
    }
  
    return { props: { subdomain: validSubdomain, content } };
  }
  ---
  <html lang="zh-CN">
    <head>
      <title>{subdomain ? `${subdomain}子站点` : '主站点'}</title>
    </head>
    <body>
      <main>
        {subdomain ? <h1>{subdomain}专属内容</h1> : <h1>主站点首页</h1>}
        <div>{content}</div>
      </main>
    </body>
  </html>
  

• API路由示例（src/pages/api/content.ts）：

  export async function GET({ request }) {
    const host = request.headers.get('host');
    const subdomain = host.split(':')[0].split('.')[0];
    // 根据子域名返回对应API数据
    const data = await getApiDataForSubdomain(subdomain);
    return new Response(JSON.stringify(data), {
      headers: { 'Content-Type': 'application/json' }
    });
  }
  

路由扩展 #

如果需要更细分的路由，可结合Astro的动态路由（如src/pages/[...slug].astro），在getServerSideProps中同时解析子域名和路径，实现复杂内容分发逻辑。

3. 部署环节建议 #

部署时需重点处理域名解析、SSL证书和平台配置三个核心环节：

• 通配符域名解析：在域名服务商后台添加通配符DNS记录（*.yourdomain.com），指向部署服务器IP或平台负载均衡地址。
• 通配符SSL证书：申请通配符SSL证书（如Let's Encrypt免费证书），确保所有子域名支持HTTPS。主流部署平台（Vercel、Netlify、Cloudflare等）均支持自动配置。
• 平台配置：
  • 确保项目以SSR模式部署（astro.config.mjs中设置output: 'server'）。
  • 在平台域名设置中添加通配符域名（*.yourdomain.com）并完成验证。
  • 可借助平台边缘函数（Edge Functions）提前处理子域名路由，比如拦截请求后根据子域名重定向或传递参数到Astro页面。
• 安全与缓存：
  • 实现子域名白名单机制，过滤未授权子域名，防止恶意访问。
  • 针对不同子域名配置独立缓存策略，通过Cache-Control响应头或平台规则优化加载速度。

内容的提问来源于stack exchange，提问作者Dune Stat