Day18_CI Pipeline for Angular

11th鐵人賽

糜糜卯卯

2019-10-04 00:30:39

1306 瀏覽

分享至

[S03E08] CI Pipeline for Angular

https://www.youtube.com/watch?v=YZC0HyZdV5o&list=PL9LUW6O9WZqgUMHwDsKQf3prtqVvjGZ6S&index=36
原始碼
https://github.com/Gogistics/prjNgCIPipeline

由Alan Tai大大，很佛心的大放送一個完整的Angular CI專案
主要有2大部分:

建立有angular cli的docker image
在container裡面跑angular專案(ng build)、test

本集是不含CI Server的

如果你的專案有寫測試，要進一步部了解CI，
建議可以使用GitLab CI，可以裝在內網(市佔率第2)
可以到DevOps組找GitLab的文章
https://ithelp.ithome.com.tw/2020ironman/devops#ir-list

今天小弟就試著讀懂Alan Tai大大寫的script，並加註解
docker是必學的喔~

第一階段:DevOps

登入docker hub，或自建的private docker registry

# 1. 登入 docker registry
$ docker login docker-registry.gogistics-tw.com
or with user name and password
$ docker login -u <username> -p <password> docker-registry.gogistics-tw.com
                                           ^^^^^^^^^^^^^^^^^^^^^^^^^自建的docker registry

也可以用docker hub，就類似github一樣，不過是放image

docker push 帳號/repository # 上傳
docker pull 帳號/repository # 下載

簡介docker hub
https://ithelp.ithome.com.tw/articles/10191139
也可以在公司內網自建private docker hub
https://ithelp.ithome.com.tw/articles/10191213

用 Alan Tai 大大寫的script建立docker image

2-2. tag the docker image of ng-cli

$ docker tag atai/ng-cli:v1 docker-registry.gogistics-tw.com/atai/ng-cli:v1

3. push the docker image of ng-cli to the docker registry

$ docker push docker-registry.gogistics-tw.com/atai/ng-cli:v1

定義變數
scripts/envVariables

DOCKER_ACCOUNT_NAME="atai"

DOCKER_IMG_TAG_NG_CLI="ng-cli"
DOCKER_IMG_TAG_NG_CLI_KARMA="ng-cli-karma"
DOCKER_IMG_TAG_NG_CLI_E2E="ng-cli-e2e"
DOCKER_IMG_NG_CLI_VERSION="v1"
NG_CLI_VERSION="1.4.4"

DOCKER_IMG_TAG_KOA="koa-app"
DOCKER_IMG_KOA_VERSION="v1"
KOA_VERSION="2.3.0"
KOA_APP_NAME="ng-koa"

NPM_CONFIG_LOGLEVEL="warn"
USER_HOME_DIR="/tmp"
APP_DIR="/ng_app"
USER_ID=1000

ERR_OPERATOR=1

2-1. create the docker image of ng-cli

參考文件
https://medium.com/@VisonLi/docker-%E5%85%A5%E9%96%80-%E7%AD%86%E8%A8%98-part-2-91e4dfa2b365

建立有angular cli的docker image

$ ./scripts/build_ng_cli_docker_img.sh 
$ ./scripts/build_ng_cli_e2e_docker_img.sh
$ ./scripts/build_ng_cli_karma_docker_img.sh

這3個都是差不多的，我們看build_ng_cli_docker_img.sh就好了

#!/bin/bash
#
# Author:
#   Alan Tai
# Program:
#   Build the base of the docker image of Angular CLI
# Date:
#   9/30/2017

# set environment variables
# source指令 告知shell不要fork script，以保留環境變數
source $(pwd)/scripts/envVariables

#############################################################
# Create docker image and spin up container running Go server
# Globals:
#   None
# Arguments:
#   DOCKER_NAME_GO_SERVER
#   DOCKER_IMG_VERSION_GO_SERVER
# Returns:
#   None
#############################################################
# text styles，控制文字的樣式
bold=$(tput bold) # 進入粗體模式
normal=$(tput sgr0) # 結束所有模式

docker build \
  -t $DOCKER_ACCOUNT_NAME/$DOCKER_IMG_TAG_NG_CLI:$DOCKER_IMG_NG_CLI_VERSION \
  --build-arg NG_CLI_VERSION=$NG_CLI_VERSION \
  --build-arg USER_HOME_DIR=$USER_HOME_DIR \
  --build-arg APP_DIR=$APP_DIR \
  --build-arg USER_ID=$USER_ID \
  --build-arg NPM_CONFIG_LOGLEVEL=$NPM_CONFIG_LOGLEVEL \
  --build-arg USER_HOME_DIR=$USER_HOME_DIR \
  -f $(pwd)/docker_files/Dockerfile.ng-cli .

