Skip to main content

Quick Start

Install HAP Server​

Ignore this step if already installed

The web side is one of the services in the HAP Server microservices collection, and cannot be used independently. Before secondary development, you need to deploy HAP Server (v2.8.0+) first. More details in quick installation.

Development​

Environment Preparation

It is recommended to install Node.js 12.18.3+ on a development device with more than 4G RAM.

Development Tools

Recommended: Visual Studio Code

Clone Project

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

Install Dependency Packages

Execute yarn (recommended) or npm install.

Modify API address

Modify the value of the API_SERVER of the start command in package.json. The value of API_SERVER is the access address of the HAP system deployed in the first step, and the build tool will proxy the API requests to the configured API_SERVER address during development.

Example：

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

Start Project

npm start

Release​

package.json is preconfigured with two commands release and publish. API_SERVER and WEBPACK_PUBLIC_PATH can be modified according to the actual situation.

"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：compile the front-end code
publish： handle the templates and files needed for publishing

  • API_SERVER：API address
  • WEBPACK_PUBLIC_PATH：the prefix of the page script reference path. It defaults to /dist/pack/. You need to modify this parameter when you need to use CDN to accelerate access, such as ${CDN_HOST}/dist/pack/

Please execute npm run release and npm run publish in order, after the release is done, all the built files will be exported to the build folder in the root directory.

Deployment​

Before building the mirror, you need to modify the file docker/nginx.conf. All records starting with rewrite need to have the system access address added to the target address (the default port 80 or 443 for http/https does not need to have the system access address added, if there is a subpath you need to add ), such as rewrite (?i)^/app/my http://172.17.30.60:8880/ mobile/appHome redirect;

If you need Docker for front-end project deployment, you can use Dockerfile under the docker folder to build the mirror directly. The following is a demo of the mirror building (based on Linux Jenkins).

# Requires Nodejs environment dependency 12.18.3+
# PATH=/usr/local/node-12.18.3/bin:$PATH   

# Submit logs
git log -n 1

# Clean up
git clean -fdx -e node_modules -e packages
rm -f yarn.lock

# Install dependency packages
npm install
# Build
npm run release
# Release
npm run publish

# Customize mirror addresses based on the actual mirror repository used
REGISTRY_PATH=hub.doamon.com/mingdaoyun/web

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

IMAGE_NAME=$REGISTRY_PATH:$BUILD_DATE

# Build the mirror
docker build --no-cache -t $IMAGE_NAME -f ./docker/Dockerfile .

# Push to the mirror repository
docker push $IMAGE_NAME

After the successful push of the mirror, you can pull the mirror on the deployment server and launch it, such as docker run -d --rm -p 80:80 hub.doamon.com/mingdaoyun/web:20210801_1111.

Integration​

After the front-end project is deployed, you need to configure the service address of the front-end site into the HAP microservice application container as follows, modify the corresponding docker-compose.yaml of the microservice application (multiple microservice instances in cluster deployment mode need to be modified), add the environment variable ENV_WEB_ENDPOINTS (if there are more than one, use English comma to separate them), and restart the service to take effect after configuration.

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