• 前端开发流程


    开发环境

    1. nodejs 推荐使用 10.16.0(最新的lts版本)
    2. yarn npm install -g yarn
    3. lerna npm install -g lerna
    4. 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. vscode
    2. webstorm

    创建新项目

    1 创建新项目

    # 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'
    

    升级平台依赖

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

    启动项目

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

    部署项目

    1. 编译项目:
      1. 安装依赖 yarn bootstrap
      2. 编译子模块 lerna run transpile
      3. 打包dll yarn build:dll
      4. 编译项目 yarn build
    2. 将build完成的dist所有文件 复制到 /usr/share/nginx/html(服务器部署目录)
    3. 替换环境变量
      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 "$@"
    

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

    环境变量说明

    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

    #!/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