# 上面有$的，都是帶入變數
# docker build -t atai/ng-cli:v1
# --build-arg ....
# 上面這些參數(例如:$APP_DIR)，帶入以下的dockerfile
# -f $(pwd)/docker_files/Dockerfile.ng-cli .

docker build的運作流程

上傳Dockerfile，之後依Dockerfile建立。
接著dockerfile的每一步都會建立一個新的容器，執行command 與commit的動作。
最後得到一個image id。

所以再來要看/docker_files/Dockerfile.ng-cli這個檔案
就是dockerfile

###
# References: https://github.com/trion-development
###

FROM node:8 # 使用的node.js的image來建image
MAINTAINER Alan Tai "gogistics@gogistics-tw.com"

ARG NG_CLI_VERSION="$NG_CLI_VERSION"
ARG USER_HOME_DIR="$USER_HOME_DIR"
ARG APP_DIR="$APP_DIR"
ARG USER_ID="$USER_ID" # optional

# Default to UTF-8 file.encoding
ENV LANG C.UTF-8
ENV HOME $USER_HOME_DIR

COPY ./scripts/dumb-init /usr/bin/dumb-init
     ^^^^^^^^^原目錄      ^^^^^^^^copy到image裡

# 在container建立時執行的動作
# 跑指令，安裝一些套件
RUN set -xe && \
  chmod +x /usr/bin/dumb-init && \ # dumb-init，Docker容器初始化系統
  mkdir -p $USER_HOME_DIR && \
  chown $USER_ID $USER_HOME_DIR && \
  # u:擁有者 g:與擁有者同一group o:其外的 a:代表所有(包含u、g、o)
  chmod a+rw $USER_HOME_DIR && \ 
  chown -R node /usr/local/lib /usr/local/include /usr/local/share /usr/local/bin && \
  (cd "$USER_HOME_DIR"; su node -c "npm install -g @angular/cli@$NG_CLI_VERSION; npm install cache clean --force")

WORKDIR $APP_DIR
EXPOSE 4200

ENTRYPOINT ["/usr/bin/dumb-init", "--"]

2-2. tag the docker image of ng-cli

加tag

$ docker tag atai/ng-cli:v1 docker-registry.gogistics-tw.com/atai/ng-cli:v1
上傳到docker registry
$ docker push docker-registry.gogistics-tw.com/atai/ng-cli:v1

第二階段:Development

下載image

# pull the image of ng-cli from docker registry
$ docker pull docker-registry.gogistics-tw.com/atai/ng-cli:v1

clone一個angular專到，丟到剛建立的image的container裡跑

# clone source code from git repository and switch to the project directory
$ git clone <ng-project-repo-url> 
# for example, git clone git@bitbucket.org:gogistics-tw/ngclipipeline.git
$ cd <ng-project-dir> # in this demo, <ng-project-dir> is ngclipipeline/pipeline

第三階段:單元測試

Unit test the code and then generate the bundle files

跑單元測試，且產生ng build後的dist/

# unit testing
$ docker run --rm -v "$PWD":/ng_app docker-registry.gogistics-tw.com/atai/ng-cli-karma:v1 ng test --single-run
^^^^^^^^^^^^^^^^^^^^
container 跑起來後，在 WORKDIR $APP_DIR 執行 ng test --single-run

# e2e testing
$ docker run --rm -v "$PWD":/ng_app docker-registry.gogistics-tw.com/atai/ng-cli-e2e:v1 ng e2e

# once developers build features and want to generate bundle files, run the command below
$ docker run --rm -v "$PWD":/ng_app docker-registry.gogistics-tw.com/atai/ng-cli:v1 ng build (-prod) (-aot)

有時候要下`npm rebuild node-sass`

例如:同一個angular專案在windows、macos下開發

Note: if you encounter the build issue, **Node Sass could not find a binding for your current environment**, run change command to:

$ docker run --rm -v "$PWD":/ng_app docker-registry.gogistics-tw.com/atai/ng-cli-e2e:v1 sh -c 'npm rebuild node-sass --force && ng build (-prod) (-aot)'

# 看一下dist/ size
# check size of folders
$ du -h dist/