【CNB】CNB搭配EO，快速构建nextjs静态站点

背景

在座的各位或多或少都有个网站吧，大家是用什么技术栈，什么方式部署自己的网站呢。传统的方式可以是服务器部署，但成本很固定，单纯拿来部署静态网页有一些浪费，这时候Edgeone（EO）Pages就为了解决这个问题。

在半年前，我分享过使用EOPages功能托管静态网站的教程：EdgeonePages入门实践 —— 低成本网站托管新方案。但EO Pages的功能相对简单，相当于根据你的代码，运行某些命令，然后生成出来的文件当作网站进行部署，对于react、vue和原生的需求是足够的。

但是人的需求是无限的，有些场景EO就有些不够用了，比如nextjs超大项目，再或者部署的时候调用了一些超级耗性能的方法，EO就会报错，毕竟它只是个轻量的产品。

准备

域名

实名备案，这个不多说，在大陆开展网站工作必须做的。

Edgeone

开通Edgeone Pages：https://console.cloud.tencent.com/edgeone/pages

CNB

打开：https://cnb.cool，微信登录后新建组织，怎么喜欢怎么来

别偷我组织名

创建仓库，可以以此为基础从0开发，也可以使用cnb-init-from（下文会提到）来进行仓库迁移。也可以直接使用我们的demo：https://cnb.cool/arsrna/next-cnb-eo-demo

CNB

上文提到了，EO Pages的Pages是帮你托管静态文件的，意思就是它单纯当个文件存储器，然后当个静态服务器给用户发送html、css、js、图片视频等一系列静态资源。自带的CI/CD作用也只是把源代码构建成上述的静态资源。当然了，Edgeone也自带有Function功能，它是一个serverless函数，但并不兼容nextjs/nuxtjs API路由或者SSR这样的用法。

CI/CD、流水线，听起来比较高大上的东西，其实只是听起来高大上。流水线很简单，生产车间里面把原料一站式变成产品的过程，从一堆铝一堆铜经过CNC、抛光、PCBA、SMT、测试等等等等一大堆流程变成MacBook，就是流水线的作用。这里的原料就是咱的源代码，产品就是上文提到的静态资源产物，意思就是你只要给代码和流水线配置，比如安装依赖，运行某些代码，最后输出一堆文件，就是流水线做的事情。

CNB基于Docker生态，对环境、缓存、插件进行抽象，通过声明式的语法，帮助开发者以更酷的方式构建软件。官网在这：https://docs.cnb.cool/。一个文件就能描述整个流水线要做的事情，从配置到构建一站式完成。

初始化仓库（从零开始）

首先需要新建一个仓库，在上文刚刚创建好的组织里面创建一个

接下来有两种方式进行初始化，一种可以从零开始，也就是克隆空仓到本地后开发，然后再push上去；还有一种可以直接从现有环境进行，这里我们以现有的DEMO项目为例进行开发（https://cnb.cool/arsrna/next-cnb-eo-demo）。

在创建完之后点击大大的「云原生开发」按钮，进入CNB的云原生开发环境

点击WebIDE打开，然后在终端输入

cnb-init-from https://cnb.cool/arsrna/next-cnb-eo-demo

手还没离开键盘，CNB就已经帮我们把仓库初始化好了，关掉页面，刷新刚刚的仓库，再次点击云原生开发，来到我们的新环境。

因为这里用的是我自用的nodejs开发环境，在进入后会提示wakatime api密钥输入，可以忽略，觉得烦的话可以去侧栏插件删了它。

嵌入现有项目（迁移至CNB）

把https://cnb.cool/arsrna/next-cnb-eo-demo里面下列文件复制到本地对应路径

• .cnb.yml -> 项目根目录
• next.config.ts -> 项目根目录，并对比配置，修改output为export
• 修改.cnb.yml的配置，在原文README.md里已经说明
• 修改.cnb.yml中eo_deploy阶段的配置，在原文README.md里已经说明

原文密钥仓库配置可参考：https://docs.cnb.cool/zh/repo/secret.html

开发

nextjs不过多介绍，这里不是nextjs教程，按照正常开发流程，写各种各样的代码就行。

使用pnpm i趁你不注意瞬间安装完依赖包

然后npm run dev，然后ports面板里面CNB自动将3000端口映射到了公网，可以预览当前开发代码的效果，就跟本地开发一样了，在webide中修改，对应预览页面会实时更新。

如果能够正常刷新显示和开发，说明CNB的开发环境配置是没有任何问题的

部署配置

构建静态资源

这里沿用的是nextjs的package.json，其他框架同理，在运行npm run build后，由于前面设置了静态输出，在运行命令之后会构建静态的资源

在.cnb.yml里面，配置如下

  push:
    eo_deploy:
      runner:
        cpus: 32
      stages:
        - name: build
          image: node:20-alpine
          script:
            - npm i -g pnpm
            - pnpm i
            - npm run build
        - name: 部署我的 eo pages 正式环境
          imports:
            - https://cnb.cool/arsrna/env/-/blob/main/tencent.yml
          image: tencentcom/deploy-eopages:latest
          script: edgeone pages deploy ./out -n eo-cnb-demo -t $EO_SECRET

描述起来就是整个流程是在push的时候执行的，使用了32核心64GB的机器，流水线名称叫做eo_deply，第一步安装依赖然后构建静态页面，第二步将静态资源上传到EO Pages。

部署配置

首先要在EO Pages里面新建一个token

新建一个密钥仓库（如果没有）。

然后在里面新建一个文件（如果没有），这里以tencent.yml为例，在里面编辑输入

# 这里的EO_SECRET可以自己定义
EO_SECRET: "上面获取到的token"

最后复制URL栏的地址，则为此密钥定义的文件地址，把它替换到第二步的imports属性里

修改部署阶段script为下面的值

edgeone pages deploy ./out -n 项目名称 -t $EO_SECRET

• ./out 是静态输出的位置，根据代码框架自行修改
• EO项目名称需要按照EO Pages的要求，英文、-、数字。

然后提交代码一气呵成

域名及其他配置

来到EO Pages控制台，如果一切正常就可以看到我们刚刚部署的项目了

在项目设置里面，添加自定义域名，按要求设置解析，几分钟后，就可以从域名直接访问了。

从此以后，只要仓库有push事件，CNB就会帮我们自动构建，EO帮我们自动部署，你需要做的，就是第一次设置，以后好好写代码就可以了，剩下的CI/CD帮你完成。