6.CD階段，提交程式碼之後，根據分支名稱建立獨立的測試環境

zhongzhong05發表於2018-10-15

需求

在開發的時候，我們一般都是多個功能並行開發的，那麼如果我們都在一個分支上開發，是否會有問題？

不說肯定會有問題，但是想象這樣一個場景，有一個功能開發完成了，需要提測了，這個時候，當前的分支是否是穩定分支呢？不是啊，因為還有其他的功能在上面開發，大家會提交程式碼呀，這個時候，如果其他的功能程式碼對當前的功能造成影響，那就每一辦法測試了，而且這樣還會有一個問題，就是我一個單獨的功能，每一辦法單獨測試上線。

多測試環境的搭建

基於上面的需求或者說背景，我們需要給每個功能開一個分支，然後對每一個功能分支提供一個單獨的測試環境，這樣每個功能直接的測試可以並行開展，加快專案的推進速度。

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了。

看下效果

6.CD階段，提交程式碼之後，根據分支名稱建立獨立的測試環境

6.CD階段，提交程式碼之後，根據分支名稱建立獨立的測試環境

修改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配置，就可以實現多測試環境的功能，是不是很簡單？

相關文章