从 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"}]}]}
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 函数:
// Netlifyexport default async (request, context) => {// 函数体};// EdgeOne Pagesexport function onRequest(context) {// 函数体}
调整参数使用:
// Netlifyconst { geo } = context;// EdgeOne Pagesconst { request } = context;const geo = request.eo.geo;
保持 Response 对象的使用方式,这部分基本不需要改变。
检查并调整任何 Deno 特定的 API 使用。Pages Functions 可能不支持某些 Deno 特有的功能,需要寻找替代方案,可通过社群联系我们。
文件命名可能需要调整。Netlify 使用 .js、.ts 或 .edge.js 后缀,而 Pages 目前支持 .js、.ts、.cjs、.jsx、.tsx。
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 在公测阶段相对竞品限制更少,为开发者提供更多选择的灵活性。在客户支持上,我们提供更及时的响应,致力于为开发者打造优质的产品体验。