跳到主要内容

快速上手

安装明道云私有版

已安装可忽略这一步

Web 端是明道云私有版微服务集合其中一个服务,并不可独立使用,在进行二次开发之前,需要优先部署好明道云私有版(v2.8.0+),可参考:快速安装

开发

环境准备

开发机器内存建议大于 4G,安装 Node.js 12.18.3+

开发工具

建议使用:Visual Studio Code

克隆项目

git clone git@github.com:mingdaocom/pd-openweb.git

安装依赖包

执行 yarn(推荐) 或 npm install

修改 API 地址

修改 package.jsonstart 命令的 API_SERVER 参数值。API_SERVER 的值为第一步中已部署好的明道云系统访问地址,开发时构建工具会将 API 请求代理到配置的 API_SERVER 地址。

如:

"start": "cross-env API_SERVER=http://172.17.30.60:8880 node --max-old-space-size=8192 ./node_modules/gulp/bin/gulp.js dev:main"

启动项目

npm start

发布

package.json 中已预置 releasepublish 2个发布相关的命令,API_SERVERWEBPACK_PUBLIC_PATH 可根据实际情况进行修改(默认保持不变即可)

"release": "cross-env NODE_ENV=production node --max-old-space-size=8192 ./node_modules/gulp/bin/gulp.js release",
"publish": "cross-env NODE_ENV=production API_SERVER=/wwwapi/ WEBPACK_PUBLIC_PATH=/dist/pack/ node --max-old-space-size=8192 ./node_modules/gulp/bin/gulp.js publish"

release:编译前端代码
publish:处理发布所需的模板和文件

  • API_SERVER:API 地址
  • WEBPACK_PUBLIC_PATH:页面脚本引用路径前缀,默认 /dist/pack/,当需要使用 CDN 来加速访问时需要修改此参数,如:${CDN_HOST}/dist/pack/

请依次执行 npm run releasenpm run publish,发布执行完成后,所有构建好的文件会输出到根目录的 build 文件夹。

部署

在进行镜像构建之前,需要对 docker/nginx.conf 文件进行修改,所有以 rewrite 开头的记录,目标地址需要加上系统访问地址(http/https 的默认端口 80/443 不能加,有子路径需要带上去),如 rewrite (?i)^/app/my http://172.17.30.60:8880/mobile/appHome redirect;

需要 Docker 方式进行前端项目部署,可直接使用 docker 文件夹下 Dockerfile 进行镜像构建。以下是镜像构建的 Demo (基于 Linux Jenkins)

# 需要 Nodejs 环境依赖 12.18.3+
# PATH=/usr/local/node-12.18.3/bin:$PATH

# 提交日志
git log -n 1

# 清理
git clean -fdx -e node_modules -e packages
rm -f yarn.lock

# 安装依赖包
npm install
# 构建
npm run release
# 发布
npm run publish

# 镜像地址,根据实际使用的镜像仓库自定义
REGISTRY_PATH=hub.doamon.com/mingdaoyun/web

# TAG
BUILD_DATE=$(date +%Y%m%d_%H%M)

IMAGE_NAME=$REGISTRY_PATH:$BUILD_DATE

# 构建镜像
docker build --no-cache -t $IMAGE_NAME -f ./docker/Dockerfile .

# 推送到镜像仓库
docker push $IMAGE_NAME

镜像推送成功后,可在部署服务器拉取该镜像并启动,如:docker run -d --rm -p 80:80 hub.doamon.com/mingdaoyun/web:20210801_1111

整合

前端项目部署完成后,需要将前端站点的服务地址配置到明道云微服务应用容器内,具体操作如下,修改微服务应用对应的 docker-compose.yaml集群部署模式下多个微服务实例均需要修改),添加环境变量:ENV_WEB_ENDPOINTS多个使用英文逗号分隔),配置后需重启服务生效。

services:
app:
environment:
ENV_WEB_ENDPOINTS: "172.17.30.60:80,172.17.30.60:81"