前端高级进阶：CICD 下前端的多特性分支环境部署

无论大中小企业，多特性分支的前端环境基本上已成为了标配，即每一个功能分支都配有相应的测试环境。今天山月就循序渐进来讲解下多分支环境的实现方式，经济基础决定上层建筑，企业的基础服务建设决定实现方式，这里是基于 Docker 与 CICD 的实现。
至于服务器端的多分支环境部署，由于都是基于容器的思想，思路与前端一致，如果直接想看结论，请翻到最后看小结。
从前后端的开发到上线，不同的企业对不同的环境有不同的命名，甚至有更精细的划分。但是一般可以可以划分为三个环境，我把这三个环境命名如下，并会在下述

local：本地环境，把项目 git clone 到自己的工作笔记本或者开发机中，在 localhost:8080 类似的地址进行调试与开发。此时环境的面向对象主要是开发者。
dev：测试环境，本地业务迭代开发结束并交付给测试进行功能测试的环境，在 dev.shanyue.tech 类似的二级域名进行测试。此时环境的面向对象主要是测试人员。
prod：生产环境，线上供用户使用的环境，在 shanyue.tech 类似的地址。此时环境的面向对象主要是用户。

那什么是多分支环境部署呢？这要从 Git 的工作流说起

本篇文章要求你有一定的 Docker，DevOps 以及前端工程化的知识储备。如果没有的话，本系列文章以及 个人服务器运维指南 中的 Docker 部分会对你有所帮助。

Git 工作流
随着不同的环境的区分，基于版本管理工具演化出了各种各样的工作流，比如 Git Flow，Github Flow 与 Gitlab Flow。这里简单介绍一种最常见的 Git Flow

git flow 流程如图上所示，关于细节这里不作过多的讨论。一般来说

feature 分支对应本地环境
develop 分支对应测试环境
master 分支对应生产环境

由于每次 feature 开发结束后都要合并到 develop 分支进行测试。此时会有几个问题

当 develop 分支测试出现 bug 后，每次修复后都需要合并到 develop 分支。
当多功能同时开发时会造成 develop 分支的拥挤导致，各个功能最后只能统一上线，因为它无法时刻保持一个干净的 develop 分支，这与我们现在所提倡的敏捷开发，小步迭代格格不入。

此时，基于 feature 分支急需一套可单独测试的环境
多分支环境部署
CI，Continous Integration 持续集成使项目变得更加自动化，充分减少程序员的手动操作，并且在产品快速迭代的同时提高代码质量。基于 CICD 的工作流也大大改善了 Git 的工作流。其中就增加了一个基于分支的前端环境：

特性环境 (也不知道叫啥名字，就这么起吧)，对应于 feature 分支。每个 feature 分支都会有一个环境，可以视为本地环境与测试环境的结合体。如对功能 feature-A 的开发在 feature-A.dev.shanyue.tech 类似的三级域名进行测试。

此时对于开发，测试，产品交付来讲，整个流程的体验就顺滑了很多。于是终于到了今天的正题：
如何实现多分支环境部署？
基于 docker 进行部署
由于 docker 的轻便易用，隔离性好并且可移植性高的特点，这里选择基于 docker 的部署，镜像配置文件如下所示。
FROM node:10-alpine as builder

ENV PROJECT_ENV development
ENV NODE_ENV production

http-server 不变动也可以利用缓存

WORKDIR /code

ADD package.json package-lock.json /code
RUN npm install --production

ADD . /code
RUN npm run build

选择更小体积的基础镜像

FROM nginx:10-alpine
COPY --from=builder /code/public /usr/share/nginx/html
复制代码另外由于此时不在生产环境，完全没有必要把所有静态资源扔到 CDN 去处理，甚至为了方便调试，在打包时也可以避免做过多的混淆及压缩。如果你对 docker 不熟悉，可以查看本系列暨前端工程暨高级前端进阶的系列文章第 N 篇：使用 Docker 部署前端项目
基于容器的前端部署与反向代理
现在流行的 kubernetes，docker-compose 应用编排都是基于容器的，所以我们只需要着力于容器，思考如何利用它做多分支部署。
首先解决的问题是多分支部署环境的多域名问题，因此首先要了解如何利用容器来映射域名，以下是两种常见的方案，但是利用容器的 label 的方式还是多一些

基于 contain