丟給 github actions 跑就對啦!
利用 Github Actions 部署你的專案到 GCP Cloud Run 上吧!
前言
在 GCP 環境部署中,提供了網頁上 GUI 的操作、Cloud SDK,
此外你也可以使用 Github Actions 將你的專案部署到 Cloud Run。
本文將介紹如何使用 GoogleCloudPlatform 開源的 github actions,將專案部署到 Cloud Run。
專案部分使用 CRA ( create-react-app ) 作為範例,並將 build 好的專案,搭配 nginx 伺服器。
最後,本篇電腦作業系統環境使用 macOS,
對於 Windows 的朋友抱歉了,但設定與操作大同小異!
本篇文章專案範例放置於:
https://github.com/explooosion/react-gcp-deploy-example
本篇可能需要具備的微薄知識:
- Google Cloud Platform
- Github Actions
- Cloud Run
- React
- Nginx
- Docker
- Terminal
- Git
- YAML
由於本篇屬於入門教學,因此設定上大多為預設值。
由於本篇屬於入門教學,內文會有些圖文並茂。
由於本篇屬於入門教學,上述知識略懂聽過即可。
流程說明
大致上工作流程 Workflow 如下:
- 透過設定好的 github actions,會將專案建置成 docker image
- 將 image 發佈到 Container Registry 存放
- 使用 Container Registry 存放的 image 建立 Cloud Run 服務
目錄
- 安裝 gCloud CLI ( Installing Google Cloud SDK )
- 建立 GCP 專案 ( Creating Your Project )
- 建立服務帳戶 ( Creating and managing service account keys )
- 建立 CRA 專案 ( Create React App )
- 建立 Github Actions ( Workflow syntax for GitHub Actions )
- 新增 Github Secrets ( Encrypted secrets )
- Push 專案 & 檢視 Actions
- 啟用 API 服務 ( API Library )
- 新增 Docker & 修改 yml
- 查看 Container Register & Cloud Run
1. 安裝 gCloud CLI ( Installing Google Cloud SDK )
雖然本文操作建立大多使用友善的瀏覽器,
但安裝 CLI 有時也能幫助到我們進行操作,因此建議安裝。
下載好 google-cloud-sdk-313.0.1-darwin-x86_64.tar.gz 並解壓縮後,以指令安裝。
./google-cloud-sdk/install.sh
./google-cloud-sdk/bin/gcloud init
或者下指令登入,再重新 gcloud init 取得專案資料,
gcloud auth login
你可以嘗試確認現在電腦已授權登入的 google 帳戶
gcloud auth list
你可以嘗試確認電腦 gCloud 環境狀態
gcloud info
2. 建立 GCP 專案 ( Creating Your Project )
到 GCP 上,建立你的專案,例如 my-project ( 筆者隨便決定的 )。
完成後到首頁,可以看到你的專案資訊。
3. 建立服務帳戶 ( Creating and managing service account keys )
由於我們使用 Github Actions 存取 GCP,自然也要有身份驗證。
到 IAM 與管理頁面 - 服務帳戶,點選 +建立服務帳戶
下方資料,看各位想怎麼填都可。
根據 cloud build github-actions,我們會用到的角色如下:
-
Cloud Run Admin
- allows for the creation of new services -
Cloud Build Editor
- allows for deploying cloud builds -
Cloud Build Service Account
- allows for deploying cloud builds -
Viewer
- allows for viewing the project -
Service Account User
- required to deploy services to Cloud Build
因此請選擇以下的角色名稱:
如果你覺得很麻煩,權限設定部分可先給最大的擁有者。
完成後在右邊選擇建立金鑰。
由於私密金鑰只能下載一次,務必保存好。
內容格式應該類似下方:
這份金鑰我們會用在 Github Actions 的 Secrets 中
{
"type": "service_account",
"project_id": "project-id",
"private_key_id": "key-id",
"private_key": "-----BEGIN PRIVATE KEY-----\nprivate-key\n-----END PRIVATE KEY-----\n",
"client_email": "service-account-email",
"client_id": "client-id",
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
"token_uri": "https://accounts.google.com/o/oauth2/token",
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
"client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/service-account-email"
}
4. 建立 CRA 專案 ( Create React App )
接著可以建立專案了:
npx create-react-app my-app
5. 建立 Github Actions ( Workflow syntax for GitHub Actions )
建立 workflow,專案參考 setup-gcloud。
[ .github / workflows / main.yml ]
name: Build and Deploy to Cloud Run
on:
push:
branches:
- master
jobs:
setup-build-deploy:
name: Setup, Build, and Deploy
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
# Setup gcloud CLI
- uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
with:
version: '286.0.0'
service_account_email: ${{ secrets.GCP_SA_EMAIL }}
service_account_key: ${{ secrets.GCP_SA_KEY }}
project_id: ${{ secrets.GCP_PROJECT_ID }}
export_default_credentials: true
# Print gcloud info
- name: Info
run: gcloud info
- 根據說明,checkout@v2 務必使用 v2
- secrets.GCP_SA_EMAIL:到時候要到 github 建立 secrets
- secrets.GCP_SA_KEY:到時候要到 github 建立 secrets
- secrets.GCP_PROJECT_ID:到時候要到 github 建立 secrets
- run: gcloud info:執行命令 gcloud info
6. 新增 Github Secrets ( Encrypted secrets )
在 github 建立你的 repo,之後到 Settings 選擇 Secrets。
點選 New secret,根據前一步驟的 yml,我們會需要用到以下三個 secrets:
- GCP_PROJECT_ID:一開始建立專案時給予的 id,你也可以從剛剛 金鑰 json 找到
- GCP_SA_KEY:打開 金鑰 json ,將所有內容複製貼上
- GCP_SA_EMAIL:打開 金鑰 json ,可以從 client_email 找到,或者回到 IAM 的 服務帳戶 找到
完成如下:
7. Push 專案 & 檢視 Actions
把你的專案 push 到 github,接著就可以看到 Actions 在執行囉!
展開 Run gcloud info,就可以看到指令的結果了!
8. 啟用 API 服務 ( API Library )
在這一步,我們將要把專案用 docker 建立成 image,並發佈到 Container Registry。
接著使用 Container Registry 的映像檔,為我們建立 Cloud Run。
以下 yml 利用 gcloud builds submit、gcloud run deploy 等指令操作。
由於我們尚未開通使用 Container Registry 服務,
請先到該頁面選擇啟用 Container Registry API。
以下為必啟用的 API,可到 API 程式庫 尋找並安裝:
由於我們要使用 gcloud build, gcloud run deploy 等指令,協助我們部署到 Cloud Run,
因此需要啟用 Cloud Build API 和 Cloud Run API 。
以上有任何缺少的服務啟用,很可能會在 Github Actions 階段噴錯,
例如 Cloud Build API 沒啟用的錯誤:
9. 新增 Docker & 修改 yml
接著開始撰寫 Dockerfile 吧!
[ Dockerfile ]
可根據自己的專案撰寫,此專案筆者將專案 build 後放置於 nginx html。
FROM node:10 AS Builder
ENV NPM_CONFIG_LOGLEVEL info
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY . .
ARG GENERATE_SOURCEMAP=false
RUN yarn install && yarn build
FROM nginx:1.13.3-alpine
RUN rm -rf /usr/share/nginx/html/*
COPY --from=Builder /usr/src/app/build /usr/share/nginx/html
[ .dockerignore ]
加入一點忽略規則。
Dockerfile
README.md
node_modules
npm-debug.log
[ .github / workflows / main.yml ]
name: Build and Deploy to Cloud Run
on:
push:
branches:
- master
env:
PROJECT_ID: ${{ secrets.GCP_PROJECT_ID }}
SERVICE_NAME: create-react-app
RUN_REGION: us-central1
jobs:
setup-build-deploy:
name: Setup, Build, and Deploy
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
# Setup gcloud CLI
- uses: GoogleCloudPlatform/github-actions/setup-gcloud@master
with:
version: '286.0.0'
service_account_email: ${{ secrets.GCP_SA_EMAIL }}
service_account_key: ${{ secrets.GCP_SA_KEY }}
project_id: ${{ secrets.GCP_PROJECT_ID }}
export_default_credentials: true
# Print gcloud info
- name: Info
run: gcloud info
# Build and push image to Google Container Registry
- name: Build
run: |-
gcloud builds submit \
--quiet \
--tag "gcr.io/$PROJECT_ID/$SERVICE_NAME:$GITHUB_SHA"
# Deploy image to Cloud Run
- name: Deploy
run: |-
gcloud run deploy "$SERVICE_NAME" \
--quiet \
--region "$RUN_REGION" \
--image "gcr.io/$PROJECT_ID/$SERVICE_NAME:$GITHUB_SHA" \
--platform "managed" \
--port 80 \
--allow-unauthenticated
- env 的參數是要給後面 gcloud 指令使用
- PROJECT_ID:是你原專案名稱,使用 secret 的 ${{ secrets.GCP_PROJECT_ID }} 即可
- SERVICE_NAME:是你 image 在 container register 的名稱
- gcr.io 是 container register 的網址,我們發佈的映像檔網域
接著就可以 git push,看看跑完的結果吧~
10. 查看 Container Register & Cloud Run
當 github action 順利建置好並發佈 image 後,
就能看到 image 在列表中了,並且是以私人的方式發佈!
當 github actions 完全跑完後,就可以查看服務。
點進去查看,可以看到網址,那就是你的服務公開網址囉!
看!他在動!
本篇文章專案範例放置於:
https://github.com/explooosion/react-gcp-deploy-example
REF
有勘誤之處,不吝指教。ob'_'ov