https://www.youtube.com/watch?v=YZC0HyZdV5o&list=PL9LUW6O9WZqgUMHwDsKQf3prtqVvjGZ6S&index=36
原始碼
https://github.com/Gogistics/prjNgCIPipeline
由Alan Tai大大,很佛心的大放送一個完整的Angular CI專案
主要有2大部分:
本集是不含CI Server的
如果你的專案有寫測試,要進一步部了解CI,
建議可以使用GitLab CI,可以裝在內網(市佔率第2)
可以到DevOps組找GitLab的文章
https://ithelp.ithome.com.tw/2020ironman/devops#ir-list
今天小弟就試著讀懂Alan Tai大大寫的script,並加註解
docker是必學的喔~
# 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
$ docker tag atai/ng-cli:v1 docker-registry.gogistics-tw.com/atai/ng-cli:v1
$ 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
建立有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
#!/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_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", "--"]
加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
# pull the image of ng-cli from docker registry
$ docker pull docker-registry.gogistics-tw.com/atai/ng-cli:v1
# 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
跑單元測試,且產生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/