使用生成式人工智能构建无服务器 Web 应用程序

教程

简介

模块一：托管静态网站

在本模块中，您将创建 React 应用程序并使用 AWS Amplify 将其部署到云中。

概述

AWS Amplify 提供了基于 Git 的 CI/CD 工作流程，用于构建、部署和托管具有后端的单页面 Web 应用程序或静态站点。连接到 Git 代码库后，Amplify 会确定前端框架和任何配置后端资源的构建设置，并在每次提交代码时自动部署更新。

在本模块中，您首先要创建一个新的 React 应用程序，并将其推送到 GitHub 代码库。然后，您将这个代码库连接到 AWS Amplify Web 托管并将其部署到 amplifyapp.com 域上托管的全球可用内容分发网络（CDN）。

您将学到的内容

新建 Web 应用程序
在您的项目上设置 Amplify

实施

完成时间

5 分钟

需要

GitHub 账户
GitHub SSH 连接

获取帮助

Amplify 故障排除

Amplify 的工作原理

了解托管

创建新的 React 应用程序
在新的终端或命令行窗口中，运行以下命令以使用 Vite 创建 React 应用程序：

npm create vite@latest ai-recipe-generator -- --template react-ts -y cd ai-recipe-generator npm install npm run dev
2.在终端窗口中，选择并打开本地链接以查看 Vite + React 应用程序。
初始化 GitHub 代码库
在此步骤中，您将创建一个 GitHub 代码库并将代码提交到该代码库。您需要 GitHub 账户来完成此步骤，如果您没有账户，请在此处注册。

注意：如果您从未在计算机上使用过 GitHub，请在继续允许连接到您的帐户之前执行以下步骤。
通过 https://github.com/ 登录 GitHub。
2.在启动新存储库中，进行以下选择：

在存储库名称中，输入 ai-recipe-generator，并选择公开单选按钮。

然后选择创建新存储库。
3.打开新的终端窗口，导航到您的项目根文件夹 (ai-recipe-generator)，然后运行以下命令来初始化 git 并将应用程序推送到新的 GitHub 存储库：

注意：将命令中的 SSH GitHub URL 替换为 GitHub URL。

git init git add . git commit -m "first commit" git remote add origin git@github.com:<your-username>/ai-recipe-generator.git git branch -M main git push -u origin main
安装 Amplify 软件包
打开一个新的终端窗口，导航到应用程序的根文件夹 (ai-recipe-generator)，然后运行以下命令：

npm create amplify@latest -y
2.运行前面的命令将在应用程序的目录中构建一个轻量级的 Amplify 项目。
3.在终端窗口中，运行以下命令将更改推送到 GitHub：

git add . git commit -m 'installing amplify' git push origin main
使用 AWS Amplify 部署您的应用程序

在此步骤中，您将把刚刚创建的 GitHub 存储库连接到 AWS Amplify。这将使您能够在 AWS 上构建和部署应用程序。

1.在新的浏览器窗口中登录AWS 管理控制台，然后通过以下网址打开 AWS Amplify 控制台：https://console.thinkwithwp.com/amplify/apps。

2.选择创建新的应用程序。

3.在使用 Amplify 开始构建页面上的部署应用程序中，选择 GitHub，然后选择下一步。

4.出现提示时，请使用 GitHub 进行身份验证。您将被自动重定向回 Amplify 控制台。选择您之前创建的存储库和主分支。然后，选择下一步。

5.保留默认的构建设置并选择下一步。

6.查看所选输入，然后选择保存并部署。

现在，AWS Amplify 将在 https://...amplifyapp.com 上构建您的源代码并部署您的应用程序，每次 git 推送都会更新您的部署实例。部署您的应用程序最多可能需要 5 分钟。

7.构建完成后，选择访问已部署的 URL，即可查看您的 Web 应用程序的实时运行情况。