使用 Cloud Build 在 Cloud Run 進行持續部屬 (整合github)

Overview

在本篇文章中，將會設定 Cloud Run，以便每當將程式修改並推送到 GitHub 時，它都會自動構建和部署應用程序的最新版本。

在本文中會將用戶數據保存到 Firestore，但是只有部分數據被正確保存。我們會修正錯誤的程式並推送到 GitHub ，Cloud Build 會自動地部屬更新過的新版本應用程式。

前置作業

1. 啟用 Cloud Shell

有兩種方法。可以從 console 的右上角打開終端機或是到 https://shell.cloud.google.com/ 會打開純文字的 shell 介面(我比較喜歡這種)

2. PROJECT 的設定和身分驗證

gcloud auth list
# 驗證身分
gcloud config list project
# 確認當下要使用的 PROJECT
gcloud config set project <PROJECT_ID>
# 更改要使用的 PROJECT

3. 啟用所需的 API 和設定環境變數

gcloud services enable run.googleapis.com \\
    cloudbuild.googleapis.com \\
    firestore.googleapis.com \\
    iamcredentials.googleapis.com

REGION=<YOUR-REGION>
PROJECT_ID=<YOUR-PROJECT-ID>
PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format='value(projectNumber)')
SERVICE_ACCOUNT="firestore-accessor"
SERVICE_ACCOUNT_ADDRESS=$SERVICE_ACCOUNT@$PROJECT_ID.iam.gserviceaccount.com

4. 建立 Cloud Run 要使用的 service account

gcloud iam service-accounts create $SERVICE_ACCOUNT \\
  --display-name="Cloud Run access to Firestore"

gcloud projects add-iam-policy-binding $PROJECT_ID \\
  --member serviceAccount:$SERVICE_ACCOUNT_ADDRESS \\
  --role=roles/datastore.user
# grant the service account read and write access to Firestore

創建和設定一個 Firebase project

1. 在 Firebase console, 點擊  Add project.
2. 輸入 <YOUR_PROJECT_ID> ，接受 Firebase terms 規範
3. 點擊 Continue.
4. 點擊 Confirm Plan 來確定 Firebase 的 billing plan.
5. Enable Google Analytics for this codelab (optional)
6. 點擊 Add Firebase.
7. project 建立完後, 點擊 Continue.
8. 從左側 Build 清單, 點擊 Firestore database.
9. 點擊 Create database.
10. 選擇 region 後, 點擊 Next.
11. 使用預設的 Start in production mode, 點擊 Create.

創建 application

1. 建立並進入工作資料夾

mkdir cloud-run-github-cd-demo && cd $_

2. 新增檔案 package.json

cat <<EOF >> package.json
{
  "name": "cloud-run-github-cd-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node app.js",
    "nodemon": "nodemon app.js",
    "tailwind-dev": "npx tailwindcss -i ./input.css -o ./public/output.css --watch",
    "tailwind": "npx tailwindcss -i ./input.css -o ./public/output.css",
    "dev": "npm run tailwind && npm run nodemon"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@google-cloud/firestore": "^7.3.1",
    "axios": "^1.6.7",
    "express": "^4.18.2",
    "htmx.org": "^1.9.10"
  },
  "devDependencies": {
    "nodemon": "^3.1.0",
    "tailwindcss": "^3.4.1"
  }
}
EOF

3. 新增檔案 app.js

cat <<EOF >> app.js
const express = require("express");
const app = express();
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
const path = require("path");
const { get } = require("axios");

const { Firestore } = require("@google-cloud/firestore");
const firestoreDb = new Firestore();

const fs = require("fs");
const util = require("util");
const { spinnerSvg } = require("./spinnerSvg.js");

const service = process.env.K_SERVICE;
const revision = process.env.K_REVISION;

app.use(express.static("public"));

app.get("/edit", async (req, res) => {
    res.send(`<form hx-post="/update" hx-target="this" hx-swap="outerHTML">
                <div>
  <p>
    <label>Name</label>    
    <input class="border-2" type="text" name="name" value="Cloud">
    </p><p>
    <label>Town</label>    
    <input class="border-2" type="text" name="town" value="Nibelheim">
    </p>
  </div>
  <div class="flex items-center mr-[10px] mt-[10px]">
  <button class="btn bg-blue-500 text-white px-4 py-2 rounded-lg text-center text-sm font-medium mr-[10px]">Submit</button>
  <button class="btn bg-gray-200 text-gray-800 px-4 py-2 rounded-lg text-center text-sm font-medium mr-[10px]" hx-get="cancel">Cancel</button>  
                ${spinnerSvg} 
                </div>
  </form>`);
});

