前言：为什么我总是对部署感到头疼？

乱弹琴。 说实话， 在座的各位或多或少都有个网站吧，大家是用什么技术栈，什么方式部署自己的网站呢？这真是个让人头秃的问题。传统的方式可以是服务器部署， 但成本很固定，单纯拿来部署静态网页有一些浪费，这时候EdgeonePages就为了解决这个问题。但是 人的需求是无限的，有些场景EO就有些不够用了比如nextjs超大项目，再或者部署的时候调用了一些超级耗性能的方法，EO就会报错，毕竟它只是个轻量的产品。

在半年前，我分享过使用EOPages功能托管静态网站的教程：EdgeonePages入门实践 —— 低成本网站托管新方案。但EO Pages的功能相对简单， 相当于根据你的代码，运行某些命令，然后生成出来的文件当作网站进行部署，对于react、vue和原生的需求是足够的。但是部署在 vercel 上访问有时候很慢， 于是就决定部署在服务器上，那如果你也需要将一个 Next.js 静态项目部署在服务器，这篇文章对你会有帮助，我会从 0 到 1 完成部署工作，文末我特别写了一些我的踩坑。然后点击， 然后我们填写站点信息，这里我们是有 Nginx 的，如果你没有，可以现在去安装一下等会要用。

实名备案，这个不多说在大陆开展网站工作必须做的。开通Edgeone Pages，打开控制台，微信登录后新建组织，怎么喜欢怎么来别偷我组织名。创建仓库，可以以此为基础从0开发，也可以使用cnb-init-from来进行仓库迁移。也可以直接使用我们的demo，稳了！。

Next.js 复习一下那些枯燥的概念

在开始折腾之前， 我们还是得老老实实看看这些概念，虽然很枯燥，但是很有用。Next.js 是一个为 React 构建的轻量级的服务器端渲染框架,它带来了许多生产环境中所需的功能,比方说:服务器端渲染、 静态站点生成、代码拆分、路由和WebPack整合等.Next.js入门教程:快速搭建和部署静态网站.next.config.js39B.

这里沿用的是nextjs的package.json,其他框架同理,在运行npm run build后,由于前面设置了静态输出,在运行命令之后会构建静态的资源.自带的CI/CD作用也只是把源代码构建成上述的静态资源.

静态渲染是一种服务器渲染策略,我们在构建应用程序时生成 HTML 页面.这意味着在生产中,当我们运行 next build 时会生成 HTML 页面.在本章中,我们将了解什么是静态站点生成、 我emo了。 静态站点生成的好处以及如何从外部源获取数据时实现静态站点生成。

静态站点生成是另一个特性,它允许开发者在构建时预先生成静态页面. - 使用create-next-app命令或Next.js脚手架快速启动一个新项目.Ne 这是可以说的吗？ xt.js作为建立在React.js之上的框架, 了React的能力,使其不仅可以用来开发单页应用,还能处理服务器端渲染和静态站点生成等更为复杂的应用场景。

Jamstack是一种现代的网站构建架构,它依赖于预先构建的静态网站和通过API动态获取的数据.Jamify博客系统利用Jamstack的原则,让博客可以快速地分发到全球,一边仍能提供动态内容.收藏在介绍next-cms-ghost这个项目时,我们先说说需要了解几个关键的概念和知识点,包括Jamify博客系统、 Next.js框架、无头CMS Ghost以及它们是如何协同工作的，摸个底。。

就这？ 这通常涉及到了项目代码的构建和部署. 2. **静态站点生成**:Next.js 的一个核心特性是能够静态生成网站.它允许开发者以声明性的方式编写React组件,并且能够通过内置路由和后端功能快速构建网站。

技术栈的噪音与选择

技术排版,LaTeX,CNB,云原生开发,markdown,论文CNB搭配EO,快速构建nextjs静态站点网站,传统的方式可以是服务器部署,但成本很固定,单纯拿来部署静态网页有一些浪费,这时候EdgeonePages就为了解决这个问题。.技术cnb,云原生构建,eo,edgeone,腾讯云,网站搭建编程最佳搭子,10分钟手搓网页版2048小游戏编程最佳搭子,10分钟手搓网页版2048小游戏。

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

CI/CD、 流水线：听起来高大上的东西

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

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

