将你的 Astro 站点部署到 Vercel

你可以使用 Vercel 以零配置将 Astro 站点部署到其全球边缘网络。

¥You can use Vercel to deploy an Astro site to their global edge network with zero configuration.

本指南包括通过网站 UI 或 Vercel 的 CLI 部署到 Vercel 的说明。

¥This guide includes instructions for deploying to Vercel through the website UI or Vercel’s CLI.

项目配置

¥Project Configuration

你的 Astro 项目可以作为静态站点或服务器端渲染站点 (SSR) 部署到 Vercel。

¥Your Astro project can be deployed to Vercel as a static site, or as a server-side rendered site (SSR).

静态站点

¥Static Site

默认情况下，你的 Astro 项目是静态站点。你不需要任何额外的配置即可将静态 Astro 站点部署到 Vercel。

¥Your Astro project is a static site by default. You don’t need any extra configuration to deploy a static Astro site to Vercel.

SSR 适配器

¥Adapter for SSR

要在 Astro 项目中启用 SSR 并在 Vercel 上部署：

¥To enable SSR in your Astro project and deploy on Vercel:

使用以下 astro add 命令添加 Vercel 适配器以在 Astro 项目中启用 SSR。这将一步安装适配器并对 astro.config.mjs 文件进行适当的更改。

¥Add the Vercel adapter to enable SSR in your Astro project with the following astro add command. This will install the adapter and make the appropriate changes to your astro.config.mjs file in one step.

npx astro add vercel

pnpm astro add vercel

yarn astro add vercel

如果你更愿意手动安装适配器，请完成以下两个步骤：

¥If you prefer to install the adapter manually instead, complete the following two steps:

Install the @astrojs/vercel adapter to your project’s dependencies using your preferred package manager.
- npm
- pnpm
- Yarn
终端窗口
npm install @astrojs/vercel
终端窗口
pnpm add @astrojs/vercel
终端窗口
yarn add @astrojs/vercel

Add two new lines to your astro.config.mjs project configuration file.

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

export default defineConfig({
  output: 'server',
  adapter: vercel(),
});

如何部署

¥How to deploy

你可以通过网站 UI 或使用 Vercel 的 CLI（命令行接口）部署到 Vercel。对于静态站点和 SSR Astro 站点，该过程是相同的。

¥You can deploy to Vercel through the website UI or using Vercel’s CLI (command line interface). The process is the same for both static and SSR Astro sites.

网站 UI 部署

¥Website UI Deployment

Push your code to your online Git repository (GitHub, GitLab, BitBucket).
Import your project into Vercel.
Vercel will automatically detect Astro and configure the right settings.
Your application is deployed! (e.g. astro.vercel.app)

在你的项目导入和部署后，所有后续推送到分支都将生成预览部署，对生产分支（通常为“主要”）所做的所有更改都将导致生产部署。

¥After your project has been imported and deployed, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly “main”) will result in a Production Deployment.

Learn more about Vercel’s Git Integration.

CLI 部署

¥CLI Deployment

Install the Vercel CLI and run vercel to deploy.
- npm
- pnpm
- Yarn
终端窗口
npm install -g vercel vercel
终端窗口
pnpm add -g vercel vercel
终端窗口
yarn global add vercel vercel
Vercel will automatically detect Astro and configure the right settings.
When asked Want to override the settings? [y/N], choose N.
Your application is deployed! (e.g. astro.vercel.app)

使用 vercel.json 进行项目配置

¥Project config with vercel.json

你可以使用 vercel.json 覆盖 Vercel 的默认行为并配置其他设置。例如，你可能希望将标头附加到部署中的 HTTP 响应。

¥You can use vercel.json to override the default behavior of Vercel and to configure additional settings. For example, you may wish to attach headers to HTTP responses from your Deployments.

Learn more about Vercel’s project configuration.