部署：Vercel/Netlify/Cloudflare Pages

部署模式概览

三种输出模式

部署到 Vercel

# 安装 Vercel 适配器
npx astro add vercel

// astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'server',
  adapter: vercel({
    // Edge Functions（更快，更便宜）
    edgeMiddleware: true,
    // 图片优化（自动使用 Vercel Image Optimization）
    imageService: true,
    // 增量静态再生（ISR）
    isr: {
      expiration: 60 * 60,  // 1 小时重新生成
    },
  }),
});

# 通过 Vercel CLI 部署
npm install -g vercel
vercel

# 或者直接连接 GitHub 仓库，Vercel 自动部署

部署到 Netlify

npx astro add netlify

import netlify from '@astrojs/netlify';

export default defineConfig({
  output: 'server',
  adapter: netlify({
    edgeMiddleware: true,  // 使用 Netlify Edge Functions
  }),
});

Astro <Image> 图片优化

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<!-- 本地图片：自动优化为 WebP，生成 srcset -->
<Image
  src={heroImage}
  alt="英雄图"
  width={800}
  height={400}
  format="webp"
  quality={85}
/>

<!-- 远程图片：需要在 astro.config.mjs 中配置允许的域名 -->
<Image
  src="https://example.com/image.jpg"
  alt="远程图片"
  width={400}
  height={300}
  inferSize  <!-- Astro 5+ 自动推断尺寸 -->
/>

CI/CD 配置（GitHub Actions）

# .github/workflows/deploy.yml
name: Deploy to Vercel

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Type check
        run: npx astro check

      - name: Build
        run: npm run build
        env:
          DATABASE_URL: ${{ secrets.DATABASE_URL }}

      - name: Deploy to Vercel
        uses: vercel/action@v1
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}

适配器选择指南

部署到 Cloudflare Pages

// astro.config.mjs
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: cloudflare({
    mode: 'directory',  // 'directory' 或 'advanced'
    platformProxy: {
      enabled: true,      // 本地开发时模拟 Cloudflare 环境
    },
  }),
});

// 在 API 端点中访问 Cloudflare 绑定
export const GET: APIRoute = async ({ locals }) => {
  // locals.runtime.env 是 Cloudflare 的环境绑定
  const { env } = locals.runtime;

  // 访问 KV 存储
  const value = await env.MY_KV.get('key');

  // 访问 D1 数据库
  const result = await env.DB.prepare('SELECT * FROM posts').all();

  return new Response(JSON.stringify(result.results));
};

本章小结