使用云原生构建静态网站并发布至EdgeOne Pages

简介

内容

使用云原生构建导出静态网站，并发布至EdgeOne Pages。

缘起

EdgeOne pages 支持源码托管（github/Gitee）触发构建部署，也支持直接上传静态文件来部署。然当前EdgeOne Pages的构建环境可定制部分很少，且性能一般，因此才有了此文：利用云原生构建强大计算能力、灵活的自定义开发与构建环境的能力，弥补当前open edge pages构建环境的不足。

步骤

准备工作

为了聚焦于主题本身，请阅读实操之前，确认已具备以下知识和实操经验

1、云原生构建的基本使用，含密钥仓库的使用

2、EdgeOne Pages的基本使用:含项目创建，域名设置，api_token创建

3、Next.js以及静态导出的基础

操作步骤

1. 云原生构建创建一个项目，并完成基础配置

打开云原生构建,新建一个项目,打开云原生开发环境。

本示例项目来自于开源blog模板:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/blog ./

设置静态导出，关键设置next.config.ts:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
   allowedDevOrigins: ['*.cnb.run'],
  webpack:(config) => {
      config.resolve.fallback = { fs: false };
      return config;
  },
  output: 'export',
  distDir: 'dist',
  transpilePackages:['next-mdx-remote'],
};

export default nextConfig;

编译后，将输出文件打包为zip文件，首次在edgeone创建项目时会用到。

2. Open EdgeOne Pages创建项目

在腾讯云创建一个pages项目并设置基本信息，路径是：全部云产品-CDN与边缘-CDN与边缘平台-边缘安全加速平台EO

pages支持三种方式创建项目：代码库（github/gitee）、模板、直接上传

这里选择使用直接上传代码的方式来创建项目¹，

按照导引创建项目，并填写关键参数：项目名称、加速范围（全球（含中国）、全球（不含中国））、域名²

创建api_token并将token和项目名称填入云原生构建里面的密钥仓库。

3. 云原生构建创建一个构建任务

云原生构建支持多种方式触发构建，喜欢全自动的可以设置push代码触发，喜欢半自动的可以设置tag触发，喜欢手工的可以设置界面自定义按钮触发。

本实例演示了自定义界面按钮触发，使用EdgeOne CLI提供的CI 流水线部署命令来发布编译好的静态文件.

使用的主要CLI的命令：

edgeone pages deploy ./dist -n $PAGE_PROJECT -t $EDGEONE_API_TOKEN

$PAGE_PROJECT: 是项目名称
$EDGEONE_API_TOKEN: 是api_token

关于更多EdgeOne CLI的更多信息见官方文档

相关代码

1、demo网站：https://yiqiu.cool

2、源码: https://cnb.cool/ikunkun/demo/openedgepages

一些细节见源码。

注