部署 Astro 站点
岛屿架构 SSG/SSR，默认零 JS，部署到 Vercel、Netlify、Cloudflare 或静态主机。
平台进阶
为什么
Astro 岛屿架构默认零 JavaScript，仅水合交互组件，生成最快的静态站点。可选择集成 React/Vue/Svelte 组件实现交互。
平台即服务采用率 2024 年增长 24%，团队从虚拟机管理转向 git push 部署。the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research)，PaaS 层捕获了大多数新工作负载。
何时使用
内容密集站点（博客、文档、营销）且速度至上时用 Astro。需要动态内容或用户会话时加 SSR 适配器。
如何做
1. 构建 — npm run build 输出 dist/（静态）或 .vercel/.netlify（适配器）
2. 静态部署 — 上传 dist/ 到任何 CDN，无需服务器
3. Vercel — npx astro add vercel，自动配置 SSR + 边缘
4. Netlify — npx astro add netlify，serverless 函数
5. Cloudflare — npx astro add cloudflare，运行于 Workers
6. Node — npx astro add node，运行 node ./dist/server/entry.mjs
7. 水合 — client:load、client:visible、client:idle 指令
8. 集成 — 选择性加 React/Vue/Svelte/Tailwind
示例
// astro.config.mjs — Vercel 适配器 + React 岛屿
import { defineConfig } from "astro/config";
import vercel from "@astrojs/vercel";
import react from "@astrojs/react";
export default defineConfig({
adapter: vercel(),
integrations: [react()],
output: "hybrid", // 静态 + 选择性 SSR
});
// src/pages/index.astro — 岛屿水合
---
import Counter from "../components/Counter.jsx";
---
<html><body>
<h1>静态 HTML，零 JS</h1>
<Counter client:visible /> {/* 仅可见时水合 */}
</body></html>
// 纯静态部署（无适配器）
// npm run build → dist/ → 上传到任何 CDN
常见问题
- ⚠岛屿未水合 — 忘记 client: 指令，组件保持静态
- ⚠静态主机上 SSR 端点 404 — output: 'static' 但用了服务端代码，切换 'hybrid'
- ⚠React/Vue 组件冲突 — 多框架集成共享状态问题
最佳实践
- ✓默认用 client:idle 或 client:visible — 除非首屏关键组件否则避免 client:load
- ✓尽量用 output: 'static' — 仅在真正需要 SSR 端点时加适配器
- ✓设置健康检查和优雅关闭 — 处理 SIGTERM 以在退出前排空进行中的请求