Robby - 全端的 Front-End Engineer

沒有天資聰穎，只是比別人花更多的時間沈浸在這世界裡。

2020-10-09

GCP - 使用 Github Actions 部署 React 到 Cloud Run

丟給 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

 

若有時間，再針對 GKE ( Google Kubernetes Engine ) 部署方式撰寫文章。

 

本篇可能需要具備的微薄知識：

  1. Google Cloud Platform
  2. Github Actions
  3. Cloud Run
  4. React
  5. Nginx
  6. Docker
  7. Terminal
  8. Git
  9. YAML

 

由於本篇屬於入門教學，因此設定上大多為預設值。

由於本篇屬於入門教學，內文會有些圖文並茂。

由於本篇屬於入門教學，上述知識略懂聽過即可。

 

 

流程說明

大致上工作流程 Workflow 如下：

  1. 透過設定好的 github actions，會將專案建置成 docker image
  2. 將 image 發佈到 Container Registry 存放
  3. 使用 Container Registry 存放的 image 建立 Cloud Run 服務

 

 

目錄

  1. 安裝 gCloud CLI ( Installing Google Cloud SDK )
  2. 建立 GCP 專案 ( Creating Your Project )
  3. 建立服務帳戶 ( Creating and managing service account keys )
  4. 建立 CRA 專案 ( Create React App )
  5. 建立 Github Actions ( Workflow syntax for GitHub Actions )
  6. 新增 Github Secrets ( Encrypted secrets )
  7. Push 專案 ＆ 檢視 Actions
  8. 啟用 API 服務 ( API Library )
  9. 新增 Docker & 修改 yml
  10. 查看 Container Register & Cloud Run

 

 

 

 

1. 安裝 gCloud CLI ( Installing Google Cloud SDK )

雖然本文操作建立大多使用友善的瀏覽器，

但安裝 CLI 有時也能幫助到我們進行操作，因此建議安裝。

 

請先安裝好 python，不再特別說明此步驟。

 

下載好 google-cloud-sdk-313.0.1-darwin-x86_64.tar.gz 並解壓縮後，以指令安裝。

./google-cloud-sdk/install.sh
./google-cloud-sdk/bin/gcloud init
接著可能會跳出網頁要你登入、並且選擇你的專案。

 

或者下指令登入，再重新 gcloud init 取得專案資料，

可參考 Initializing Cloud SDK。

gcloud auth login

 

你可以嘗試確認現在電腦已授權登入的 google 帳戶

gcloud auth list

 

你可以嘗試確認電腦 gCloud 環境狀態

gcloud info
後續會我們會讓 Github Actions 嘗試呼叫 gcloud info

 

 

 

2. 建立 GCP 專案 ( Creating Your Project )

到 GCP 上，建立你的專案，例如 my-project ( 筆者隨便決定的 )。

 

完成後到首頁，可以看到你的專案資訊。

專案名稱、專案 ID、專案編號 後續會使用到，請務必留意。

 

 

 

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

 

因此請選擇以下的角色名稱：

此圖是後來筆者重新到 IAM 建立角色，故有些畫面不同。

 

 

如果你覺得很麻煩，權限設定部分可先給最大的擁有者。

 

完成後在右邊選擇建立金鑰。

 

由於私密金鑰只能下載一次，務必保存好。

 

內容格式應該類似下方：

這份金鑰我們會用在 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

 

如果你會使用 Docker 部署環境，那麼你可以替換成你想部署的專案。

 

 

 

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：

  1. GCP_PROJECT_ID：一開始建立專案時給予的 id，你也可以從剛剛 金鑰 json 找到 
  2. GCP_SA_KEY：打開 金鑰 json ，將所有內容複製貼上
  3. GCP_SA_EMAIL：打開 金鑰 json ，可以從 client_email 找到，或者回到 IAM 的 服務帳戶 找到

 

命名方式自由選擇，記得 yml 要一樣就好。
你也可以把 金鑰.json 轉 base64 貼到 GCP_SA_KEY 儲存，指令： base64 -i key.json

 

完成如下：

 

 

 

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

 

本頁段落

Me

Robby's Github

Commit

Robby's Github chart

GithubSummary

github-profile-summary

Counter

カウンター カウンター

系列文章

標籤雲

贊助商連結

最新留言