返回介绍

部署你的 Astro 站点至 Vercel

发布于 2024-06-05 21:19:56 字数 13230 浏览 0 评论 0 收藏 0

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

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

项目配置

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

静态站点

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

SSR 适配器

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

使用以下 astro add 命令为你的 Astro 项目中添加 Vercel 适配器 以开启 SSR。此命令将安装适配器并同时自动对你的 astro.config.mjs 文件进行适当的配置。

npx astro add vercel

如果你更喜欢手动安装适配器,你需要完成以下两个步骤:

  1. 使用你喜欢的包管理器将 @astrojs/vercel 适配器 安装到项目的依赖项中。如果你正在使用 npm 或不确定想要使用什么包管理器,请在终端中运行:

      npm install @astrojs/vercel
  2. 在你的 astro.config.mjs 配置文件中添加以下配置。

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

如何部署

你可以通过 Vercel 的网站 UI 或使用 Vercel 提供的官方 CLI(命令行界面)部署 Astro 站点到 Vercel。部署静态站点和 SSR 站点的过程相同。

通过网站 UI 部署

  1. 将你的代码推送到你的在线 Git 存储库(GitHub、GitLab、BitBucket 等)。

  2. 导入你的项目 至 Vercel。

  3. Vercel 将自动检测 Astro 项目并自动为其配置正确的设置。

  4. 你的应用程序已部署完成了!(例如:astro.vercel.app

在你的项目完成导入和部署后,所有后续内容推送到(生产分支外的)分支都将自动生成 预览部署(Preview Deployments),以及对生产分支(通常是名为“main”的分支)所做的任何更改都将自动被部署为 生产部署(Production Deployment)

详细请参考 Vercel 文档的 Git 集成部分。

通过 CLI 部署

  1. 安装 Vercel CLI 并运行 vercel 以进行部署。

    npm install -g vercel
    vercel
  2. Vercel 将自动检测 Astro 项目并自动为其配置正确的设置。

  3. 当被问及 Want to override the settings? [y/N](想要覆盖配置吗?),选择 N(No)。

  4. 你的应用程序已部署完成了!(例如:astro.vercel.app

使用 vercel.json 的项目配置

你可以使用 vercel.json 来覆盖 Vercel 的默认行为并配置其他设置。例如,你可以在部署时为 HTTP 响应附加标头。

详细请参考 Vercel 文档的 项目配置

更多部署指南

Recipes

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文