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

Marcos

發佈於Marcos談科技

更新於 2024/06/20發佈於 2024/04/27閱讀時間約 29 分鐘

Overview

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

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

前置作業

啟用 Cloud Shell

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

PROJECT 的設定和身分驗證

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

啟用所需的 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

建立 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

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

創建 application

建立並進入工作資料夾

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

新增檔案 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

新增檔案 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

新增檔案 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

新增檔案 input.css

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

新增檔案 tailwind.config.js

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

新增檔案 .gitignore

cat << EOF > .gitignore
node_modules/

npm-debug.log
coverage/

package-lock.json

.DS_Store
EOF

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

mkdir public && cd public

新增檔案 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

在地端測試應用程式

給予 datastore.user 權限

USER=<YOUR_PRINCIPAL_EMAIL>

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

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

gcloud auth application-default login

執行應用程式

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

npm install

npm run dev

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

curl http://localhost:8080

新增 GitHub Repository

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

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

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

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

在 GitHub 建立一個 repo

設定地端 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

推送後的 repo

設定持續部屬 Continuous Deployment

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

-選擇 GitHub as the Repository Provider

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

-選擇剛建立的 repo 點擊 Next

在 Build Configuration 底下

-設定 Branch 為 ^main$

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

設定 Build context directory 為 /
點擊 Save

在 Authentication 底下

-點擊 Allow unauthenticated invocations

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

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

點擊 CREATE

修正應用程式的 bug

修改 app.js (第29行)

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

修改後 app.js

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

在地端進行測試

npm run start

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

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

git push origin main

驗證自動部屬

Cloud Run

Cloud Build

網頁檢查

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

參考資料

#ContinuousDeployment

#DevOps

Marcos的方格子Marcos談科技

Marcos的方格子

18會員

44內容數

歡迎來到「Marcos的方格子」！目前在「Marcos談科技」撰寫在職涯上學習到的知識，在「Marcos談書」分享我在日常的閱讀和心得，歡迎您的到來!!

留言0

查看全部

發表第一個留言支持創作者！

Marcos的方格子的其他內容

大型語言模型的提詞攻擊(Prompt hacking)介紹 | 提詞攻擊遊戲介紹

「Prompt hacking」與利用軟件漏洞的傳統駭客方法不同，Prompt hacking 是使用精心設計的提詞工程，並利用大型語言模型（Large Language Models, LLM）中的漏洞，使它們執行意外的操作或透露敏感信息。

#PromptHacking #Chatgpt #LLM

如何安全地部屬 AI 應用程式在 Google Cloud : 最佳實踐

人工智慧的出現協助企業創造下一波的成長紅利，但是也導致資安上的諸多挑戰，本篇整理 Best Practices for Securely Deploying AI on Google Cloud 和相關參考資料，希望藉由各種解決方案和最佳實踐，在使用人工智慧的同時也減少其帶來的安全性風險。

#GoogleCloud #GCP #cybersecurity

Google Cloud Professional Network Engineer 考試/資源/心得整理

Google Cloud Professional Network Engineer 出題方向/學習資源/心得整理

#GCP #GoogleCloud #exam

Google Cloud網絡服務層級比較：Premium Tier vs. Standard Tier

本文介紹了 Google Cloud 的網絡服務層級之間的差異。讀者可以瞭解到 Google Cloud 的 VPC（Virtual Private Cloud）具有全球級的特點，以及 Premium Tier 和 Standard Tier 之間不同的差異。

#GoogleCloud #GCP #Cloud

在 Google Cloud 進行內部存取的選項和比較

在企業內部環境中，對服務和API的安全且高效率的存取至關重要。本文探討了GCP提供的 Private GoogleAccess、Private Service Connect、Serverless VPC Access、Private Services Access 的區別，以及它們如何使組織受益。

#GoogleCloud #PrivateAccess #PrivateGoogleAccess

大型語言模型常用的提詞框架 | Coursera 課程回顧(下)

大型語言模型（Large Language Model，LLM）是一項人工智慧技術，其目的在於理解和生成人類語言，可將其想像成一種高階的「文字預測機器」，然而，它們並非真正理解語言。除了在上篇介紹的技巧可以協助我們在使用 LLM 時給予指示之外，今天我們會介紹使用 LLM 的框架。

#PromptPattern #LLM #ChatGPT