app.post("/update", async function (req, res) {
    let name = req.body.name;
    let town = req.body.town;
    const doc = firestoreDb.doc(`demo/${name}`);

    //TODO: fix this bug
    await doc.set({
        name: name
        /* town: town */
    });

    res.send(`<div hx-target="this" hx-swap="outerHTML" hx-indicator="spinner">
                <p>
                <div><label>Name</label>: ${name}</div>
                </p><p>
                <div><label>Town</label>: ${town}</div>
                </p>
                <button
                    hx-get="/edit"
                    class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium mt-[10px]"
                >
                    Click to update
                </button>               
            </div>`);
});

app.get("/cancel", (req, res) => {
    res.send(`<div hx-target="this" hx-swap="outerHTML">
                <p>
                <div><label>Name</label>: Cloud</div>
                </p><p>
                <div><label>Town</label>: Nibelheim</div>
                </p>
                <div>
                <button
                    hx-get="/edit"
                    class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium mt-[10px]"
                >
                    Click to update
                </button>                
                </div>
            </div>`);
});

const port = parseInt(process.env.PORT) || 8080;
app.listen(port, async () => {
    console.log(`booth demo: listening on port ${port}`);

    //serviceMetadata = helper();
});

app.get("/helper", async (req, res) => {
    let region = "";
    let projectId = "";
    let div = "";

    try {
        // Fetch the token to make a GCF to GCF call
        const response1 = await get(
            "<http://metadata.google.internal/computeMetadata/v1/project/project-id>",
            {
                headers: {
                    "Metadata-Flavor": "Google"
                }
            }
        );

        // Fetch the token to make a GCF to GCF call
        const response2 = await get(
            "<http://metadata.google.internal/computeMetadata/v1/instance/region>",
            {
                headers: {
                    "Metadata-Flavor": "Google"
                }
            }
        );

        projectId = response1.data;
        let regionFull = response2.data;
        const index = regionFull.lastIndexOf("/");
        region = regionFull.substring(index + 1);

        div = `
        <div>
        This created the revision <code>${revision}</code> of the 
        Cloud Run service <code>${service}</code> in <code>${region}</code>
        for project <code>${projectId}</code>.
        </div>`;
    } catch (ex) {
        // running locally
        div = `<div> This is running locally.</div>`;
    }

    res.send(div);
});
EOF

4. 新增檔案 spinnerSvg.js

cat << EOF > spinnerSvg.js
module.exports.spinnerSvg = `<svg id="spinner" alt="Loading..."
                    class="htmx-indicator animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500"
                    xmlns="<http://www.w3.org/2000/svg>"
                    fill="none"
                    viewBox="0 0 24 24"
                >
                    <circle
                        class="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        stroke-width="4"
                    ></circle>
                    <path
                        class="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path>
                </svg>`;
EOF

5. 新增檔案 input.css

cat << EOF > input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
EOF

6. 新增檔案 tailwind.config.js

cat << EOF > tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./**/*.{html,js}"],
    theme: {
        extend: {}
    },
    plugins: []
};
EOF

7. 新增檔案 .gitignore

cat << EOF > .gitignore
node_modules/

npm-debug.log
coverage/

package-lock.json

.DS_Store
EOF

8. 建立子資料夾public並進入資料夾

mkdir public && cd public

9. 新增檔案 index.html

