如何部署 Astro 应用到不同的平台（Vercel、Netlify、Node.js）？有哪些部署最佳实践？

Astro 的部署方式取决于你选择的渲染模式（SSG、SSR 或混合模式）。了解不同的部署选项和最佳实践对于成功发布 Astro 项目至关重要。

静态部署（SSG）：

对于纯静态站点，可以将构建输出部署到任何静态托管服务。

1. Vercel 部署：

   bash
   # 安装 Vercel CLI
   npm i -g vercel
   
   # 部署
   vercel

   javascript
   // vercel.json
   {
     "buildCommand": "astro build",
     "outputDirectory": "dist"
   }

2. Netlify 部署：

   bash
   # 安装 Netlify CLI
   npm i -g netlify-cli
   
   # 部署
   netlify deploy --prod

   toml
   # netlify.toml
   [build]
     command = "astro build"
     publish = "dist"
   
   [[redirects]]
     from = "/*"
     to = "/index.html"
     status = 200

3. GitHub Pages 部署：

   javascript
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
   
   export default defineConfig({
     site: 'https://username.github.io',
     base: '/repository-name',
   });

   bash
   # 构建并部署
   npm run build
   # 将 dist 目录内容推送到 gh-pages 分支

服务端部署（SSR）：

对于需要服务端渲染的应用，需要使用适配器。

1. Vercel SSR 部署：

   bash
   npx astro add vercel

   javascript
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
   import vercel from '@astrojs/vercel/server';
   
   export default defineConfig({
     output: 'server',
     adapter: vercel(),
   });

2. Netlify Edge Functions：

   bash
   npx astro add netlify

   javascript
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
   import netlify from '@astrojs/netlify/edge';
   
   export default defineConfig({
     output: 'server',
     adapter: netlify(),
   });

3. Node.js 服务器：

   bash
   npx astro add node

   javascript
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
   import node from '@astrojs/node';
   
   export default defineConfig({
     output: 'server',
     adapter: node({
       mode: 'standalone',
     }),
   });

   bash
   # 构建并运行
   npm run build
   node ./dist/server/entry.mjs

4. Cloudflare Pages：

   bash
   npx astro add cloudflare

   javascript
   // astro.config.mjs
   import { defineConfig } from 'astro/config';
   import cloudflare from '@astrojs/cloudflare';
   
   export default defineConfig({
     output: 'server',
     adapter: cloudflare(),
   });

Docker 部署：

dockerfile
# Dockerfile
FROM node:18-alpine AS builder

WORKDIR /app
COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build

FROM node:18-alpine AS runner

WORKDIR /app
COPY --from=builder /app/package*.json ./
RUN npm ci --production

COPY --from=builder /app/dist ./dist

EXPOSE 4321
CMD ["node", "./dist/server/entry.mjs"]

bash
# 构建和运行 Docker 镜像
docker build -t astro-app .
docker run -p 4321:4321 astro-app

环境变量配置：

bash
# .env.example
PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://...
SECRET_KEY=your-secret-key

javascript
// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  vite: {
    define: {
      'import.meta.env.PUBLIC_API_URL': JSON.stringify(process.env.PUBLIC_API_URL),
    },
  },
});

CI/CD 配置：

yaml
# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
      
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}
          vercel-args: '--prod'

性能优化部署：

1. 启用压缩：

   javascript
   // astro.config.mjs
   export default defineConfig({
     compressHTML: true,
   });

2. 配置 CDN：

   javascript
   // astro.config.mjs
   export default defineConfig({
     build: {
       assets: '_astro',
     },
   });

3. 缓存策略：

   javascript
   // src/middleware.ts
   export const onRequest = async (context, next) => {
     const response = await next();
     
     if (context.url.pathname.startsWith('/_astro/')) {
       response.headers.set('Cache-Control', 'public, max-age=31536000, immutable');
     }
     
     return response;
   };

监控和日志：

typescript
// src/lib/monitoring.ts
export function logDeploymentInfo() {
  console.log({
    version: import.meta.env.PUBLIC_VERSION,
    buildTime: new Date().toISOString(),
    environment: import.meta.env.MODE,
  });
}

// 在入口文件中调用
logDeploymentInfo();

最佳实践：

1. 选择合适的部署平台：

   • 静态站点：Vercel、Netlify、GitHub Pages
   • SSR 应用：Vercel、Netlify Edge、Node.js
   • 边缘计算：Cloudflare Workers、Vercel Edge

2. 环境变量管理：

   • 使用 .env 文件进行本地开发
   • 在部署平台配置生产环境变量
   • 区分公开和私有变量

3. 自动化部署：

   • 使用 CI/CD 管道
   • 自动运行测试
   • 自动部署到生产环境

4. 监控和日志：

   • 设置错误追踪
   • 监控性能指标
   • 记录部署信息

5. 回滚策略：

   • 保留多个部署版本
   • 快速回滚到稳定版本
   • 使用功能标志

Astro 提供了灵活的部署选项，可以根据项目需求选择最适合的部署策略。