前端开发流程

开发环境

nodejs 推荐使用 10.16.0(最新的lts版本)
yarn npm install -g yarn
lerna npm install -g lerna
hzero-front-cli npm install -g hzero-front-cli --registry=http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/

升级 hzero-front-cli 请使用命令：npm install -g hzero-front-cli@version --registry=http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/

ide

创建新项目

1 创建新项目

使用前端在线创建创建项目
使用hzero-front-cli工具

# srm-front 为新项目名称，--puppeteer-skip 为省略非必需的 puppeteer 依赖的下载
hzero-front-cli srm-front --puppeteer-skip

推荐使用 VSCode 终端执行相关命令，以下内容都以创建的 srm-front 项目为例。

2 创建公共模块

# 公共模块 spfm-front, 项目 srm-front
# 公共模块主要用于开发公共组件，公共工具函数等
cd srm-front
hzero-front-cli . --create-packages 'spfm-front'

3 创建其他模块

# 其他模块 spfm-front-sslm，用于开发业务功能
hzero-front-cli . --create-packages 'spfm-front-sslm'

升级平台依赖

升级 hzero-front-runtime
1. 备份自己的修改的srm-front的内容(重新clone一个仓库来做升级)
2. 使用hzero-front-cli升级 hzero-front-runtime
```
cd srm-front
hzero-front-cli .
```
注意：升级hzero-front-runtime会覆盖项目根目录下的文件内容，如若有对 compile*Env.js, webpack.config.js等文件做了修改，请备份之后再进行升级。
升级某个 HZERO 依赖
1. cd srm-front;
2. yarn add -W hzero-front@1.0.0 --registry=http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/
升级多个 HZERO 依赖 1.进入项目根目录
```
```bash
```
cd srm-front ```

2.执行升级命令
```
```bash
```
升级 hzero-front、hzero-front-hiam，要升级更多依赖请按需添加

yarn add -W hzero-front@1.0.0 hzero-front-hiam@1.0.0 –registry=http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/

或根据package.json，更新依赖：更改需要升级的模块版本号，之后执行

yarn -W –registry=http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/ ```
安装一个新的 HZERO 模块

以安装 hzero-front-hnlp@1.0.0 为例：

1.进入项目根目录
```
cd srm-front
```
2.执行安装命令
```
yarn add -W hzero-front-hnlp@1.0.0 --registry=http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/
```
3.将新安装的模块加入到主工程中 - 在 srm-front/src/utils/getModuleRouters.js 文件中引入 import * as hzeroFrontHnlpRouters from 'hzero-front-hnlp/lib/utils/router';
```
- 在 `srm-front/src/utils/getModuleRouters.js` 的 默认导出中 加入 `hzeroFrontHNlpRouters` 
```

请务必在根目录下的 packags 文件夹下进行开发

启动项目

按需修改 srm-front/config/compileStartEnv.js 中的环境变量
安装依赖 lerna bootstrap --registry http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/
编译子模块 lerna run transpile
打包dll yarn build:dll
启动本地环境 yarn start

部署项目

编译项目:
1. 安装依赖 yarn bootstrap
2. 编译子模块 lerna run transpile
3. 打包dll yarn build:dll
4. 编译项目 yarn build
将build完成的dist所有文件复制到 /usr/share/nginx/html(服务器部署目录)
替换环境变量
1. 执行脚本

run.sh

/usr/share/nginx/html: 服务器部署目录

#!/bin/bash
set -e

find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_BASE_PATH $BUILD_BASE_PATH g"
find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_API_HOST $BUILD_API_HOST g"
find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_CLIENT_ID $BUILD_CLIENT_ID g"
find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_WEBSOCKET_HOST $BUILD_WEBSOCKET_HOST g"
find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_PLATFORM_VERSION $BUILD_PLATFORM_VERSION g"
find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_IM_ENABLE $BUILD_IM_ENABLE g"
find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_IM_WEBSOCKET_HOST $BUILD_IM_WEBSOCKET_HOST g"
find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_CUSTOMIZE_ICON_NAME $BUILD_CUSTOMIZE_ICON_NAME g"


