返回介绍

部署你的 Astro 站点至 Netlify

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

Netlify 为网络应用程序和静态网站提供托管和无服务器后端服务。任何 Astro 网站都可以托管在 Netlify 上!

本指南包括通过网站用户操作界面或 Netlify 的 CLI(命令行工具) 部署到 Netlify 的说明。

项目配置

你的 Astro 项目可以通过三种不同的方式部署到 Netlify:作为一个静态网站,一个服务端渲染的网站,或一个边缘渲染的网站。

静态网站

你的 Astro 项目默认就是静态网站。你不需要任何额外的配置就可以将静态的 Astro 网站部署到 Netlify。

SSR 适配器

为你的 Astro 项目开启 SSR 并在 Netlity 上部署,包括使用 Netlify 的边缘函数:

通过以下的 astro add 命令,添加 Netlify 适配器,在你的 Astro 项目中启用 SSR。这一步将会安装适配器并且对你的 astro.config.mjs 文件进行适当的修改。

npx astro add netlify

如果你更倾向于手动安装适配器,那么请完成以下两个步骤:

  1. 使用你喜欢的包管理器将 @astrojs/netlify 适配器 安装到你的项目依赖中。如果你正在使用 npm 或者不确定使用何种包管理器,可以在终端运行以下命令:

    npm install @astrojs/netlify
  2. 在你的 astro.config.mjs 项目配置文件中添加两行新增内容:

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

    你还可使用 Netlify 的边缘函数部署你的项目,即通过在 Netlify 适配器的配置中添加 edgeMiddleware: true

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

如何部署

你可以通过网站用户操作界面或使用 Netlify 的 CLI(命令行工具) 进行部署。无论是静态网站还是 SSR 的 Astro 网站,其过程都是相同的。

网站用户操作界面部署方式

如果你的项目存储在 GitHub、GitLab、BitBucket 或 Azure DevOps 中,你可以使用 Netlify 的网站用户操作界面来部署你的 Astro 网站。

  1. Netlify dashboard 页面上,点击 Add a new site

  2. 选择 Import an existing project

    当你从你的 Git 提供商中导入 Astro 仓库时,Netlify 应该会自动检测并预填充正确的配置设置。

  3. 确保已输入以下设置,然后按下 Deploy 按钮:

    • Build Command: astro build or npm run build
    • Publish directory: dist

    部署后,你将被重定向到站点概览页面。在那里,你可以编辑你站点的详细信息。

根据你的部署配置,未来对源代码库的任何修改都将触发预览和生产部署。

netlify.toml 文件

你可以选择在项目仓库的顶层创建一个新的 netlify.toml 文件,用来配置你的构建命令和发布目录,以及其他项目设置,包括环境变量和重定向。Netlify 将读取此文件并自动配置你的部署。

为了配置默认设置,创建一个 netlify.toml 文件,并填入以下内容:

[build]
  command = "npm run build"
  publish = "dist"
更多信息可以在 Netlify 的博客文章 “部署现有的 Astro Git 仓库” 中找到。

CLI 部署方式

你也可以在 Netlify 上创建一个新的站点,并通过安装和使用 Netlify CLI 来关联你的 Git 仓库。

  1. 全局安装 Netlify CLI 工具

    npm install --global netlify-cli
  2. 运行 netlify login 并按照指示进行登录并授权 Netlify。

  3. 运行 netlify init 并按照指示进行操作。

  4. 确认你的构建命令 (astro build)

    CLI 将自动检测构建设置(astro build)和部署目录(dist),并将提供一个自动生成且有这些对应设置的 netlify.toml 文件

  5. 推送到 Git 来触发构建和部署

    CLI 将向仓库添加一个部署密钥,这意味着每次你使用 git push 时,你的网站都会在 Netlify 上自动重新构建。

更多详情请参阅 Netlify 的文章:使用 Netlify CLI 部署 Astro 网站

设置 Node.js 版本

如果你在 Netlify 上使用的是旧版的 构建镜像(Xenial),请确保你已经设置了 Node.js 的版本。Astro 需要 v18.17.1v20.3.0 或更高版本。

你可以使用下面的方法在 Netlify 中指定 Node.js 版本

  • 在你的项目根目录中存放一个 .nvmrc 文件
  • 在你的网站设置中使用 Netlify 项目面板的 NODE_VERSION 环境变量。

使用 Netlify Functions

在 Astro 中使用 Netlify Functions 无需特殊配置。在你的项目根目录中添加一个 netlify/functions 目录,并按照 Netlify Functions 文档 的指引开始吧!

示例

更多部署指南

Recipes

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

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

发布评论

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