利用 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 会在对话中显示修复按钮，让您可以要求智能体自动诊断和修复问题。
   
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 实例生成唯一的服务标识符。
   • 您可以选择在部署配置中指定自定义 .ai.studio 网址前缀（例如 your-portfolio-name.ai.studio）。
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 中设计、开发和部署了作品集网站。

了解详情

访问此链接即可申领完成 Builder 学习之旅徽章！

如需继续学习，请前往 goo.gle/builders 参加下一个实验。

• Cloud Run 文档
• 在 Google AI Studio 中构建应用