4.新增Angular專案的CI指令碼，提交到gitlab實現CI&CD

程式碼推送到gitlab上之後，現在我們就需要編寫專案的ci檔案，這樣gitlab才能執行CI流程。

將專案關聯到Runner

因為Runner可能有多個，專案也可能有多個，那到底哪個專案應該執行哪些Runner，這裡需要指定下。當然，這也看你安裝Runner的Runner的型別。 具體可以看這裡的文件說明 docs.gitlab.com/ce/ci/runne…

看下我安裝的gitlab-runner

因為是specific的，所以需要將Runner關聯到專案之後，專案才可以使用這個Runner。

點選編輯按鈕之後，進入到編輯頁面：

可以看到，我們剛剛建立的專案已經在這裡了，點選enable啟用就好了。

最簡單的CI

在專案的根目錄新增.gitlab-ci.yml檔案，內容如下：

test:
  script:
    - ls
複製程式碼

然後提交程式碼，檢視gitlab的CI執行效果：

從圖中可以看到，我們寫的ci，已經正常執行了。

上面的ci內容，只是執行了ls命令，並沒有做其他的事情，這裡只是先做一個示例。

程式碼提交之後，自動執行安裝編譯

將ci檔案的內容，修改如下：

test:
  script:
    - pwd
    - yarn
    - ng build
    - cp -r ./dist/angular-frontend /data/sites/
複製程式碼

這樣修改之後，在提交了ci檔案之後，就會自動執行script中的命令。

首先輸出當前所在目錄，然後執行yarn安裝依賴包，最後使用ng build命令來構建專案。

執行了ng build之後，我們再將構建好的內容，複製到指定的目錄中去，下一步我們應該配置nginx，讓我們能夠訪問到我們構建好的專案。

nginx配置

首先在伺服器上安裝好nginx，然後新增nginx配置，內容如下： 關於如何在centos上安裝nginx，可以看這篇文章： www.tecmint.com/install-ngi…

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 {
      }
  }
複製程式碼

這裡為什麼要監聽81埠，而不是80？，因為我們現在和gitlab伺服器放在同一個機器上，80已經被gitlab用了，所以這裡使用81，你如果是兩臺不同的機器的話，就沒有這個問題。

新增好上面的內容之後，啟動nginx，然後開啟瀏覽器，訪問：

mygitlab.com:81

效果圖如下：

自動部署（CD）

到這裡為止，基本上所有的配置都弄好了，現在我們修改下專案的程式碼，然後提交，就會自動執行CI構建，構建好之後，會將構建好的專案內容複製到對應的目錄中，然後重新整理瀏覽器，就可以看到最新的內容了。