gitlab cicd 部署前端專案(vue or react)至 gce

一般來說單純部署前端其實不需要起一個 vm 去放，只要使用 gcp 的container registry+cloud run就可以了。

但是因為這次接的案子，客戶提供的api僅能用沒有ssl的方式請求，而cloud run部署出來的入口是有ssl的，因此就只好用傳統的部署方式到vm上。

在開始之前，你必須要準備好以下幾件事：

1. 創建一個gcp vm ，並安裝好nginx。
2. 將專案放在gitlab上。

---

新增.gitlab-ci.yml在專案根目錄

這邊我們使用的是node和gcloud，分成兩部分：第一部分是編譯，就是單純的yarn build環節；第二部分是部署，將編譯好的打包擋放到vm上。

stages:
  - build
  - deploy
Build:
  stage: build
  image: node:14.13.1
  before_script:
    - yarn
  script:
    - yarn build
  cache:
    untracked: true
    paths:
      - node_modules/
  artifacts:
    paths:
      - ./dist
  only:
    - develop

Deploy:
  stage: deploy
  image: google/cloud-sdk
  before_script:
    - echo $GCP_SERVICE_KEY > gcloud-service-key.json # Google Cloud service accounts
    - gcloud auth activate-service-account --key-file gcloud-service-key.json
  script:
    - gcloud config set project $GCP_PROJECT_ID
    - gcloud compute scp --recurse dist/* $GCP_INSTANCE:/var/www/your-project --zone=asia-east1-b
  dependencies:
    - Build
  only:
    - develop

• only：因為我是要快速測試，所以我都使用develop分支觸發部署，但是之後應該都要使用master觸發或者是特定的tag名稱，才不會每次小修改上傳到devlop就直接推到 vm 上了。
• $GCP_SERVICE_KEY：在gitlab介面中，setting –> CICD –> Variables 裡面去新增 key為GCP_SERVICE_KEY，value為vm 服務帳戶產生的金鑰json檔內容。
• gcloud compute scp：最重要的就是這行搬檔案的指令，將dist打包好的內容搬到你遠端要讓nginx顯示的路徑下。
• –zone：vm的所在位置，可以在gcp console介面上找到。

---

設定nginx

把檔案搬上去vm之後，將nginx多一個監聽口，讓新網站可以使用XXX.XXX.XX.XX:port去預覽。

請先確保你的 /etc/nginx/nginx.conf 裡面有沒有下面這個指令：

沒有就自己加上去，這樣等等新增檔案才會被讀取到。

include /etc/nginx/conf.d/*

到 /etc/nginx/conf.d/ 裡面新增一個檔案 your-project.conf

server {
    listen    5000;
    servername    localhost;
    
    location / {
        root    /var/www/your-project;
        index    index.html index.html;
        try_files    $uri $uri/ /index.html;
    }
}

儲存之後，重啟nginx

$ sudo systemctl restart nginx

這時候就可以從http://XXX.XXX.XX.XX:5000瀏覽你的網站囉！記得是沒有https的。