边缘安全加速平台 EO Astro

一、核心特点

Astro 提供了以下核心特性：

·群岛架构（Islands Architecture）：Astro 采用群岛架构设计，将页面中的交互组件视为独立的“岛屿”，只在需要时进行客户端水合，其余保持静态。

·服务端渲染（SSR）：Astro 的服务端渲染能够在不需要客户端 JavaScript 的情况下渲染动态数据，同时不会减慢不需要该功能的页面。

·静态站点生成（SSG）：支持预渲染页面，构建时生成静态 HTML。

·多框架支持：使用 Astro 时，可以继续使用其它的框架（Vue、React、Svelte）。支持在项目中混合使用多个框架组件。

·内容集合：使用类型安全的前置元数据组织 Markdown 和 MDX 内容。

·API 路由：用于动态数据处理的服务端 API 端点。

二、快速开始

在 EdgeOne Makers 上快速部署 Astro 的项目，可以通过以下方式：

·通过 Git 仓库导入 Astro 项目。

·从 Makers 模板库选择 Astro 模板进行部署。

了解 Astro 在 Makers 部署的表现，可以点击下方的 Makers 的 Astro 示例模板：

查看更多 Makers 的 Astro 模板，可以访问 Astro 模板库。

三、Makers 对 Astro 的特性支持

下表是 Makers 目前支持 Astro 的关键特性。如下表所示：

未支持的 Astro 特性目前正在 Makers 平台规划中。建议关注 @edgeone/astro 适配器的版本更新，及时获取最新功能和改进。

四、1. 安装 Makers 的 Astro 适配器

Makers 的 Astro 适配器名为 @edgeone/astro，用于将 Astro 应用的构建结果自动适配到 Makers 平台。类似 @astrojs/vercel，它可以与 Makers 脚手架工具配合，将本地 Astro 项目打包并部署至 Makers 平台。适配器源代码已开源，欢迎访问 astro-adapter 仓库查看源码、提交 Issue 或参与贡献。以下为适配器的安装命令：

npm install @edgeone/astro

五、2. 配置 astro.config.mjs

按照 Astro 的配置文件的 API，用户需要在 Astro 的项目中的astro.config.mjs 配置 Makers 平台的适配器。配置示例如下：

import { defineConfig } from "astro/config";import edgeoneAdapter from "@edgeone/astro";export default defineConfig({ adapter: edgeoneAdapter(),});

六、3. 部署项目

Git 连接部署

集成好适配器后，你可以将项目提交到 GitHub，GitLab 等平台，然后使用我们的 导入 Git 仓库。

CLI 部署

也可以安装 Makers 的脚手架工具，详细安装和使用方法请参考 EdgeOne CLI。配置完成后，使用 `edgeone makers deploy` 命令部署项目。在部署过程中，CLI 会先自动构建项目，然后将构建产物上传并发布。

注意：EdgeOne CLI 版本要求 ≥ 1.2.0，部署前请先检查版本，避免部署失败。

七、Astro 的 Makers 适配器配置

适配器支持以下配置选项：

·outDir（可选）：指定构建输出目录，默认为 .edgeone。示例：outDir: ".edgeone"。

·includeFiles（可选）：强制包含的文件列表，用于确保某些文件被打包到服务端渲染代码中。支持 glob 模式匹配。示例：includeFiles: ["src/locales/**", "public/config.json"]。

·excludeFiles（可选）：排除的文件列表，用于排除不需要被打包到服务端渲染代码中的文件。主要用于排除 node_modules 中的特定文件。支持 glob 模式匹配。示例：excludeFiles: ["node_modules/.cache/**"]。

以下为配置示例：

import { defineConfig } from "astro/config";import edgeoneAdapter from "@edgeone/astro";export default defineConfig({ output: "server", adapter: edgeoneAdapter({ outDir: ".edgeone", includeFiles: ["src/locales/**"], excludeFiles: ["node_modules/.cache/**"], }),});

八、静态站点生成 (SSG)

可以使用 Astro 来生成完全静态的站点。配置为静态导出模式，可按照如下示例修改 astro.config.mjs：

export default defineConfig({ output: 'static' // 启用静态导出});

请注意：在 Astro 的 SSG（静态站点生成）模式下，所有页面在构建时预渲染为静态 HTML，没有服务端运行时，因此无法使用服务端功能，包括 API 路由（src/pages/api/*）、中间件（src/middleware.ts）等任何需要服务端执行的功能。

九、服务端渲染 (SSR)

Makers 适配器还支持 Astro 的服务端渲染功能，在 astro.config.mjs 中设置下方配置启用 SSR 模式：

export default defineConfig({ output: 'server' // 启用服务端渲染});

SSR 模式下允许你在服务器端动态生成 HTML 内容，提供更好的 SEO 支持、更快的首屏加载速度，以及动态内容的实时渲染能力。

除了纯 SSR 模式，Makers 还支持 Astro 的混合模式。在混合模式下，可以灵活控制每个页面的渲染方式：

·静态页面：在页面中设置 export const prerender = true，该页面会在构建时预渲染为静态 HTML 文件。

·动态页面：未设置 prerender 为 true 的页面将使用 SSR 动态渲染。