從構想發想到推出:2025 年在 Google Cloud 上推出第一個應用程式

1. 藍圖:建立基礎

在蓋房子前,我們需要先確保土地安全無虞、設定支付材料費的方式,以及打開工具箱。在雲端中,這些概念會轉換為「專案」和「帳單」

什麼是 Google Cloud 專案?

Google Cloud 就像是巨大的數位倉庫,裡面裝滿了強大的工具和服務。專案是倉庫中屬於您自己的私人安全角落。專案是容器,可存放所有資源 (例如伺服器、資料庫和程式碼)、追蹤所有費用,以及管理允許進入並使用專案內工具的使用者。我們今天採取的每個動作都會在這個專案界線內進行。

雖然我們今天著重於「專案」,但瞭解專案在公司使用的較大結構中扮演的角色,有助於您掌握全貌。Google Cloud 會以清楚的由上而下階層架構整理所有內容。

Organization (The entire Corporation, e.g., "MegaCorp Inc.")
└── Folders (The Corporate Divisions, e.g., "Research & Development")
    ├── Project (A specific team's lab, e.g., "Project Phoenix - R&D")
    │   └── Resources (The tools in the lab, e.g., a specific server)
    └── Project (Another team's workshop, e.g., "Q4 Marketing Campaign")
        └── Resources (The tools for that campaign, e.g., a storage bucket)

這個階層的層級從上到下依次為:

  1. 機構節點:
    • 這是整個公司的總公司 (例如 yourcompany.com)。這是最頂層的節點,用於設定全公司的安全和帳單政策。在 Google Cloud 免費試用期間,您通常不會使用機構節點,這對學習來說完全沒問題。
  2. 資料夾:
    • 這是指公司內的部門或單位 (例如工程、財務)。這是選用層級,可用於將專案分組,並一次將政策套用至整個團隊。本研討會不會使用資料夾。
  3. 專案 (我們的重點):
    • 這是特定團隊的工作坊或實驗室實際工作就是在此發生,也是本研討會最重要的層級。您建立的所有資源必須位於專案內。您也可以在專案層級啟用 API (服務) 及連結帳單帳戶。
  4. 資源:
    • 這些是工作坊內的個別工具和機器。我們要部署的 Cloud Run 應用程式是資源。虛擬機器、資料庫或儲存空間值區都是資源的例子。

實作:建立及設定專案

  • 領取抵免額 goo.gle/devfest-boston-ai/。並接受《Google Cloud Platform 服務條款》。套用後,系統會顯示抵免額已套用的訊息。已套用的抵免額
  • 前往
  • 在頂端導覽列中,依序點選「選取專案」和「新增專案」尋找專案
  • 為專案命名 (例如 idea-to-launch-yourname),然後按一下「建立」。選取「沒有機構」。新增專案
  • 確認已從頁面頂端的下拉式選單中選取新專案。

帳單的重要性

帳單帳戶是專案的財務基礎,也就是「登記的信用卡」,用來支付所用資源的費用。在本研討會中,您將使用 Google Cloud 免費試用方案,並獲得免費抵免額。這是安全的沙箱環境,抵免額用完或試用期結束後,系統不會自動向你收費,除非你手動升級帳戶。瞭解帳單是控管費用的第一步。設定預算和快訊等最佳做法可讓您在支出接近特定上限時收到電子郵件通知,避免產生意外費用。

實作:連結帳單帳戶

  • 前往「」。
  • 按一下「連結至帳單帳戶」連結帳單
  • 從下拉式選單中選取「Google Cloud Platform 試用帳單帳戶」,然後按一下「設定帳戶」。(如果沒有看到下拉式選單,請稍候一分鐘,待抵免額套用完畢後再重新載入頁面)。

實作:設定預算快訊 (最佳做法)

帳單啟用後,請務必設定預算,這是控管費用的重要最佳做法。達到指定金額時,系統不會停止服務,而是傳送電子郵件快訊,讓您隨時掌握支出情況。

  1. 在「帳單」頁面的左側選單中,按一下「預算與快訊」
  2. 按一下頁面頂端的「+ 建立預算」設定預算
  3. 為預算命名:給予簡單的名稱,例如 Workshop-Alert
  4. 範圍:保留預設設定,系統應會選取目前的專案。按一下「下一步」設定預算
  5. 金額:在「預算金額」部分中,為「金額類型」選取「指定的金額」。輸入較低的金額,例如 10。也就是說,我們的預算是 $10 美元。按一下「下一步」設定預算
  6. 動作:您可以在這裡設定快訊。根據預設,系統會在支出達到預算金額的 50%、90% 和 100% 時 (即 $5 美元、$9 美元和 $10 美元),傳送快訊。
    • 在「電子郵件通知」下方,確認已勾選「透過電子郵件將警告傳送給帳單管理員和使用者」。系統會將通知傳送到與帳戶相關聯的電子郵件地址。
  7. 按一下「完成」設定預算

您已設定主動式費用管理工具。在實際專案中,這是最重要的第一步,可確保不會發生財務意外。

什麼是服務?為什麼要啟用服務?

您已在私人實驗室中設定指令中心,接下來要介紹可用的重型設備。Google Cloud 提供超過 200 種不同的產品,從資料庫到 AI 模型應有盡有。這些都稱為「服務」。您可以將 Cloud Run 視為「自動化運送和物流服務」,Gemini 則是「AI 發明和原型設計服務」。如要使用這些強大的服務,您必須先為專案啟用對應的 API (應用程式設計介面)。

服務總覽

讓我們繼續用倉庫和實驗室來比喻。假設 Google Cloud 專案是巨大倉庫內的專屬工作室,工作坊配備各種先進工作站:AI 分析工作站、全球部署工作站、資料儲存工作站等。為確保安全和效率,這些專業工作站的主要電源管路預設為關閉

啟用 API 的行為,就像走到實驗室中的特定工作站 (例如「AI 原型設計工作站」),然後將主電源開關切換至「ON」位置。

但為什麼所有項目預設為關閉?這是經過審慎考量的設計選擇,原因如下:

  • 安全性:在專案層級強制執行最低權限原則。如果您未使用某項服務,該服務與專案的連線就會處於非使用中狀態,進而減少潛在的「攻擊面」。
  • 管理和成本控制:必須採取可稽核的審慎行動,才能開始使用可能費用高昂的服務。這麼做可避免誤用,並協助機構控管團隊使用的工具。
  • 簡潔:可讓專案環境保持乾淨。權限和資訊主頁不會顯示您無意使用的服務選項。

實作:初始化環境

  1. 啟用 Vertex AI、Cloud Run、Cloud Build 和 Compute API:
    • 在 API 的詳細資料頁面中,按一下藍色的「啟用」按鈕。等待程序完成。啟用服務

2. 保護應用程式:誰 (或什麼) 可以控制應用程式?

概念簡介

我們的應用程式已上線,這是一項了不起的成就。但這引發了一個重要問題:這些事件究竟是如何發生的?部署程式碼後,系統會在背景進行一系列安全且以權限為基礎的「交握」程序。瞭解這些概念是雲端安全防護的關鍵。

這一切都由 Identity and Access Management (IAM) 管理。

  • IAM 的核心公式:IAM 遵循簡單但強大的原則:可以對哪些資源執行哪些操作
  • 兩種「對象」(主體):在目前的工作坊中,我們已瞭解兩種基本的身分類型:
    1. 使用者:就是您!與真人相關聯的身分,例如個人 Gmail 帳戶。
    2. 服務帳戶:這是應用程式和服務專用的非真人身分。可將這些視為程式碼的 ID 徽章。當某項 Google Cloud 服務 (例如 Cloud Build) 需要與另一項服務 (例如 Artifact Registry,用於儲存容器) 互動時,會使用服務帳戶證明自己具備權限。

部署任何應用程式時,系統會使用兩種類型的身分識別:

  • 您的「使用者」帳戶有權啟動部署作業。
  • Cloud Build 服務的服務帳戶有權建構程式碼,並儲存產生的容器。

管理存取權

讓我們使用 IAM 控制台調查可進行部署的權限,然後將特定存取權授予其他使用者。

  1. 調查:前往 IAM 控制台
    • 前往
    • 這個頁面是專案的安全資訊主頁。其中列出有權存取專案的所有「主體」(「誰」)。
  2. 找出您的身分 (使用者)
    • 在主體清單中找出自己的電子郵件地址。請注意,其角色為「擁有者」。「擁有者」角色可授予完整且不受限制的權限,讓使用者在專案中執行任何操作。因此您有權啟用 API 並執行 gcloud run deploy 指令。
  3. 找出服務的身分 (服務帳戶)
    • 現在,請尋找名稱類似 [PROJECT_NUMBER]-compute@developer.gserviceaccount.com 的主體。這是 Cloud Build 服務使用的預設服務帳戶。
    • 查看其角色。該帳戶會具備「Cloud Build 服務代理人」等角色。這個角色包含執行工作所需的特定權限,例如提取原始碼,以及將容器映像檔寫入登錄檔。這是負責部署作業的身分。
  4. 管理存取權 (實務工作)
    • 現在,讓我們執行相關的安全防護工作。假設有位新同事需要監控我們剛部署的兩個應用程式 (fact-app-manualfact-app-cli) 的效能並查看記錄,但基於安全考量,他們不得部署新版本或刪除應用程式。
    • 在 IAM 頁面頂端,按一下「+ 授予存取權」
    • 在「New principals」(新增主體) 欄位中,輸入虛構的電子郵件地址,例如 dev-intern@example.com
    • 在「Select a role」(選取角色) 下拉式選單中,使用篩選器找出並選取「Cloud Run Viewer」(Cloud Run 檢視者) 角色。這個角色是最低權限原則的絕佳範例。這個角色只會授予 Cloud Run 服務的唯讀存取權,不會授予其他權限。(或試著使用「幫我選取角色」)
    • 按一下「儲存」
  5. 查看結果
    • 您已成功新增使用者,並指派與本研討會建立資源直接相關的最低權限角色。他們可以查看這兩個事實應用程式,但無法變更。您已瞭解使用者帳戶和服務帳戶如何共同運作,打造安全且可稽核的雲端環境。

現在,讓我們練習授予權限,但這次不是授予給使用者,而是授予給其他應用程式或服務。假設外部自動化工具 (以服務帳戶 vertex-express@... 表示) 必須能夠使用專案中的 AI 服務。我們需要授予正確的角色。

  1. 前往「服務帳戶」頁面:
    • 在 IAM 頁面中,前往「Service Accounts」(服務帳戶)
  2. 找出目標服務帳戶:
    • 在服務帳戶清單中,找出名為 vertex-express@ecstatic-acumen-{PROJECT_NUMBER}-c9.iam.gserviceaccount.com 的帳戶。(您需要將 {PROJECT_NUMBER} 換成實際的專案編號)。這是我們要授予權限的身分。
  3. 管理服務帳戶的權限:
    • 在右側的「動作」欄中,按一下三點圖示,即可看到下拉式選單。
    • 如要管理這個服務帳戶可執行的動作,請按一下「管理權限」
  4. 授予「Vertex AI 使用者」角色:
    • 在「指派角色」下拉式選單中,使用篩選器找出並選取「Vertex AI 使用者」角色。
    • 按一下 [儲存]

您現在已成功從服務帳戶的特定頁面,前往正確的專案層級權限頁面,並授權該帳戶在專案中使用 AI 功能。

3. 使用 AI 助理建構程式碼

概念簡介

每個應用程式都是從程式碼開始。傳統上,這是最耗時的部分。今天,我們將與 AI 合作夥伴 Gemini 攜手,加快這項程序。不過,在撰寫第一個指令前,請務必先瞭解 Google Cloud 提供的 AI 工具。

Google 的 AI 服務可分為三類,由簡入繁:

您可以透過兩種主要介面與「創意引擎」(Gemini) 互動,這兩種介面各有不同用途。

  • Google AI Studio (aistudio.google.com)
    • 用途:這項免費的網頁工具可快速設計 Gemini 原型並進行實驗。這是開始撰寫提示並瞭解模型功能的最佳方式。
    • 運作方式:只要有 Google 帳戶,就能開始使用這項功能。如要在應用程式中使用,請產生 API 金鑰。如要在本研討會中使用這項服務,您必須在專案中啟用「Generative Language API」服務。
    • 比喻:AI Studio 就像公共圖書館或開放式工作坊,歡迎隨時到店,免費試用這些工具。
  • Vertex AI
    • 用途:這是 Google Cloud 的端對端平台,可管理整個機器學習生命週期。這是完整的專業工作台,您可以使用 Gemini 等基礎模型,也可以從頭建構、訓練及部署自己的自訂機器學習模型。這項服務具備企業級安全防護、擴充性和管理功能,此外,這項服務還提供企業級版本的相同工具,並完全整合到 Google Cloud 專案中。
    • 運作方式:使用相同的強大模型,但會沿用專案的所有安全性、存取權控管 (IAM) 和資料控管功能。這是我們在第 1 部分中啟用 aiplatform.googleapis.com API 時啟用的服務。
    • 比喻:Vertex AI 是您的私人安全企業研發實驗室。您執行的所有操作都會記錄下來、受到保護,並連結至其他專案資源。

實作:在 Vertex AI Studio 中生成應用程式碼

我們來看看使用 Vertex AI 內部的視覺化工具建構應用程式時會發生什麼情況。

  1. 前往 Vertex AI Studio:
  2. 生成網站:
    • 在提示方塊中,輸入稍後會使用的完全相同要求:
    Create the code for a simple web application that shows Halloween fun facts. The application should be built using the Python functions_framework for Cloud Run. The entry point function must be named 'hello_http'. When a user visits the main page, the server should randomly display one fact from a list. The page should have a separate 'index.html' file for the structure and a 'style.css' file to give it a spooky theme 
    
    • 按下 Enter 鍵,模型會生成程式碼,可能分成三個不同的區塊:Python (main.py)、HTML (index.html) 和 CSS (style.css)。

請勿關閉這個瀏覽器分頁!您需要在下一節中複製這三個區塊的程式碼。請注意,AI 已正確分隔檔案。這是很好的做法,但如我們所見,部署時需要執行多個手動步驟。

4. 使用 Cloud Run 將應用程式部署至全球

概念簡介

程式碼已產生,但只是瀏覽器中的文字。如要為顧客提供服務,必須在伺服器上執行。Cloud Run 是「無伺服器」平台,也就是說,您提供程式碼,其餘一切 (伺服器、資源調度與安全性) 都由 Google 處理。最強大的功能是縮減為零,也就是說,如果沒有人造訪應用程式,您就不必支付閒置時間的費用。

  • 什麼是「無伺服器」?傳統上,部署應用程式代表要租用伺服器 (虛擬機器)、安裝作業系統、設定網路和安全性,並持續維護。無伺服器是現代雲端方法,開發人員只需專注於程式碼。您將程式碼交給 Cloud Run 等服務,其餘一切都由該服務處理,包括伺服器、資源調度、安全性與網路。
  • Cloud Run 的運作方式:自動調整大小的魔法。部署至 Cloud Run 時,系統會將程式碼封裝至容器 (應用程式及其所有依附元件的標準化可攜式套件)。使用者造訪應用程式的網址時,Cloud Run 會立即啟動容器來處理要求。如果有一千名使用者同時造訪,系統會自動啟動一千個副本。最強大的功能是縮放至零。如果沒有人造訪應用程式,Cloud Run 會將執行中的容器數量縮減至零。也就是說,您完全不必支付閒置時間的費用,因此非常划算。

在第一次部署時,我們會使用 Cloud Run 控制台的內嵌編輯器,手動將程式碼複製到適當位置。

實作:部署應用程式

  1. 啟動 Cloud Run 建立精靈:
    • 前往
    • 按一下頁面頂端的「+ 撰寫函式」
  2. 設定服務:
    • 選擇「使用內嵌編輯器建立函式」
    • 為服務命名:fact-app-manual
    • 選取「執行階段」 Python 3.13
    • 選取「區域」 us-central1
    • 選取「允許公開存取」
    • 其餘設定均保留預設值。
    • 按一下底部的「建立」按鈕。
  3. 輸入代碼:
    • 您會看到編輯器,其中包含預設的 main.pyrequirements.txt 檔案。
    • main.py:前往 Vertex AI Studio 分頁。複製整個 Python 程式碼區塊。返回 Cloud Run 編輯器,取代預設的 main.py 內容,換成您剛才複製的程式碼。
    • requirements.txt:* 按一下編輯器中的 requirements.txt 檔案。Python 程式碼需要 functions-framework。將檔案內容替換為:
      functions-framework
      
    • index.html:在編輯器的檔案總管中,按一下「+」新增檔案。將檔案命名為 index.html。前往 Vertex AI Studio 分頁,複製 HTML 程式碼區塊,然後貼到這個新的 index.html 檔案中。
    • style.css:按一下「+」即可新增檔案。將其命名為 style.css。前往 Vertex AI Studio 分頁,複製 CSS 程式碼區塊,然後貼到這個新的 style.css 檔案中。
  4. 部署服務:
    • 確認三個檔案都已正確放置後,按一下「儲存並部署」按鈕。
  5. 存取即時應用程式:
    • 部署作業需要幾分鐘才能完成。完成後,服務詳細資料頁面頂端會顯示公開 URL
    • 按一下這個網址。您的應用程式現已上線!這個做法雖有成效,但卻需要大量手動複製及貼上。

5. 最佳化開發人員工作流程

控制台很適合學習,但疊代開發速度較慢。現在,我們將瞭解開發人員偏好的工作流程,使用 Cloud ShellGemini CLI 將整個多步驟程序簡化為對話。

什麼是 Cloud Shell 和 Gemini CLI?

Cloud Shell 是瀏覽器中的完整 Linux 電腦,預先載入 gcloud CLI (Google Cloud 的遙控器) 等開發人員工具。

Gemini CLI 是終端機中的互動式 AI 輔助程式設計工具。

什麼是 Gemini 擴充功能?

Gemini CLI 就像功能強大的智慧型手機,這項功能本身就非常強大,擴充功能就像從應用程式商店安裝的應用程式,這些外掛程式可為 Gemini CLI 提供預設沒有的全新專業功能。舉例來說,nanobanana 擴充功能是「應用程式」,可將 Gemini CLI 連線至 Google 強大的圖片生成模型,讓我們直接從指令列生成圖片。

實際操作:簡化工作流程

  1. 產生 API 金鑰
    • 前往「
    • 按一下「+Create API Keys」(+建立 API 金鑰) 按鈕
    • 保留這把鑰匙
  2. 啟用及設定 Cloud Shell:
    • 在 Google Cloud 控制台頂端,點選「啟用 Cloud Shell」圖示 (>_)。
    • 在終端機中執行下列指令來設定環境,請務必將 專案 ID 替換為您自己的 ID。
      # Set your Project ID
      export PROJECT_ID="[your-project-id-goes-here]"
      
      設定 NANOBANANA_GOOGLE_API_KEY。然後將其替換成您的 API 金鑰。(說出「Y」即可繼續安裝)。
      gcloud config set project $PROJECT_ID
      
      # REPLACE with your API Key.
      export NANOBANANA_GOOGLE_API_KEY="[your-api-key-goes-here]"
      
      在終端機中執行下列指令,安裝擴充功能:
      # Configure the CLI to use your project with Vertex AI
      export GOOGLE_CLOUD_PROJECT=$PROJECT_ID
      export GOOGLE_CLOUD_LOCATION=us-central1
      export GOOGLE_GENAI_USE_VERTEXAI=true
      
      # Install the image generation extension
      gemini extensions install https://github.com/gemini-cli-extensions/nanobanana
      
  • 我們將使用 Gemini CLI,這是一個功能強大的指令列介面,可做為 AI 程式設計助理。只要用簡單的英文描述所需程式碼,系統就會為我們產生結構,大幅加快開發速度。
  1. 啟動互動式 AI 工作階段:
    • 讓我們為專案建立新目錄,並以互動模式啟動 Gemini CLI。在終端機中執行下列指令。
      mkdir ~/2025-website
      cd ~/2025-website
      cat <<EOF > .env
        GOOGLE_CLOUD_PROJECT=$PROJECT_ID
        GOOGLE_CLOUD_LOCATION=$GOOGLE_CLOUD_LOCATION
        GOOGLE_GENAI_USE_VERTEXAI=true
        NANOBANANA_GOOGLE_API_KEY=$NANOBANANA_GOOGLE_API_KEY
      EOF
      clear
      gemini --yolo
      
  2. 生成及疊代應用程式:
    • 你現在已進入與 AI 助理的即時通訊工作階段。貼上下列提示,即可透過一個指令產生整個網站:
      Write a simple web app that shows Halloween fun facts using the Python Flask. When a user visits the main page, it should show one random fact. Include a button that fetches and displays a new fact when clicked. Create a simple, clean index.html, a separate style.css with a spooky theme, and a requirements.txt file. After creating the files, attempt to start the web app locally on port 8080.
      
    • 在本機測試:AI 會建立檔案並啟動網路伺服器。(有時載入作業不會停止,如果看到系統嘗試啟動伺服器,請放心移至下一個步驟。)
    • 按一下 Cloud Shell 工具列中的「網頁預覽」圖示,選取「透過以下通訊埠預覽:8080」,網站就會在新分頁中顯示。
    • 在 Gemini CLI 中按下 Esc 即可取消要求,或提示 Gemini CLI 執行 Stop the web server
  3. 使用 AI 生成圖像更新網站:
    • 現在,我們來使用擴充功能。以 / 開頭的指令是「斜線指令」,會傳送給工具,而不是 AI 提示。
      /generate 3 images of spooky halloween fun
      
    • 擴充功能會建立三張圖片。現在,請 AI 修改網站,使用這些字型。
      Update the website so it will display and rotate between the 3 newly generated images each time the button is clicked. And do NOT start the server.
      
  4. 準備部署:
    • Cloud Run 會使用容器部署程式碼。Dockerfile 是建構容器的配方。請 AI 為我們建立一個。
      Create a Dockerfile suitable for deploying this Python Flask app to Cloud Run.
      
  5. 使用單一指令部署:
    • 按兩次 CtrlC 即可退出 Gemini CLI。或在提示中輸入 /quit
    • 現在,請使用 gcloud CLI 從目前目錄部署整個應用程式。
      gcloud run deploy fact-app-cli \
        --source . \
        --region us-central1 \
        --allow-unauthenticated
      
  6. 查看差異:
    • 幾分鐘後,您會收到新網址,可前往 AI 生成的完整網站。前往 Cloud Run 控制台,您會看到兩項服務:fact-app-manualfact-app-cli。您剛才體驗了指令列開發人員工作流程的速度和強大功能。

恭喜

您已在 Google Cloud 中順利完成整個開發生命週期。您從空白專案開始,現在已完成下列事項:

  • 已設定帳單的專案。
  • 使用 AI 助理撰寫完整申請內容。
  • 將該應用程式部署至可擴充的無伺服器平台。
  • 瞭解如何透過 IAM 管理安全性。

您現在已具備基礎技能,可在 Google Cloud 上建構更複雜且功能強大的應用程式。