exec "$@"

注意：根据安装的版本按需设置变量。

环境变量说明

BUILD_BASE_PATH:

  如果`/app/`二级目录部署 需要修改 `srm-front/config/compileBuildEnv.js` 中的 
    BASE_PATH 为 `/app/(二级目录)`
    PUBLIC_URL 为 `/app(二级目录不要后面的/)`

BUILD_API_HOST(必填): 网关地址
BUILD_CLIENT_ID(必填): oauth 认证客户端id
BUILD_WEBSOCKET_HOST: websocket 地址
BUILD_PLATFORM_VERSION(必填): OP/SAAS
BUILD_IM_ENABLE：true/false，是否启用IM
BUILD_IM_WEBSOCKET_HOST: IM websocket地址，需要和后端对应
BUILD_CUSTOMIZE_ICON_NAME: ‘'，客制化图标名称，详情请查看icons 组件

gitlab-ci & docker

docker/enterpoint.sh


#!/bin/bash
set -e

find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_BASE_PATH $BUILD_BASE_PATH g"
find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_API_HOST $BUILD_API_HOST g"
find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_CLIENT_ID $BUILD_CLIENT_ID g"
find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_WEBSOCKET_HOST $BUILD_WEBSOCKET_HOST g"
find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_PLATFORM_VERSION $BUILD_PLATFORM_VERSION g"
find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_IM_ENABLE $BUILD_IM_ENABLE g"
find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_IM_WEBSOCKET_HOST $BUILD_IM_WEBSOCKET_HOST g"
find /usr/share/nginx/html -name '*.js' | xargs sed -i "s BUILD_CUSTOMIZE_ICON_NAME $BUILD_CUSTOMIZE_ICON_NAME g"


exec "$@"

