跳到主要内容

快速上手

安装 HAP 私有版​

已安装可忽略这一步

Web 端是 HAP 私有版微服务集合其中一个服务，并不可独立使用，在进行二次开发之前，需要优先部署好 HAP 私有版（v2.8.0+），可参考：快速安装 。

开发​

环境准备​

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

开发工具​

建议使用：Visual Studio Code

克隆项目​

git clone git@github.com:mingdaocom/pd-openweb.git
  • 如果你部署的 HAP 当前不是最新版本，则需要到代码仓库中下载对应版本的前端代码，因为前后端版本要保持一致

安装依赖包​

执行 yarn（推荐） 或 npm install

修改 API 地址​

修改 package.json 中 start 命令的 API_SERVER 参数值

API_SERVER 的值为已部署好的 HAP 系统访问地址，开发时构建工具会将 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 中已预置 release 和 publish 2个发布相关的命令

  • release：编译前端代码

  • publish：处理发布所需的模板和文件

"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"

API_SERVER 和 WEBPACK_PUBLIC_PATH 可根据实际情况进行修改（默认保持不变即可）

  • API_SERVER：API 地址，默认 /wwwapi/

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

请依次执行 npm run release 和 npm 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/nginx.conf 文件

需要以 Docker 方式进行前端项目部署，可直接使用 docker 文件夹下 Dockerfile 进行镜像构建。

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

# 镜像标签，默认以当前时间作为镜像标签，可自定义
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
以下是基于 Linux Jenkins 进行的镜像构建 Demo
# 需要 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

# 镜像标签，默认以当前时间作为镜像标签，可自定义
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 10880:80 hub.doamon.com/mingdaoyun/web:20210801_1111

整合​

前端项目部署完成后，需要将前端站点的服务地址配置到 HAP 微服务容器中

具体操作如下，修改各微服务应用对应的 docker-compose.yaml，添加环境变量：ENV_WEB_ENDPOINTS（多个地址则使用英文逗号分隔）

services:
  app:
    environment:
      ENV_WEB_ENDPOINTS: "172.17.30.60:10880"

配置后需重启微服务生效