利用 AI 发布作品集网站

1. 简介

概览

如今，AI 构建从何开始？对于我们大多数人来说，它始于查询或原型。Google AI Studio 提供强大的构建模式（通常称为“氛围编程”），让您可以使用由 Gemini 模型驱动的代码生成来设计、测试和构建 Web 应用。

在此 Codelab 中，您将构建个人作品集网站。AI Studio 代理将编写前端代码。应用完善后，您只需点击一下即可将其直接部署到 Cloud Run 。

您将执行的操作

  • 提示 Google AI Studio 为个人作品集网站制作原型。
  • 在互动式预览沙盒中测试应用。
  • 直接从 Google AI Studio 界面将应用部署到 Cloud Run。

学习内容

  • 如何使用 Google AI Studio 的构建模式，通过自然语言快速为前端服务制作原型。
  • 如何将 AI Studio 应用作为无服务器容器部署到 Cloud Run。

2. 项目设置

启动 AI Studio 之前，请验证您的账号状态和前提条件。

Google 账号和层级信息

  1. 如果您还没有 Google 账号，请创建一个 Google 账号。
    • 提示：如果可以，请在此实验中使用个人 Google 账号。群组、公司或学校账号可能会强制执行 Workspace 政策，从而停用实验性功能或云集成。
  2. 查看部署的结算明细：
    • Google Cloud 新手体验层级：允许在选定区域免费发布最多两个全栈应用，而无需建立完整的 Google Cloud 结算账号。
    • 标准部署：连接到现有的付费 Google Cloud 项目，并扩大存储空间限制、CPU 资源和 API。

3. 在 AI Studio 构建模式下创建作品集网站

创建应用 shell，并提示 AI 代码助理构建前端布局。

  1. 前往 Google AI Studio 应用面板，然后点击 新建应用。
  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 会在聊天中显示修复 按钮，让您可以要求代理自动诊断和修复问题。
    Google 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 的右上角，点击发布 按钮以启动部署向导。Google AI Studio 发布按钮的位置
  2. 点击立即请求 以配置 Google Cloud 项目。
    • 验证目标 Google Cloud 项目 下拉列表是否与您与工作区关联的项目匹配。
    • AI Studio 将自动为 Cloud Run 实例生成唯一服务标识符。
  3. 如果您是首次部署，并且使用的是标准 Google Cloud 参数，系统可能会提示您指定组织类型并提供结算明细。
  4. 点击发布应用 。
  5. 容器构建、容器注册和服务部署步骤在后台进行。此过程通常在 2-4 分钟内完成。
  6. 部署完成后，复制生成的 应用网址 ，然后在浏览器标签页中访问实际应用链接。
  7. 在浏览器中测试实际 Web 应用！

6. （可选）添加自定义网域

默认情况下，Cloud Run 会在 Google 管理的 run.app 子网域上托管您的服务。如果您想使用个人网域（例如yourname.com 或 portfolio.yourname.com），可以将自定义网域映射到您的服务。

第 1 步：在 Cloud Run 中添加网域映射

  1. 前往 Google Cloud 控制台中的 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 分钟左右完成，但最长可能需要 24 小时，具体取决于 DNS 传播。
  3. 完成后，您的自定义网域将安全地路由到您的作品集网站。

7. 清理

为避免任何意外的结算费用或清理工作区资源，请执行以下操作：

  1. 在 Google AI Studio 中，前往“应用”页面。
  2. 在网格或列表中找到您的应用。
  3. 点击垃圾桶图标以删除应用状态，并从 Cloud Run 中取消发布服务。
  4. 如果您是使用标准项目进行部署，并且想要完全关闭所有资源，请前往 Google Cloud 控制台项目设置 并删除底层项目。

8. 总结

恭喜！您已直接从 Google AI Studio 设计、开发和部署了作品集网站。

了解详情

点击此链接，领取完成构建者之旅 徽章！

如需继续您的旅程，请前往 goo.gle/builders 了解下一个实验。