前言CNB 是腾讯云 CODING 团队推出的全新产品 云原生构建 ,对标 GitHub;内置加速服务,可快速访问 GitHub、DockerHub 等资源;还能在 Pipeline 中将代码同步至其他平台 好吧好吧... ,非常适合国内开发者.本文介绍了如何使用腾讯云 CNB构建和部署 Maven 项目,通过 .cnb.yml 文件配置流水线任务,结合 YAML 锚点与并行任务机制,实现对 Maven 项目的自动化构建与部署。

实战开始：从零开始的折腾

先说说需要新建一个仓库，在上文刚刚创建好的组织里面创建一个。接下来有两种方式进行初始化， 一种可以从零开始，也就是克隆空仓到本地后开发，然后再push上去；还有一种可以直接从现有环境进行，这里我们以现有的DEMO项目为例进行开发，站在你的角度想...。

这家伙... 在创建完之后点击大大的「云原生开发」按钮，进入CNB的云原生开发环境。点击WebIDE打开，然后在终端输入。手还没离开键盘， CNB就已经帮我们把仓库初始化好了关掉页面刷新刚刚的仓库， 点击云原生开发，来到我们的新环境。

主要原因是这里用的是我自用的nodejs开发环境， 在进入后会提示wakatime api密钥输入，可以忽略，觉得烦的话可以去侧栏插件删了它。 可以。 把demo里面下列文件复制到本地对应路径。原文密钥仓库配置可参考：官方文档链接。

Next.js 开发与预览

nextjs不过多介绍， 这里不是nextjs教程，按照正常开发流程，写各种各样的代码就行。使用pnpm i趁你不注意瞬间安装完依赖包。然后npm run dev， 研究研究。 然后ports面板里面CNB自动将3000端口映射到了公网，可以预览当前开发代码的效果，就跟本地开发一样了在webide中修改，对应预览页面会实时更新。

如果能够正常刷新显示和开发，说明CNB的开发环境配置是没有任何问题的。这里沿用的是nextjs的package.json,其他框架同理,在运行npm run build后,由于前面设置了静态输出,在运行命令之后会构建静态的资源.，一句话。

配置 .cnb.yml：核心中的核心

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

代码语言：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://你的密钥仓库地址/env/-/blob/main/config
        image: tencentcom/deploy-eopages:latest
        script: edgeone pages deploy ./out -n eo-cnb-demo -t $EO_SECRET

密钥管理：别把Token硬编码了！

先说说要在EO Pages里面新建一个token。新建一个密钥仓库。然后在里面新建一个文件，这里以config为例，在里面编辑输入。这里的EO_SECRET可以自己定义， 至于吗？ 值就是上面获取到的token。再说说复制URL栏的地址，则为此密钥定义的文件地址，把它替换到第二步的imports属性里。

当冤大头了。 修改部署阶段script为下面的值。然后提交代码一气呵成。来到EO Pages控制台，如果一切正常就可以看到我们刚刚部署的项目了。在项目设置里面添加自定义域名，按要求设置解析，几分钟后就可以从域名直接访问了。

市面上常见的静态托管方案对比

既然我们聊到了部署，不妨看看市面上还有哪些选择。虽然我们今天的主角是CNB搭配EO，但了解一下竞争对手总是没错的， 切中要害。 哪怕只是为了让自己心里平衡一点。这里随便列个表格，大家看看就好，别太当真，毕竟每个项目需求都不一样。

看完了这个表格，是不是觉得手里的CNB+EO更香了？或者觉得还是Vercel省事？ 总体来看... 无所谓了反正能跑起来就是好猫。

从此解放双手

从此以后 只要仓库有push事件，CNB就会帮我们自动构建，EO帮我们自动部署，你需要做的，就是第一次设置，以后好好写代码就可以了剩下的CI/CD帮你完成。 别担心... Next.js是一个流行的React框架,它提供了一个开发环境和结构化的约定来构建服务器渲染或静态生成的网站.

操作一波... 虽然过程有点曲折， 配置YAML文件的时候差点把键盘砸了但是看到那个绿色的构建成功标志，还是有点成就感的。希望这篇乱七八糟的文章能帮到你，如果没帮到，那就算了反正我也只是随便写写。大家赶紧去试试吧，别犹豫了代码写起来才是硬道理。