使用docker把網站部署到gcp

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

進行下面步驟之前,請先:

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

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

 

找到自己的gcp專案ID

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

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

尋找gcp的專案id

 

啟用container registry

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

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

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

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

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

 

選擇主機位置

gcp 提供四種主機位置給你選擇,gcr.ious.gcr.ioeu.gcr.ioasia.gcr.io

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

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

 

build docker image

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

打包 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,因為我懶得打版本號XD 每次都是latest覆蓋就對了~

 

docker push

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

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

gcp 中存放image的container registry
gcp 中存放image的container registry
每次上傳 gcp container registry 都會有不同編號的 image,所以舊的不怕被覆蓋掉。
每次上傳 gcp container registry 都會有不同編號的 image,所以舊的不怕被覆蓋掉。

 

啟動網站

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

在這邊我使用的是 Cloud Run !

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

將 docker image 部署至 cloud run
將 docker image 部署至 cloud run

地區選擇 asia-east1 (Taiwan)

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

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

選擇要使用哪個 image 來部署至 cloud run

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

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

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

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

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

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

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

| 前後端技術合作 |

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

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

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