在gitlab部署vue專案到cloud run

vue 專案目前放在 gitlab 上管理，為什麼不放在 github？因為環境變數.env、config 檔案都無法進入 git 記錄，很麻煩。如果你是想要展示作品，可以放在 github，但是如果是一個有機密資料的專案，我還是都會選擇放到 gitlab，而且 gitlab 的 CICD 自動化部署真的是很方便。

對我來說最熟悉的免費空間就是 gcp，因為 google 提供幾乎是你常用的所有部署方式在 gcp 上面，部分功能是完全免費的，如果只是想要放放作品集，gcp 是非常夠用。

部署前你需要擁有的東西：

1. vue project
2. gitlab project
3. gcp project : 請參考官網
4. 撰寫Dockerfile
5. 撰寫.gitlab-ci.yml
6. 部署！

---

撰寫Dockerfile

vue專案的Dockerfile在網路上有很多，我自己也有分享一篇（請參考下面），在這邊就不贅述，直接上code！

如何使用 Docker 打包 vue 專案

FROM node:14.13.1
WORKDIR /usr/src/app
RUN yarn global add serve
COPY package.json yarn.lock ./
RUN yarn install && yarn cache clean
COPY . .
RUN yarn build
EXPOSE 8080
CMD [ "yarn", "start" ]

備註補充一下我的scripts，請參考start那一個就好。

{  
  "scripts": {
    "serve": "vue-cli-service serve",
    "serve:prod":"vue-cli-service serve --mode production",
    "build": "vue-cli-service build",
    "start": "PORT=8080 serve -s dist",
    "push":"sh deploy.sh",
    "lint": "vue-cli-service lint"
  },
//...
}

 

撰寫.gitlab-ci.yml

在根目錄新增一個檔案.gitlab-ci.yml，貼上以下內容：

image: docker:latest
stages:
  - deploy
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 builds submit --tag asia.gcr.io/$GCP_PROJECT_ID/joinme-manager
    - gcloud run deploy joinme-manager --image=asia.gcr.io/$GCP_PROJECT_ID/joinme-manager --platform managed --region asia-east1
  only:
    - master

在第 8 行你會看到一個$GCP_SERVICE_KEY，這是 gitlab-ci 呼叫參數的寫法，表示你必須設定一個參數叫做GCP_SERVICE_KEY，然後把內容貼進去。

會使用參數是因為我們可能不想把敏感參數顯示出來，又或者我們想修改某些參數但不想每次改非程式內容的東西都要 commit 一個新版本，就可以選擇把一些資訊放在 gitlab-ci 的參數裡。

而這邊第 9 行的作用就是我們要執行cloud指令必須要先驗證通過身份，其中一個方法就是使用json金鑰。

怎麼放呢？進入你的 gitlab project > Settings > CI/CD > Variables

點擊Add Variable，在key的地方輸入GCP_SERVICE_KEY，value的地方填上你的json金鑰。（如果你需要，你也可以加上一個PROJECT_ID）

 

如何取得json金鑰？

想了解詳細原文可以參考官網

進入此頁，選擇你的專案，你會看到你至少會有一個服務帳號叫做{project_id}@appspot.gserviceaccount.com，在他的右邊有一個...符號，點一下選擇建立金鑰，他就會把 json 檔案下載到你的電腦，記得再把json檔整個內容複製貼到 gitlab 的 variable 。

 

再來解釋一下第13行，指令原始為：

$ gcloud run deploy [SERVICE] --image=[IMAGE] --platform managed --region asia-east1

SERVICE : 進入cloud run，這邊的名稱（name）就是你的 service

--platform : 因為我沒有選擇用k8s或是其他的方案，所以我填managed，詳細參數請參考這裏

--region : 進入cloud run，這邊的區域（Region）就是你的 region(如上圖就是：us-central1)

 

部署

記得把剛剛的修改都 commit 上去 gitlab，然後可以看到yml檔最後一行我們是用master觸發部署，所以把剛剛改動的推上master就會觸發自動部署了。

推上去後可以到 gitlab project > CI/CD > Pipelines 查看是否成功。