이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.
문서 개요/
从 Netlify 迁移至 EdgeOne Pages/

从 Netlify 迁移至 EdgeOne Pages

本指南将帮助您将 Netlify 项目平滑迁移至 EdgeOne Pages。


1.准备工作：查找构建命令和发布目录

首先，我们需要找到您 Netlify 项目的构建命令和输出目录：
1. 登录仪表板，找到要迁移的项目。
2. 进入 Site configuration（站点配置），选择 Build & deploy（构建与部署）选项。
3. 在 Build settings（构建设置）部分，记录 Build command （构建命令）和 Publish directory（发布目录）的值。







例如：
构建命令: npm run build
发布目录: .next

这些信息将在项目配置中使用。


2.配置迁移：处理重定向和标头

如果您的项目使用了 _redirects 跟 _headers 文件或在 netlify.toml 文件中配置了重定向和自定义标头，需要将这些配置迁移到 EdgeOne Pages 的 edgeone.json 文件中。

在迁移之前，我们需要了解您现有的 Netlify 配置，并将其转换为 Pages 可以理解的格式。

以下是两者的对比示例:

Netlify 的 netlify.toml 配置：
[build]
  command = "npm run build"
  publish = "build"

[[redirects]]
  from = "/articles"
  to = "/blogs"
  status = 301

[[headers]]
  source = "/*"

  [[headers.headers]]
    key = "X-Frame-Options"
    value = "DENY"

  [[headers.headers]]
    key = "Cache-Control"
    value = "max-age=7200"

[[headers]]
  source = "/assets/*"

  [[headers.headers]]
    key = "Cache-Control"
    value = "max-age=31536000"
在这个例子中，我们可以看到构建命令、发布目录、重定向规则和自定义标头的配置。

在 EdgeOne Pages 中，我们需要创建一个 edgeone.json 文件来包含这些配置：
{
  "buildCommand": "npm run build",
  "outputDirectory": "build",
  "redirects": [
    {
      "source": "/articles",
      "destination": "/blog",
      "statusCode": 301
    }
  ],
  "headers": [
    {
      "source": "/*",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "Cache-Control",
          "value": "max-age=7200"
        }
      ]
    },
    {
      "source": "/assets/*",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "max-age=31536000"
        }
      ]
    }
  ]
}
详细的配置选项可以参考 edgeone.json 文档。


3.函数迁移：从 Netlify 到 EdgeOne Pages

两个平台在语法和使用方式上有一些差异。以下是一个简单的对比示例：

Netlify Edge Function 示例：
export default async (request, context) => {
  return new Response("Hello, World!", {
    headers: { "content-type": "text/html" },
  });
};

EdgeOne Pages Function 示例：
export function onRequest(context) {
  return new Response("Hello, World!", {
    headers: { "content-type": "text/html" },
  });
}

主要差异：
1. 函数定义：
1.1 Netlify 使用默认导出的异步函数。
1.2 Pages 使用命名的 onRequest 函数（或 onRequestGet、onRequestPost 等）。
2. 参数：
2.1 Netlify 函数接收 request 和 context 作为分开的参数。
2.2 Pages 函数接收一个 context 对象，其中包含 request。
3. 响应方式：
3.1 两者都使用 Response 对象返回响应，这一点是相似的。
4. 运行时环境：
4.1 Netlify Edge Functions 使用 Deno 运行时。
4.2 Pages Functions 基于 EdgeOne 边缘函数实现，提供了 EdgeOne 边缘节点的 Serverless 代码执行环境。

迁移建议：
将默认导出函数改为命名的 onRequest 函数：
// Netlify
export default async (request, context) => {
  // 函数体
};

// EdgeOne Pages
export function onRequest(context) {
  // 函数体
}
调整参数使用：
// Netlify
const { geo } = context;

// EdgeOne Pages
const { request } = context;
const geo = request.eo.geo;
保持 Response 对象的使用方式，这部分基本不需要改变。
检查并调整任何 Deno 特定的 API 使用。Pages Functions 可能不支持某些 Deno 特有的功能，需要寻找替代方案，可通过社群联系我们。
文件命名可能需要调整。Netlify 使用 .js、.ts 或 .edge.js 后缀，而 Pages 目前支持 .js、.ts、.cjs、.jsx、.tsx。

详细的函数使用可以参考 Pages Functions 文档。


4.项目部署：在 EdgeOne Pages 创建新项目

准备工作完成后，在 Pages 上创建并部署项目：
1. 登录腾讯云控制台，进入 Pages 服务。
2. 点击"创建项目"，选择您的 GitHub 仓库。
3. 在项目配置中，填入之前记录的构建命令和发布目录。
4. 点击"开始部署"按钮，Pages 将自动构建和部署您的项目。


5.域名配置：添加自定义域名

Netlify 和 Pages 在域名配置方面有一些区别：
1. 在 Pages 添加域名：
1.1 在控制台中，为您的项目添加相同的自定义域名。
2. 更新 DNS 记录：
2.1 如果您使用 Netlify DNS，需要将域名转移到另一个 DNS 提供商。
2.2 如果使用外部 DNS，只需更新现有记录：
2.2.1 将 A 记录或 ALIAS 记录改为 CNAME 记录。
2.2.2 将 CNAME 记录指向 Pages 提供的域名。
3. 验证 DNS 设置：
3.1 使用 dig 或在线 DNS 查询工具确认 DNS 更改已生效。
4. 等待 HTTPS 证书配置：
4.1 Pages 将自动为您的域名配置 HTTPS 证书。

详细的域名添加过程可以参考 域名管理文档。

通过完成上述步骤，您已经成功将 Netlify 项目迁移到了 EdgeOne Pages。两个平台在某些方面有相似之处，但在强大的基础设施上，我们针对 Pages 产品特点进行了智能刷新预热等优化，提供开箱即用的使用体验。此外，Pages 在公测阶段相对竞品限制更少，为开发者提供更多选择的灵活性。在客户支持上，我们提供更及时的响应，致力于为开发者打造优质的产品体验。

如果您在迁移过程中遇到任何问题，欢迎查阅 EdgeOne Pages 的官方文档。