One

主题

2025-08-142025-08-18运维CNB
1534
7.4m
0

CNB配合Pages另一种部署方法 ​

CNB配合Pages另一种部署方法 ​

image-20250813072437261

目录 ​

[toc]

版权 ​

w3c大佬贡献的方式。感谢大佬💖💖💖

背景 ​

image-20250813072908873

我的teek有600个文档，每次通过cnb部署到eo pages里，其它阶段还可以接受，但是部署到Pages很耗时，要4min多。因此想通过以下方法把构建好的dist产物推送到本仓库的dist分支，那么每次构建好的都是增量推送，且推送耗时特短。

思路 ​

  1. 在eo pages的一个项目里上传云函数文件（云函数里配置指向 cnb公开库的地址，即dist分支； 同时绑定号一个域名）
  2. 然后把teek构建好的dist内容推送到cnb公开库的dist分支
  3. 用户就可以正常访问域名了

软件 ​

functions.zip位置：https://img.onedayxyy.cn/images/functions.zip

teek仓库：https://img.onedayxyy.cn/images/vitepress-theme-teek-one-public.zip

1、eo pages的一个项目里上传云函数文件 ​

  • 新建一个Pages:

image-20250813071049515

image-20250813071118593

  • 本地编辑好eo云函数functions.zip

https://cnb.cool/onedayxyy/vitepress-theme-teek-one-public/-/git/raw/dist/index.html

修改地方1：

image-20250813071443731

修改地方2：

image-20250813071513795

只修好这2处地方就好，然后打包成zip格式。

  • 把打包好的functions.zip上传到这个地方：

image-20250813071131529

image-20250813071118593

  • 绑定域名

image-20250813071241131

2、cnb公开库推送代码 ​

  • 编辑.cnb.yml：
yaml
# # .cnb.yml
# $:
#   # vscode 事件：专供页面中启动远程开发用
#   vscode:
#     - runner:
#         # 自定义CPU核心数,最大支持64核
#         cpus: 64
#       docker:
#         # 自定义开发环境
#         build:
#           # 指定构建镜像的 Dockerfile 文件
#           dockerfile: .ide/Dockerfile
#       services:
#         # 声明使用 vscode 服务
#         - vscode
#         # 声明在容器中支持 docker 命令
#         - docker
#       stages:
#         - name: 环境启动时执行以下命令
#           script:
#         # 安装pnpm并使用pnpm安装依赖
#         - npm install -g pnpm
#         - pnpm i

# 云原生构建流程和自动部署
# main:
#   push:
#     "volume-cache":
#       name: 云原生构建
#       runner:
#         cpus: 64
#         # tags: cnb:arch:amd64:gpu
#       docker:
#         image: node:22
#         volumes:
#           - node_modules:copy-on-write
#       stages:
#         - name: 构建当前项目
#           script: npm install -g pnpm && pnpm i && pnpm run docs:build
#         - name: 部署到Pages
#           imports: https://cnb.cool/w3c/envs/-/blob/main/pages.yml
#           script: npx edgeone pages deploy ./.vitepress/dist --name vitepress-theme-teek --token $EDGEONE_PAGES_API_TOKEN

#   web_trigger:
#     "volume-cache":
#       name: 云原生构建
#       runner:
#         cpus: 64
#         # tags: cnb:arch:amd64:gpu
#       docker:
#         image: node:22
#         volumes:
#           - node_modules:copy-on-write
#       stages:
#         - name: 构建当前项目
#           script: npm install -g pnpm && pnpm i && pnpm run docs:build
#         - name: 部署到Pages
#           imports: https://cnb.cool/w3c/envs/-/blob/main/pages.yml
#           script: npx edgeone pages deploy ./.vitepress/dist --name vitepress-theme-teek --token $EDGEONE_PAGES_API_TOKEN

master:
  push:
    "volume-cache":
      name: 云原生构建
      runner:
        cpus: 64
        # tags: cnb:arch:amd64:gpu
      docker:
        image: node:22
        volumes:
          - node_modules:copy-on-write
      env:
        # 产物想要存入的分支名
        DIST_BRANCH: dist
      stages:
        - name: check
          script: |
            git fetch origin --prune --tags
        - name: install
          script: |
            apt update
            apt install -y rsync
            npm i -g pnpm
            pnpm i
        - name: check branch
          script: |
            if ! git ls-remote --exit-code --heads origin ${DIST_BRANCH}; then
              echo "Remote branch '${DIST_BRANCH}' not found, creating it..."
              git checkout --orphan ${DIST_BRANCH}
              git rm -rf .
              echo "# ${DIST_BRANCH} initialized" > README.md
              git add README.md
              git commit -m "chore: init ${DIST_BRANCH} branch"
              git push origin ${DIST_BRANCH}
              git checkout -
            fi
        - name: 构建
          script: |
            git fetch origin ${DIST_BRANCH}:${DIST_BRANCH}
            rm -rf .deploy-tmp
            pnpm run docs:build
            git worktree add .deploy-tmp ${DIST_BRANCH}
            find .deploy-tmp -mindepth 1 \
              -not -name ".git" \
              -not -name ".gitkeep" \
              -exec rm -rf {} +
            cp -rf ./docs/.vitepress/dist/* ./.deploy-tmp/
        - name: 部署
          script: |
            cd ./.deploy-tmp/
            git add -A
            if ! git diff --cached --quiet; then
              git commit -m "deploy: $(date '+%Y-%m-%d %H:%M:%S')" --allow-empty || echo "Nothing to commit"
              git push origin ${DIST_BRANCH}
            else
              echo "No changes to deploy"
            fi
            cd ..
            if [ -d ./.deploy-tmp/.git ]; then
              git worktree remove .deploy-tmp --force
            fi
  • 直接推送
bash
git add -A
git commit -m"commit"
git push

3、测试效果 ​

  • 观察下cnb构建过程（OK的）

image-20250813072112097

  • 访问域名，观察效果：

https://wiki.onedayxyy.cn/

image-20250813071854338

警告

详细信息

访问主页正常，但是访问其它页面后，就会报404错误：

image-20250813071948873

再刷新，就会出现以下这个提示：

image-20250813072008939

以上问题的原因在于vue的老毛病了：

image-20250813072243744

至于主页为啥能正常显示：

image-20250813072321942

扩展 ​

提示

以上方法是公开开teek仓库推送到公开库dist分支的。

但是如何把私有库构建好的产物推送到 公开库的dist分支呢？

请看如下代码：(二丫贡献的代码，经实际测试OK的)

bash
cd docs/.vitepress/dist
git init
git remote add dist https://cnb.cool/66666/ceshi.git
git remote add origin https://cnb.cool/66666/ceshi.git
git add -A
git commit -m "Deploying to CNB"
git push -u origin master:dist -f

关于我 ​

我的博客主旨：

  • 排版美观，语言精炼；
  • 文档即手册，步骤明细，拒绝埋坑，提供源码；
  • 本人实战文档都是亲测成功的，各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人帮您解决问题，让我们一起进步！

🍀 个人网站

image-20250109220325748

🍀 微信二维码

x2675263825 （舍得）， qq：2675263825。

image-20230107215114763

🍀 微信公众号

《云原生架构师实战》

image-20230107215126971

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

image-20230107215149885

🍀 知乎

https://www.zhihu.com/people/foryouone

image-20230107215203185

最后 ​

如果你还有疑惑，可以去我的网站查看更多内容或者联系我帮忙查看。

如果你有更好的方式，评论区留言告诉我。谢谢！

好了，本次就到这里了，感谢大家阅读，最后祝大家生活快乐，每天都过的有意义哦，我们下期见！

最近更新