Astro + RaisFast

用 RaisFast 作为后端构建全栈 Astro 站点。服务端渲染、API 路由和动态功能。

概述

Astro 是一个现代 Web 框架，支持静态生成和服务端渲染。RaisFast 作为后端无缝集成，提供数据拉取、评论、搜索、认证和电商功能。

Astro    → 渲染页面（静态或 SSR）
RaisFast → 提供数据、认证、评论、搜索、支付

前提条件

已设置 Astro 项目
已安装 RaisFast（安装指南 →）

步骤 1：启动 RaisFast

raisfast

步骤 2：构建时拉取数据

在 Astro 中，构建时从 RaisFast 拉取数据：

---
// src/pages/index.astro
const res = await fetch("http://localhost:9898/api/v1/posts");
const { data } = await res.json();
---

<h1>博客</h1>
<ul>
  {data.items.map(post => (
    <li>
      <a href={`/blog/${post.slug}`}>{post.title}</a>
      <time>{new Date(post.published_at).toLocaleDateString()}</time>
    </li>
  ))}
</ul>

步骤 3：动态评论组件

创建一个交互式 Astro 岛屿组件用于评论：

---
// src/components/Comments.astro
---
<div id="comments" data-api="/api/v1/comments"></div>
<script>
  const container = document.getElementById('comments')!;
  const apiBase = container.dataset.api;

  async function loadComments() {
    const url = new URL(apiBase, window.location.origin);
    url.searchParams.set('post_id', location.pathname);
    const res = await fetch(url);
    const { data } = await res.json();

    container.innerHTML = data.items.map((c: any) => `
      <div class="comment">
        <strong>${c.author_name}</strong>
        <p>${c.content}</p>
      </div>
    `).join('') + `
      <form id="comment-form">
        <input name="author_name" placeholder="昵称" required>
        <textarea name="content" placeholder="评论内容" required></textarea>
        <button type="submit">提交</button>
      </form>`;

    document.getElementById('comment-form')!.addEventListener('submit', async (e) => {
      e.preventDefault();
      const form = e.target as HTMLFormElement;
      await fetch(apiBase, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          post_id: location.pathname,
          author_name: (form.author_name as HTMLInputElement).value,
          content: (form.content as HTMLTextAreaElement).value,
        }),
      });
      loadComments();
    });
  }

  loadComments();
</script>

步骤 4：搜索组件

---
// src/components/Search.astro
---
<div id="search-widget">
  <input type="text" id="search-input" placeholder="搜索..." />
  <div id="search-results"></div>
</div>

<script>
  const input = document.getElementById('search-input') as HTMLInputElement;
  const results = document.getElementById('search-results')!;

  input.addEventListener('input', () => {
    if (input.value.length < 2) return;
    fetch(`/api/v1/search?q=${encodeURIComponent(input.value)}`)
      .then(r => r.json())
      .then(({ data }) => {
        results.innerHTML = data.items.map((p: any) => `
          <a href="${p.url}">${p.title}</a>
          <p>${p.excerpt}</p>
        `).join('');
      });
  });
</script>

步骤 5：SSR 模式（可选）

如果需要服务端渲染，切换 Astro 到 SSR 模式：

// astro.config.mjs
export default defineConfig({
  output: 'server',
});

SSR 模式下，每次请求从 RaisFast 获取最新数据，内容更新无需重新构建。

步骤 6：部署

# 静态模式
astro build
# 将 dist/ 目录部署到 CDN

# SSR 模式
astro build
# 部署到 Node.js adapter、Vercel 或 Cloudflare

如果前端和 API 在不同域名，配置 RaisFast 的 CORS：

RAISFAST_CORS_ORIGINS=https://yourdomain.com