搬瓦工部署 Astro 现代网站框架教程

Astro 是一款新兴的现代网站框架，以其独特的 Islands 架构和零 JavaScript 默认策略著称。它允许使用 React、Vue、Svelte 等多种 UI 框架编写组件，同时生成极快的静态页面。Astro 非常适合内容驱动型网站，如博客、营销页面和文档站。本文将介绍如何在搬瓦工 VPS 上部署 Astro 项目。购买搬瓦工 VPS 请参考全部方案，使用优惠码 NODESEEK2026 可享受 6.77% 的折扣。

一、安装 Node.js

apt update && apt upgrade -y
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt install -y nodejs git
node -v

二、创建 Astro 项目

cd /opt
npm create astro@latest mysite
cd mysite
npm install

初始化向导中可以选择模板（博客、文档、空白等）和是否使用 TypeScript。

2.1 项目结构

# /opt/mysite/
#   src/
#     pages/       - 页面路由
#     layouts/     - 布局组件
#     components/  - UI 组件
#     content/     - 内容集合
#   public/        - 静态资源
#   astro.config.mjs

2.2 配置文件

cat > /opt/mysite/astro.config.mjs << 'EOF'
import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://yourdomain.com',
  output: 'static',
  build: {
    assets: '_assets'
  },
  vite: {
    build: {
      cssMinify: true,
    }
  }
});
EOF

三、创建页面和内容

Astro 使用基于文件的路由系统，src/pages/ 目录下的文件自动生成对应路由。页面使用 .astro 格式编写，也支持 Markdown 和 MDX。

3.1 内容集合

Astro 的内容集合功能可以方便地管理博客文章等结构化内容：

mkdir -p /opt/mysite/src/content/blog

cat > /opt/mysite/src/content/config.ts << 'EOF'
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()).optional(),
  }),
});

export const collections = { blog };
EOF

四、构建与部署

4.1 构建静态文件

cd /opt/mysite
npm run build

构建产物在 dist/ 目录中。

4.2 Nginx 部署

apt install nginx -y

cat > /etc/nginx/sites-available/astro.conf << 'EOF'
server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    root /opt/mysite/dist;
    index index.html;

    location / {
        try_files $uri $uri/ $uri.html =404;
    }

    location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml;

    error_page 404 /404.html;
}
EOF

ln -sf /etc/nginx/sites-available/astro.conf /etc/nginx/sites-enabled/
rm -f /etc/nginx/sites-enabled/default
nginx -t && systemctl restart nginx

五、SSR 模式（可选）

如果需要服务端渲染，可以添加 Node.js 适配器：

npx astro add node

# 修改 astro.config.mjs 中的 output 为 'server' 或 'hybrid'

SSR 模式需要使用 PM2 或 Systemd 运行 Node.js 进程，并通过 Nginx 反向代理。

六、集成其他框架

# 添加 React 支持
npx astro add react

# 添加 Vue 支持
npx astro add vue

# 添加 Tailwind CSS
npx astro add tailwind

七、SSL 与自动部署

apt install certbot python3-certbot-nginx -y
certbot --nginx -d yourdomain.com

cat > /opt/mysite/deploy.sh << 'EOF'
#!/bin/bash
cd /opt/mysite
git pull origin main
npm install
npm run build
echo "[$(date)] Astro site deployed"
EOF
chmod +x /opt/mysite/deploy.sh

八、常见问题

Islands 水合问题

Astro 的 Islands 架构默认不发送 JavaScript。如果需要交互组件，使用 client:load、client:visible 等指令控制水合时机。

总结

Astro 是构建内容驱动型网站的优秀选择，零 JS 默认策略带来极致性能。在搬瓦工 VPS 上部署静态模式时资源占用极低。其他现代框架教程包括 Nuxt.js、SvelteKit、Remix 等。购买搬瓦工 VPS 请访问 bwh81.net，使用优惠码 NODESEEK2026 可享受 6.77% 的折扣。