使用docker把網站部署到gcp

如果你的電腦有安裝docker，要把網站送上gcp就是一件超簡單的事～

進行下面步驟之前，請先：

1. 使用一個 gmail 登入 gcp
2. 創建一個 gcp 專案
3. 在自己電腦安裝 docker

如果你上述步驟都已完成，請往下開始吧！

 

找到自己的gcp專案ID

在 gcp 網站搜尋「IAM 管理」，點擊「設定」，就可以看到自己的專案ID，先記錄起來，等一下下docker指令會用到。

注意，我們要的是「專案ID」，不是專案名稱喔！

 

啟用container registry

container registry 是 gcp 放 docker image 的地方，他會為你所有 image 創建獨立編號，所以你不用擔心你上傳一樣 tag 的 image 會不小心被覆蓋掉，每個上傳的 image 都有時間記號，可以找到所有上傳的 image 版本。

你也可以上傳不同名稱的 image，gcp 也會自動幫你分資料夾。

假設你上傳 pro1:latest 和 pro2:latest這兩個 image，之後你又上傳一次 pro1:latest 和 pro2:latest，這時候你的 container registry 就會有 pro1 和 pro2 兩個資料夾，點進去就會各有兩個版本的 image。

點選這裡來啟用 gcp 的 container registry。

進去之後請先選取你的專案，並照著他的步驟走就可以了。

 

選擇主機位置

gcp 提供四種主機位置給你選擇，gcr.io、us.gcr.io、eu.gcr.io、asia.gcr.io

因為我在亞洲地區，所以我都是選asia.gcr.io。

先記起來就好，一樣等等會用到。

 

build docker image

請先確保你的專案根目錄已經有Dockerfile，還沒有的人可以參考以下文章：

如何使用 Docker 打包 vue 專案

打包 gcp 使用的 docker image 的指令：

$ docker build -t [主機名稱]/[專案ID]/[image名稱]:[版本] .

套上我們剛剛找到的資料就是：

$ docker build -t asia.gcr.io/joinme0000333/joinme-manager:latest .

如果你另外有後端專案，也可以使用不同名稱：

$ docker build -t asia.gcr.io/joinme0000333/joinme-manager-backend:latest .

至於為什麼是latest，因為我懶得打版本號ＸＤ 每次都是latest覆蓋就對了～

 

docker push

$ docker push [主機名稱]/[專案ID]/[image名稱]:[版本] 

推上去之後就可以到 gcp –> container registry 去看看有沒有你推上去的 image 囉！

 

啟動網站

至目前為止，我們只是把 image 推上去 gcp 而已，我們最終目的是要讓網站可以有一個網址在瀏覽器被打開預覽。

在這邊我使用的是 Cloud Run !

點選其中一個你剛剛 push 的 image，然後在「部署」的下拉選單選擇「部署至 Cloud Run」。

地區選擇 asia-east1 (Taiwan)

你也可以選別的拉，我是不知道有啥差別。

容器映像檔網址 gcp 會自動幫你帶入你剛剛選的那個 image，只要確保他是latest就好。

這邊就全部允許，如果你的網站之後有些安全性問題，想要新增權限再來增加。

按下「建立」之後，等他跑一下出現綠色勾勾，就可以點這個網址來預覽你的網站囉！