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在專案根目錄

這邊我們使用的是nodegcloud,分成兩部分:第一部分是編譯,就是單純的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的。

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。