在gitlab部署vue專案到cloud run

vue 專案目前放在 gitlab 上管理,為什麼不放在 github?因為環境變數.envconfig 檔案都無法進入 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!

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_KEYvalue的地方填上你的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 查看是否成功。

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

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

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

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

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

| 前後端技術合作 |

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

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

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