運用 AI 推出作品集網站

1. 簡介

總覽

現在要如何開始使用 AI 建構內容？對大多數人來說，這一切都從查詢或原型開始。Google AI Studio 提供強大的建構模式 (通常稱為「直覺式程式開發」)，可讓您使用 Gemini 模型生成的程式碼，設計、測試及建構網頁應用程式。

在本程式碼研究室中，您將建構個人作品集網站。AI Studio 代理程式會編寫前端程式碼。應用程式完成後，只要按一下滑鼠，即可直接部署至 Cloud Run。

學習內容

• 提示 Google AI Studio 設計個人作品集網站原型。
• 在互動式預覽沙箱中測試應用程式。
• 直接從 Google AI Studio UI 將應用程式部署至 Cloud Run。

課程內容

• 瞭解如何使用 Google AI Studio 的「建構」模式，透過自然語言快速設計前端服務原型。
• 瞭解如何將 AI Studio 應用程式以無伺服器容器的形式部署至 Cloud Run。

2. 專案設定

啟動 AI Studio 前，請先確認帳戶狀態和必要條件。

Google 帳戶和層級資訊

1. 如果沒有 Google 帳戶，請建立帳戶。
   • 提示：請盡可能使用個人 Google 帳戶進行本實驗室。群組、公司或學校帳戶可能會強制執行 Workspace 政策，停用實驗功能或雲端整合功能。
2. 查看部署作業的帳單詳細資料：
   • Google Cloud 入門級：無須建立完整的 Google Cloud 帳單帳戶，即可在特定區域免費發布最多兩個全端應用程式。
   • 標準部署：連結至現有的付費 Google Cloud 專案，並擴充儲存空間限制、CPU 資源和 API。

3. 在 AI Studio 建構模式中建立作品集網站

建立應用程式外殼，並提示 AI 程式碼助理建構前端版面配置。

1. 前往 Google AI Studio 應用程式面板，然後點選「New App」(新應用程式)。
2. 在聊天提示詞輸入框中，輸入作品集應用程式的說明：

   Build a professional personal portfolio website. The site should
   have a modern, responsive design and sections for my biography,
   projects showcase, skills, and links to my professional profiles
   (e.g., GitHub, LinkedIn).
   

   這個連結會自動填寫提示詞輸入框。
3. 按一下「建構」，開始產生應用程式。

4. 測試及反覆運算

正式推出服務前，請先在互動式預覽畫面中執行驗證檢查。

1. 在 Google AI Studio 中開啟預覽窗格。
2. 在預覽沙箱中與任何導覽按鈕、連結或版面配置互動，驗證視覺體驗。
   • 修正錯誤的注意事項：在生成或測試期間，您有時可能會遇到執行階段問題或編譯錯誤。如果發生這種情況，AI Studio 會在對話中顯示「修正」按鈕，讓您要求代理程式自動診斷及修復問題。
   
3. 如要變更樣式或行為，請透過即時通訊視窗指示代理程式。例如：
   • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
   • "Include a new section to showcase my recent presentations and talks."
4. 等待代理程式更新程式碼集，並在預覽瀏覽器中查看更新。

5. 部署至 Cloud Run

原型完全正常運作後，請在 Cloud Run 上將其部署為公開服務。

1. 在 Google AI Studio 的右上角，按一下「發布」按鈕，啟動部署精靈。
2. 按一下「開始使用」，設定 Google Cloud 專案。
   • 確認目標 Google Cloud 專案下拉式選單與您連結至工作區的專案相符。
   • AI Studio 會自動為 Cloud Run 執行個體產生專屬服務 ID。
   • (選用) 您可以在部署設定中指定自訂 .ai.studio 網址前置字串 (例如 your-portfolio-name.ai.studio)。
3. 如果您是第一次部署，且使用標準 Google Cloud 參數，系統可能會提示您指定機構類型並提供帳單詳細資料。
4. 按一下「發布應用程式」。
5. 容器建構、容器註冊和服務部署步驟會在背景執行。這項程序通常會在 2 到 4 分鐘內完成。
6. 部署完成後，請複製產生的「應用程式網址」，並在瀏覽器分頁中前往即時應用程式連結。
7. 在瀏覽器中測試即時網頁應用程式！

6. (選用) 新增自訂網域

根據預設，Cloud Run 會在 Google 管理的 run.app 子網域上代管服務。如要使用個人網域 (例如 yourname.com 或 portfolio.yourname.com)，您可以將自訂網域對應至服務。

步驟 1：在 Cloud Run 中新增網域對應

1. 前往 Google Cloud 控制台的「Cloud Run Domain Mappings」(Cloud Run 網域對應) 頁面。
2. 按一下「新增對應」。
3. 從下拉式選單中選擇要對應的 Cloud Run 服務。
4. 輸入自訂網域名稱 (例如 yourname.com 或 portfolio.yourname.com)。
5. 按一下「下一步」或「繼續」。Cloud Run 會顯示您必須使用網域註冊商建立的 DNS 記錄 (例如 A/AAAA 或 CNAME 記錄)。

步驟 2：設定 DNS 註冊機構

1. 登入網域註冊商的管理面板 (例如 Squarespace、GoDaddy 或 Namecheap)。
2. 開啟網域的 DNS 管理或 DNS 設定設定頁面。
3. 建立與 Cloud Run 對應精靈中顯示值相符的 DNS 記錄：
   • 如要對應頂層網域 (例如 yourname.com)，請新增列出的 A 和 AAAA 記錄。
   • 如果是子網域對應 (例如 portfolio.yourname.com)，請新增列出的 CNAME 記錄。
4. 儲存 DNS 設定變更。

步驟 3：等待系統佈建 SSL 憑證

DNS 變更生效後：

1. Google Cloud 會自動佈建代管型 SSL/TLS 憑證，確保連線安全。
2. 這項程序通常會在 15 分鐘內完成，但視 DNS 傳播情況而定，最久可能需要 24 小時。
3. 完成後，自訂網域就會安全地轉送至作品集網站。

7. 清除

如要避免產生預料之外的帳單費用，或清理工作區資源，請按照下列步驟操作：

1. 在 Google AI Studio 中，前往「應用程式」頁面。
2. 在格狀或清單中找出應用程式。
3. 按一下垃圾桶圖示，即可刪除應用程式狀態，並從 Cloud Run 取消發布服務。
4. 如果您是使用標準專案部署，並想完全關閉所有資源，請前往 Google Cloud 控制台專案設定，然後刪除基礎專案。

8. 結語

恭喜！您已直接透過 Google AI Studio 設計、開發及部署作品集網站。

瞭解詳情

前往這個連結，即可領取「完成建構工具學習歷程」徽章！

如要繼續學習，請前往 goo.gle/builders 參加下一個實驗室。

• Cloud Run 說明文件
• 在 Google AI Studio 中建構應用程式