6.CD阶段，提交代码之后，根据分支名称创建独立的测试环境

需求

在开发的时候，我们一般都是多个功能并行开发的，那么如果我们都在一个分支上开发，是否会有问题？

不说肯定会有问题，但是想象这样一个场景，有一个功能开发完成了，需要提测了，这个时候，当前的分支是否是稳定分支呢？不是啊，因为还有其他的功能在上面开发，大家会提交代码呀，这个时候，如果其他的功能代码对当前的功能造成影响，那就每一办法测试了，而且这样还会有一个问题，就是我一个单独的功能，每一办法单独测试上线。

多测试环境的搭建

基于上面的需求或者说背景，我们需要给每个功能开一个分支，然后对每一个功能分支提供一个单独的测试环境，这样每个功能直接的测试可以并行开展，加快项目的推进速度。

nginx配置

我们先来看下之前的nginx配置

server {
      listen       81;
      root         /data/sites/angular-frontend;

      # Load configuration files for the default server block.

      location / {
      }

      error_page 404 /404.html;
          location = /40x.html {
      }

      error_page 500 502 503 504 /50x.html;
          location = /50x.html {
      }
  }
复制代码

看上面的root配置，这里的root配置固定了，如果想实现我们的多测试环境，就需要修改这里，以及我们需要添加server_name的配置。

看下面的例子：

server {
      listen       81;
      server_name ~^(?<branch_name>.+)\_(?<project_name>.+)\.test\.com$;
      root         /data/sites/$project_name/$branch_name;

      # Load configuration files for the default server block.

      location / {
      }

      error_page 404 /404.html;
          location = /40x.html {
      }

      error_page 500 502 503 504 /50x.html;
          location = /50x.html {
      }
  }
复制代码

看下上面的配置，主要看server_name和root部分，这里server_name我们使用了一个正则表达式，其中有两个命名分组，一个项目名称的分组project_name和分支名称的分组branch_name这两个分组在下面root里面需要用到。后面test.com随意取得名称。

在root部分，我们通过使用上面server_name中的命名分组捕获的变量来访问实际的资源，比如我们访问http://master_angular-frontend.test.com:81/

那么这里的project_name就会解析为angular-frontend，branch_name就会解析为master，这样当我们访问这个路径的时候，nginx就会映射到/data/sites/angular-frontend/master目录。

其他的分支也是类似，不过这里又一个问题，就是在饿哦们访问的时候，需要配置192.168.3.62 master_angular-frontend.test.com这样的host，其中 192.168.3.62你nginx所在的服务器了。

如果有DNS的泛域名解析支持，那这里就可以不用Host了。

看下效果

修改CI文件

你可能已经发现了，项目的CI都没有修改，你怎么把文件放到了对应的分支目录里面啊，自己偷偷地额手动创建的吧，没错，这里确实是手动创建的，下面来看下怎么修改下CI文件，让gitlab在执行CI流程的时候，能够自动创建项目名称和分支名称。

如果你有仔细看前面写的文章，就会发现下面这么一句：

- "[ -d /data/sites/koa-server ] && echo ok || mkdir -p /data/sites/koa-server" ## 用来判断目录是否存在，不存在则创建
复制代码

这个就是用来判断目录是否存在的，如果不存在，就创建目录。

我们来看下怎么修改下angular-frontend的这个项目的CI

test:
  script:
    - pwd
    - yarn
    - ng build
    - cp -r ./dist/angular-frontend /data/sites/
复制代码

这是之前的CI配置内容，首先我们像koa-server项目一样，将这里改成2个stage的形式。你可能又要问，改成stage的形式有什么好处了，这个。。。你自己想吧。

stages: 
  - build
  - deploy
before_script: 
  - pwd
  - ls
build: 
  script: 
    - yarn
    - ng build
  stage: build

deploy: 
  script: 
    - "[ -d /data/sites/$CI_PROJECT_NAME/$CI_COMMIT_REF_NAME ] && echo ok || mkdir -p /data/sites/$CI_PROJECT_NAME/$CI_COMMIT_REF_NAME" ## 用来判断目录是否存在，不存在则创建
    - "cp -r ./dist/$CI_PROJECT_NAME /data/sites/$CI_PROJECT_NAME/$CI_COMMIT_REF_NAME" 
  stage: deploy
复制代码

看上面的配置，在里面我们用到了gitlab提供的两个变量，CI_PROJECT_NAME表示项目名称，CI_COMMIT_REF_NAME表示当前的分支名称或者tag名称，可以在CI阶段获取到。这样之后，我们就可以通过在CI阶段将不同项目不同分支的代码，构建完成之后，发布到不同的目录了，然后结合上面的nginx配置，就可以实现多测试环境的功能，是不是很简单？

转载于:https://juejin.im/post/5bc4a326f265da0ae6776a71