docker/default.conf

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;
    root   /usr/share/nginx/html;
    #location / {
    #    index  index.html index.htm;
    #}

    
    location / {
      try_files $uri /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # Media: images, icons, video, audio, HTC
    location ~* \.(jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
    }

    # CSS and Javascript
    location ~* \.(css|js)$ {
    expires 1y;
    access_log off;
    add_header Cache-Control "public";
    }
    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

.gitlab-ci.yml

stages:
#  - node_dep_install
  - node_build
  - docker_build

#node_dep_install:
#  stage: node_dep_install
#  script:
#    - node_module

node_build:
  stage: node_build
  image: registry.cn-hangzhou.aliyuncs.com/hzero-cli/cifront:0.0.1
  script:
    - node_module
    - node_build
    - cp -r dist /cache/${CI_PROJECT_NAME}-${CI_PROJECT_ID}-${CI_COMMIT_REF_NAME}-${CI_COMMIT_SHA}/dist
  only:
    - master

docker_build:
  image: registry.cn-hangzhou.aliyuncs.com/choerodon-tools/cibase:0.7.0
  stage: docker_build
  script:
    - docker_build
    - rm -rf /cache/${CI_PROJECT_NAME}-${CI_PROJECT_ID}-${CI_COMMIT_REF_NAME}-${CI_COMMIT_SHA}
    - chart_build
  only:
    - master

.auto_devops: &auto_devops |
  http_status_code=`curl -o .auto_devops.sh -s -m 10 --connect-timeout 10 -w %{http_code} "${CHOERODON_URL}/devops/ci?token=${Token}&type=front"`
  if [ "$http_status_code" != "200" ]; then
    cat .auto_devops.sh
    exit 1
  fi
  source .auto_devops.sh
  function node_module(){
      mkdir -p /cache/${CI_PROJECT_NAME}-${CI_PROJECT_ID}-${CI_COMMIT_REF_NAME}-${CI_COMMIT_SHA}
      yarn global add lerna
      lerna bootstrap --registry http://nexus.saas.hand-china.com/content/groups/hzero-npm-group
      yarn --registry http://nexus.saas.hand-china.com/content/groups/hzero-npm-group
  }

  function node_build(){
      chmod -R 777 node_modules
      # yarn dll # 需要在 build 之前执行 dll
      yarn build:dll
      lerna run transpile
      yarn build
  }

  function docker_build(){
      cp -r /cache/${CI_PROJECT_NAME}-${CI_PROJECT_ID}-${CI_COMMIT_REF_NAME}-${CI_COMMIT_SHA}/* ${1:-"."}
      docker login -u ${DOCKER_USER} -p ${DOCKER_PWD} ${DOCKER_REGISTRY}
      docker build --pull -t ${DOCKER_REGISTRY}/${GROUP_NAME}/${PROJECT_NAME}:${CI_COMMIT_TAG} ${1:-"."}
      docker push ${DOCKER_REGISTRY}/${GROUP_NAME}/${PROJECT_NAME}:${CI_COMMIT_TAG}
      echo "${DOCKER_REGISTRY}/${GROUP_NAME}/${PROJECT_NAME}:${CI_COMMIT_TAG}"
  }  

before_script:
  - *auto_devops

jenkins & 开发服务器

jenkins 点击构建后触发对应服务器上的 run.sh 脚本

jenkins-run-sh

服务器需要安装运行环境(以及编译环境)
- nginx, node
- yarn, lerna
脚本目录在 **/srm-fornt/**.sh
nginx root 指向 **/srm-fornt/html

#!/bin/sh

git pull

gitPullErrorCode=$?

if [ 0 -ne $gitPullErrorCode ]; then
  echo "git pull error, try back yarn.lock, and pull again";
  mv yarn.lock "yarn.lock.`date +"%Y-%m-%d_%H-%M-%S"`.bakk" # decide yarn.lock has conflict
  git pull;
fi;

if [ 0 -ne $? ]; then
  exit "git pull error";
fi;

export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true

yarn --registry http://nexus.saas.hand-china.com/content/groups/hzero-npm-group/
#yarn run build:dll
yarn build:dll
lerna run transpile
yarn build

buildErrorCode=$?

if [ 0 -ne $buildErrorCode ]; then
  echo $buildErrorCode
  echo 'build error';
  exit $buildErrorCode;
fi
cp -r dist dist.bak
# 环境变量根据项目情况更改
find dist -name '*.js' | xargs sed -i "s BUILD_API_HOST http://hzeronb.saas.hand-china.com g"
find dist -name '*.js' | xargs sed -i "s BUILD_CLIENT_ID hzero-front-dev g"
find dist -name '*.js' | xargs sed -i "s BUILD_WEBSOCKET_HOST http://hzeronb.saas.hand-china.com/hpfm/sock-js g"
find dist -name '*.js' | xargs sed -i "s BUILD_PLATFORM_VERSION SAAS g"
find dist -name '*.js' | xargs sed -i "s BUILD_IM_ENABLE true g"
find dist -name '*.js' | xargs sed -i "s BUILD_IM_WEBSOCKET_HOST ws://192.168.16.150:9876 g"
find dist -name '*.js' | xargs sed -i "s BUILD_CUSTOMIZE_ICON_NAME customize-icon g"
rm -rf html
mv dist html

前端开发流程

开发环境

ide

创建新项目

升级平台依赖

升级 hzero-front、hzero-front-hiam，要升级更多依赖请按需添加

或根据package.json，更新依赖：更改需要升级的模块版本号，之后执行

启动项目

部署项目

run.sh

环境变量说明

gitlab-ci & docker

docker/enterpoint.sh

docker/default.conf

.gitlab-ci.yml

jenkins & 开发服务器

jenkins-run-sh