私が言う前に、アドレスcycle.bucai.cc/を最初に置いてください、開発環境は動いています、それは少し遅いです、ロードするのを辛抱強く待ってください。
GitHub:github.com/notbucai/cb…
これは、プロジェクトの開発と実装にプロセスベースのアプローチを使用しようとした私の試みの記録です。
市場に出回っている既存の完璧なフレームワークが適用できない理由は、私が長い間完全で意味のあるものを書いていなかったためです。もちろん、いくつかの成熟したプロジェクトから「学び」ます。
デザイン
需要の源
最近、ブログのファンクションポイントをアップグレードして最適化することを断続的に誇りに思っています。プロジェクトは、バックグラウンドのnestjsプロジェクト、フォアグラウンドのnuxtjs、管理システムのvue.jsに分かれています。現在の展開方法では、Dockerを使用してローカルイメージをコンパイルします。サーバーに入る前にプライベートウェアハウスにプッシュします。プル後に再起動します。複数人による共同開発もあります。環境の一貫性を確保するために、全員がサーバー環境(Dockerなど)をローカルにインストールする必要があります。
上記の説明から見つけるのは難しくありません:
- 展開後にプロジェクトで使用されるテンプレート、言語、および状態(静的、サービス)が異なるため、コンパイル方法を統一できません。
- 現在の手動展開プロセスで繰り返し発生する問題。
- サーバー環境を一致させる必要があり、ローカル開発コンピューターの構成要件は高くなります。
ターゲットの期待
- プロジェクト展開テンプレート、およびさまざまなタイプに応じてパッケージ化するさまざまなテンプレートを選択できます。
- 手動展開を自動展開に移行します。
- ブランチの監視に依存し、プッシュは自動的に展開をトリガーし、高いローカル構成要件を解決します。
リサーチ
ほとんどの人が日常業務でこのツールを必要としているため、調査について簡単に説明します。
調査の目的:Netlify(海外)、Tencent Cloud Webify(国内)。
彼らはどのような問題を解決しますか
- リソースをデプロイします。
- CI/CDワークフロー。
彼らの不利な点(現在のプロジェクトの高さを強制的に上げる)。
- 海外でNetlify、dddd。
- Webifyクラウドメーカーは運用と保守を行い、保証されていない場合はネギの削減を開始します。
需要分析
上記の内容を通じて、プロジェクトに必要なファンクションポイントを取得することは非常に直感的です。
コア分析
コア機能は、「タスク」を1つの単位として操作し、タスクを作成し、タスクを管理することです。
いわゆる「タスク」とは、状態を転送する必要があることを意味します。現在、タスクは進行中、失敗、停止に分けられます。
各トリガーはサブタスクを生成する必要があり、トリガー時に進行中のサブタスクがある場合は、新しいタスクを停止して開始する必要があります。
进行中的任务包含子状态:编译中、编译成功、编译失败。 用户交互以及核心环节请看下方流程图。
功能设计
-
创建任务
主要对某个仓库的分支进行webhook的注册,并将任务信息写入数据库。
-
管理任务
主要对创建后的任务信息进行管理,删除、暂停、开始。
-
开始
对暂停的任务继续进行。
-
暂停
对正在进行中的任务进行。
-
删除
删除此条数据,并删除webhook。
-
-
任务执行
通过webhook触发执行,找到当前数据进行执行。
任务执行设计
如何不同配置进行不同的编译/运行方式?
所有编译都采用docker进行隔离编译,运行根据不同类型进行选择不同的方式。
目前区分两种类型,一种是静态、一种是动态:
- 静态:采用采用docker编译后上传cdn方式,当然只是模拟暂只放nginx静态目录中。
- 动态:使用docker编译后docker运行。
web | service |
---|---|
无需端口 | 端口 |
nginx 转发资源 | nginx 转发端口 |
可能需要编译 | 可能需要编译 |
不需要容器运行 | 需要容器运行 |
动作 | spa项目 | 普通网页 | Ts node 项目 | 普通node项目 |
---|---|---|---|---|
构建 | 是 | 否 | 是 | 是 |
编译 | 是 | 否 | 是 | 否 |
运行 | 否 | 否 | 是 | 是 |
上方从资源类型和项目类型进行对比,直观的表达了任务的执行动作。
静态资源(web)容器构建后,通过docker cp 将镜像中dist数据copy到主机中,然后转移到nginx中。
服务资源(service)容器构建编译后,再运行起来,然后添加nginx将容器映射到机器端口上。
端口后续进行维护,容器内端口不做管理,靠nginx容器进行映射维护。
用户自己的任务容器之间可以相互通信,通过任务id即可访问,如果是静态资源需要访问后续通过配置将接口进行转发,同时用户可以绑定自己的域名到当前机器上。
页面设计
前端采用naive-ui
作为前端布局样式组件。
其在交互上主要分为三步:
-
选择托管平台
github、gitee等平台,选择的托管平台必须是授权登录过的。
-
输入信息
输入任务所必须的数据字段
-
确认信息
确认输入的是否符合要求
由于设计比较简单,直接以图片形式展示。
任务列表字段:任务名称/ID、托管平台、模版、状态、创建人、创建时间、更新时间、操作时间。
详情页
数据库设计
只展示核心表的设计
用户表
托管平台表
模版表
任务表
子任务表
接口设计
包含crud,直接查看接口文档:
技术选型
选择的方案的标准是 我会
、简单
。
目前选择egg + mysql + redis + vue
架构,编码尽量ts化。其他框架也考虑过比如nestjs、koa,相对而言nest太大了,koa又太小了,选 vue 其实只是想试一下3.x的版本。
eggjs: 为企业级框架和应用而生。
vue: 懂得都懂。
项目架构
架构很简单,就是存储配合依赖进行触发。
服务器运维架构
独立当前应用,用户可共享自己的服务并独立运行(隔离),原则上每个用户都可以申请一些存储与其他资源(待定),不过仍然建议使用远程/第三方资源。
编译/部署 触发 流程
是否编译:有些node项目是不需要编译的步骤
是否运行:静态资源不需要运行,直接打到nginx中即可
实现
核心功能实现(暂时只做实现 github 相关业务,其他平台预留接口)。
绑定托管平台
引用阮一峰一图,一文,绑定流程基本上就是浏览器重定向,后返回code,拿到code换token,然后将token保存。
获取相关信息
通过以下api进行操作
创建任务
创建任务写入 webhook。
任务执行
等待webhook回调
任务执行相关模版每次触发都执行,使用ejs进行配置渲染生成。
// 注入内容
{
user, // 数据库user model
task, // 数据库task model
taskChild, // 数据库task_child model
template, // 数据库template
path: {
...path, // 相关路径
code: relativeCodePath // 代码与配置的相对位置
}
}
复制代码
# dock er file
FROM node:12.18.2
LABEL maintainer="<%= user.id %><<%= user.email %>>"
ADD <%= path.code %> /app/
WORKDIR /app
RUN rm -rf node_modules
RUN rm -rf <%= path.build %>
RUN npm config set sharp_binary_host https://npm.taobao.org/mirrors/sharp
RUN npm config set sharp_libvips_binary_host https://npm.taobao.org/mirrors/sharp-libvips
RUN npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass
RUN npm install --registry https://registry.npm.taobao.org --max-old-space-size=4096
ENV NODE_ENV production
<% if (template.is_build) { %>
RUN npm run <%= task.build_script %>
<% } %>
<% if (template.is_run) { %>
EXPOSE <%= task.server_port %>
CMD nohup sh -c 'npm run <%= task.run_script %>'
<% } %>
复制代码
# docker compose config
version: "3.7"
services:
"<%= task.id %>":
build: .
image: <%= task.id %>:<%= taskChild.version || '0.0.1' %>
container_name: <%= task.id %>
restart: always
<% if (template.is_run) { %>
networks:
<%= user.id %>-network:
ipv4_address: <%= task.ip %>
networks:
<%= user.id %>-network:
external: true
<% } %>
复制代码
构建/编译/运行 相关
node child_process exec
进行命令执行:
使用 exec('docker-compose build')
进行镜像的构建。
コンテナ内のデータをホストにコピーするために使用 exec(docker cp $(docker create --rm ${imageName}):/app/${buildPath} ./dist)
します。
docker-compose down
既存のミラーイメージを停止するために使用します。
'docker-compose restart
イメージコンテナの再起動を使用します。
docker-compose up
ブートコンパイルされたイメージを使用します。