gitlab CI/CD 将react、vue项目打包成Docker镜像

用了好多CI/CD工具，个人感觉 gitlab-ci 还是挺好用的。基础环境搭建在此文章不说明（如gitlab安装、gitlab-runner安装、docker私有镜像等）

直接上配置

需要配置gitlab ci/cd 环境变量CI_REGISTRY_IMAGE, 值是镜像地址

.gitlab-ci.yml

variables:
  DOCKER_DRIVER: overlay
services:
  - docker:dind
stages:
  - build
  - pack
  - deploy

before_script:
  - export IMAGE_TAG=$(echo -en $CI_COMMIT_REF_NAME | tr -c '[:alnum:]_.-' '-')
  - export IMAGE=$CI_REGISTRY_IMAGE:$IMAGE_TAG

build:
  stage: build
  script:
    - docker build --pull -t "${CI_REGISTRY_IMAGE}_build:latest" . -f Dockerfile.build
    - docker push "${CI_REGISTRY_IMAGE}_build:latest"
    - docker create --name extract "${CI_REGISTRY_IMAGE}_build:latest"
    - docker cp extract:/usr/src/app/dist ./dist
    - docker rm -f extract
  artifacts:
    expire_in: 3 mins
    paths:
      - dist/
      - Dockerfile
      - nginx.conf
  only:
    - tags

pack:
  stage: pack
  variables:
    GIT_STRATEGY: none
  dependencies:
    - build
  script:
    - docker build --pull -t "$IMAGE" .
    - docker push "$IMAGE"
  only:
    - tags

测试环境更新:
  stage: deploy
  variables:
    GIT_STRATEGY: none
  dependencies: []
  script:
    - echo "测试环境更新 脚本"
  only:
    - tags

预发布环境更新:
  stage: deploy
  variables:
    GIT_STRATEGY: none
  dependencies: []
  script:
    - echo "预发布环境更新 脚本"
  only:
    - tags
  when: manual

正式环境更新:
  image: gempesaw/curl-jq
  stage: deploy
  variables:
    GIT_STRATEGY: none
  dependencies: []
  script:
    - echo "预发布环境更新 脚本"
  only:
    - tags
  when: manual

发布镜像如需登录再配置下登录的命令，上面例子发布镜像是不需要登录的。

Dockerfile.build

FROM node:8-alpine
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
RUN npm --registry https://registry.npm.taobao.org install
COPY . .
RUN npm run build
CMD ["node"]

下依赖使用了 toabao 镜像，这样快些。

Dockerfile

FROM nginx:1.15-alpine 
COPY ./dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

vue 和 react 打包生成的镜像文件 一个是 dist另个是build。当前使用vue作为案例，如果是react，把配置文件里所有的dist改为build。

说明一下

Dockerfile.build 是我用来缓存依赖的。gitlab-ci 也有缓存配置，亲测后，因为项目依赖太多，gitlab-ci 的缓存机制非常慢。没有Dockerfile 缓存来的又快又好用，就是加点配置。

发布环节，方式太多。既然已经生成了docker镜像，那么可以利用k8s集群进行发布项目，gitlab-ci 里调用下相关的api。或者用一些方便docker部署的工具进行手动发布也行。