cat << EOF > index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <script
            src="<https://unpkg.com/htmx.org@1.9.10>"
            integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
            crossorigin="anonymous"
        ></script>

        <link href="./output.css" rel="stylesheet" />
        <title>Demo 1</title>
    </head>
    <body
        class="font-sans bg-body-image bg-cover bg-center leading-relaxed"
    >
        <div class="container max-w-[700px] mt-[50px] ml-auto mr-auto">
            <div class="hero flex items-center">                    
                <div class="message text-base text-center mb-[24px]">
                    <h1 class="text-2xl font-bold mb-[10px]">
                        It's running!
                    </h1>
                    <div class="congrats text-base font-normal">
                        Congratulations, you successfully deployed your
                        service to Cloud Run. 
                    </div>
                </div>
            </div>

            <div class="details mb-[20px]">
                <p>
                    <div hx-trigger="load" hx-get="/helper" hx-swap="innerHTML" hx-target="this">Hello</div>                   
                </p>
            </div>

            <p
                class="callout text-sm text-blue-700 font-bold pt-4 pr-6 pb-4 pl-10 leading-tight"
            >
                You can deploy any container to Cloud Run that listens for
                HTTP requests on the port defined by the
                <code>PORT</code> environment variable. Cloud Run will
                scale automatically based on requests and you never have to
                worry about infrastructure.
            </p>

            <h1 class="text-2xl font-bold mt-[40px] mb-[20px]">
                Persistent Storage Example using Firestore
            </h1>
            <div hx-target="this" hx-swap="outerHTML">
                <p>
                <div><label>Name</label>: Cloud</div>
                </p><p>
                <div><label>Town</label>: Nibelheim</div>
                </p>
                <div>
                <button
                    hx-get="/edit"
                    class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium mt-[10px]"
                >
                    Click to update
                </button>                
                </div>
            </div>

            <h1 class="text-2xl font-bold mt-[40px] mb-[20px]">
                What's next
            </h1>
            <p class="next text-base mt-4 mb-[20px]">
                You can build this demo yourself!
            </p>
            <p class="cta">
                <button
                    class="bg-blue-500 text-white px-4 py-2 rounded-lg text-center text-sm font-medium"
                >
                    VIEW CODELAB
                </button>
            </p> 
        </div>
   </body>
</html>
EOF

在地端測試應用程式

1. 給予 datastore.user 權限

USER=<YOUR_PRINCIPAL_EMAIL>

gcloud projects add-iam-policy-binding $PROJECT_ID \\
  --member user:$USER \\
  --role=roles/datastore.user

2. 驗證身分，會進入到一個登入畫面，登入後複製驗證碼貼到終端機上

gcloud auth application-default login

3. 執行應用程式

cd ~/cloud-run-github-cd-demo

npm install

npm run dev

4. 新增另外一個終端機使用指令確認應用程式成功運行

curl http://localhost:8080

新增 GitHub Repository

1. 在 Cloud Shell 設定 Git (optional，第一次設定)

git config --global user.name <yujie70338>
git config --global user.email yujie70338@gmail.com

2. 進行 Git 初始化，並下第一次的 commit

git init
git branch -M main
git add .
git commit -m "first commit for express application"

3. 在 GitHub 建立一個 repo

4. 設定地端 git 的 origin 為剛剛建立的 repo，並推送程式碼

# git remote add origin <https://github.com/yujie70338/cloud-run-auto-deploy-codelab.git> #使用https推送，輸入github帳密
git remote add origin git@github.com:yujie70338/cloud-run-auto-deploy-codelab.git #使用SSH推送，設定 SSH key

git push -u origin main

5. 推送後的 repo

設定持續部屬 Continuous Deployment

1. 前往  Cloud Console for Cloud Run 頁面
2. 點擊 Create a Service
3. 點擊 Continuously deploy from a repository
4. 點擊 SET UP CLOUD BUILD.
5. 在 Source repository 底下

-選擇 GitHub as the Repository Provider

-點擊 Manage connected repositories 以設定 Cloud Build 存取到 Github repo

-選擇剛建立的 repo 點擊 Next

6. 在 Build Configuration 底下

-設定 Branch 為 ^main$

-設定 Build Type 為 Go, Node.js, Python, Java, .NET Core, Ruby or PHP via Google Cloud's buildpacks

7. 設定 Build context directory 為 /
8. 點擊 Save

9. 在 Authentication 底下

-點擊 Allow unauthenticated invocations

10. 在 Container(s), Volumes, Networking, Security 底下

點擊 Security tab, 選擇剛剛建立的 service account (Cloud Run access to Firestore)

11. 點擊 CREATE

修正應用程式的 bug

1. 修改 app.js (第29行)

 //TODO: fix this bug
    await doc.set({
        name: name
    });
    
 

2. 修改後 app.js

//fixed town bug
    await doc.set({
        name: name,
        town: town
    });

3. 在地端進行測試

npm run start

4. 測試成功後推送到 GitHub repo 的 main 分支

git add .
git commit -m "fixed town bug"

git push origin main

驗證自動部屬

1. Cloud Run

2. Cloud Build

3. 網頁檢查

本文介紹了使用 Cloud Build 在 Cloud Run 進行持續部屬 (整合github)，如果你喜歡這篇文章歡迎幫我按愛心鼓勵一下喔!~閱讀愉快!~

延伸閱讀

參考資料

• https://codelabs.developers.google.com/codelabs/how-to-deploy-github-cloud-run-using-cloud-build?hl=en#0
• https://cloud.google.com/run/docs/continuous-deployment-with-cloud-build