Skip to content

Pipeline 本地部署

Jump to bottom
CntChen edited this page Jan 3, 2019 · 1 revision

背景

pipeline 是开源的页面可视化搭建框架, 基于 pipeline 可以快速开发出满足运营活动需要的页面可视化搭建系统.

而二次开发的第一步是在本地机器或服务器上进行私有部署. 这里提供私有部署简要教程.

建立本地文件夹

选择一个本地目录作为 pipeline 工作目录. 如 /Users/cntchen/works/pipeline.

  • 在目录下新建文件夹 pipeline-resources, 作为页面模板和生成页面的资源存储目录.
$ cd /Users/cntchen/works/pipeline
$ mkdir pipeline-resources
  • 在页面资源目录下新建2个模板目录(目前写死了模板目录, 等支持页面模板上传后, 该步骤不需要).
$ mkdir -p pipeline-resources/template/1
$ mkdir -p pipeline-resources/template/2

当前目录:

/Users/cntchen/works/pipeline
└── pipeline-resources // 项目资源
    └── template // 模板资源
        ├── 1 // 页面模板1
        └── 2 // 页面模板2

clone 工程源码

# 可视化编辑器
$ git clone https://github.com/page-pipepline/pipeline-editor.git
# 后台数据库
$ git clone https://github.com/page-pipepline/pipeline-mongo.git
# node后台
$ git clone https://github.com/page-pipepline/pipeline-node-server.git
# 基于 vue 的模板库
$ git clone https://github.com/page-pipepline/pipeline-template.git
# 基于 react 的模板库
$ git clone https://github.com/page-pipepline/pipeline-template-react.git

当前目录:

/Users/cntchen/works/pipeline
├── pipeline-editor // 可视化编辑器
├── pipeline-mongo // 后台数据库
├── pipeline-node-server // node 后台
├── pipeline-resources // 项目资源
├── pipeline-template // vue 模板库
└── pipeline-template-react // react 模板库

生成页面模板

vue 页面模板

  • 进入 vue 模板库并安装依赖.
$ cd pipeline-template
$ npm i
  • 模板库构建出页面模板, 生成代码在 ./server/dist 中.
$ npm run server

> Check Schema:
  Base configuration schema check success.
  Components schema check success.
...
  Build complete.
  • 生成页面模板压缩包, 压缩包在 pipeline-template.zip.
$ npm run template

> pipeline-template@0.1.1 template /Users/cntchen/works/pipeline/pipeline-template
> node build/server-template-archive.js

  135322 total bytes
  Archiver finalized: pipeline-template.zip.
  • 将页面模板放入项目资源目录的页面模板1中
$ cp pipeline-template.zip ../pipeline-resources/template/1/

react 页面模板

进入 react 模板库并参考 vue 模板库的处理方式.

$ cd pipeline-template-react
$ npm i
$ npm run server
$ npm run template
# 将模板库放入项目资源目录的页面模板2中
$ cp -p pipeline-template.zip ../pipeline-resources/template/2/

此时目录:

/Users/cntchen/works/pipeline
└── pipeline-resources
    └── template
        ├── 1
        │   └── pipeline-template.zip // vue 页面模板
        └── 2
            └── pipeline-template.zip // react 页面模板

配置数据库

pipeline 的数据库采用 mongoDB, 用 docker 进行托管.

$ cd pipeline-mongo
# 开发模式启动
$ docker-compose -f docker-compose.dev.yml up --build --force-recreate

Pulling mongodb (mongo:3.4.7)...
3.4.7: Pulling from library/mongo
...
Creating pipeline-mongo_mongodb_1 ... done
Creating pipeline-mongo_db_seed_1 ... done
...
pipeline-mongo_db_seed_1 exited with code 0

数据库在终端中运行, 不要退出终端.

启动 node 服务

  • 进入目录并安装依赖
$ cd pipeline-node-server
$ npm i
  • 启动
# 开发模式启动
$ npm run dev

> egg-bin dev
...
...[master] egg started on http://127.0.0.1:7011 (1397ms)

node 在终端中运行, 不要退出终端.

node 服务的对外端口: http://localhost:7001.

启动编辑器

  • 进入目录并安装依赖
$ cd pipeline-editor
$ npm i
  • 启动编辑器
# 开发模式启动
$ npm run dev

> Starting dev server...
> Listening at http://localhost:3011/#/
...

编辑器在终端中运行, 不要退出终端.

然后在浏览器中访问编辑器页面: http://localhost:3011/#/.

Hello pipeline

如果你可以看到以下页面, 编辑器, node 服务和 mongoDB 数据库都 OK 了.

对其中任意一个模板点击使用, 如果看到以下页面, 那 pipeline 本地运行已经 OK 了. Hello pipeline!

EOF

Clone this wiki locally