开始使用 AWS
构建 React 应用程序
使用 AWS Amplify 创建简单的 Web 应用程序
模块 5:添加存储
在本模块中,您将添加存储以及将图像与您的应用程序中的备注关联的能力。
简介
现在,我们的备注应用程序已在运行,接下来添加将图像与每个备注关联的能力。在本模块中,您将使用 Amplify CLI 和库来创建利用 Amazon S3 的存储服务。然后,您将更新在上一个模块中创建的 GraphQL 架构,以将图像与每个备注关联。最后,您将更新 React 应用程序以启用图像上传、获取和渲染。
您将学到的内容
- 创建存储服务
- 更新 GraphQL 架构
- 更新您的 React 应用程序
重要概念
存储服务 - 存储和查询图像和视频之类的文件是大多数应用程序的常见要求。进行此操作的一个选项是对文件进行 Base64 编码并将其作为字符串发送,以保存在数据库中。这样做也有一些缺点,比如被编码的文件比原始二进制文件大,操作的计算开销大,以及正确编码和解码的复杂性增加了。另一个选项是利用专为文件存储构建和优化存储服务。Amazon S3 之类的存储服务使这一过程尽可能简单、高效且廉价。
完成时间
10 分钟
使用的服务
实施
-
创建存储服务
要添加映像存储功能,我们将使用 Amplify 存储类别:
amplify add storage ? Please select from one of the below mentioned services: Content ? Please provide a friendly name for your resource that will be used to label this category in the project: imagestorage ? Please provide bucket name: <your-unique-bucket-name> ? Who should have access: Auth users only ? What kind of access do you want for Authenticated users? create, read, update, delete ? Do you want to add a Lambda Trigger for your S3 Bucket? N
-
更新 GraphQL 架构
接下来,开发 amplify/backend/api/notesapp/schema.graphql 并在其中更新以下架构:
type Note @model { id: ID! name: String! description: String image: String }
确保保存文件。
-
部署存储服务和 API 更新
现在,存储服务已在本地配置且我们已更新 GraphQL 架构,我们可以通过运行 Amplify push 命令部署更新:
amplify push --y
-
更新 React 应用程序
现在,后端已更新,让我们更新 React 应用程序来添加上传和查看备注图像的功能。打开 src/App.js 并进行下列更改。
a.首先将存储类添加到您的 Amplify 导入中:
import { API, Storage } from 'aws-amplify';
b.在主应用程序函数中,创建一个新的 onChange 函数来处理图像上传:
async function onChange(e) { if (!e.target.files[0]) return const file = e.target.files[0]; setFormData({ ...formData, image: file.name }); await Storage.put(file.name, file); fetchNotes(); }
c.更新 fetchNotes 函数以在存储与备注相关的图像时获取图像:
async function fetchNotes() { const apiData = await API.graphql({ query: listNotes }); const notesFromAPI = apiData.data.listNotes.items; await Promise.all(notesFromAPI.map(async note => { if (note.image) { const image = await Storage.get(note.image); note.image = image; } return note; })) setNotes(apiData.data.listNotes.items); }
d.更新 createNote 函数以在存在于备注相关的图像时将图像添加到本地图像阵列中:
async function createNote() { if (!formData.name || !formData.description) return; await API.graphql({ query: createNoteMutation, variables: { input: formData } }); if (formData.image) { const image = await Storage.get(formData.image); formData.image = image; } setNotes([ ...notes, formData ]); setFormData(initialFormState); }
e.添加另一个输入到返回数据块的表格中:
<input type="file" onChange={onChange} />
f.对备注阵列进行映射时,若存在图像,对其进行渲染:
{ notes.map(note => ( <div key={note.id || note.name}> <h2>{note.name}</h2> <p>{note.description}</p> <button onClick={() => deleteNote(note)}>Delete note</button> { note.image && <img src={note.image} style={{width: 400}} /> } </div> )) }
-
运行应用程序
要测试应用程序,请运行 start 命令:
npm start
现在,您应该能够选择性地上传每个备注的图像。
结论
您已经使用 AWS Amplify 部署了 Web 应用程序! 您已经在应用程序中添加了身份验证,使用户可以注册、登录和管理其账户。该应用程序还使用 Amazon DynamoDB 数据库配置了一个可扩展的 GraphQL API,使用户可以创建和删除备注。您还使用 Amazon S3 添加了文件存储,从而使用户可以上传图像并在其应用程序中查看它们。
-
删除资源
删除各个服务
要删除各个服务,您可以使用 Amplify remove 命令:
amplify remove auth ? Choose the resource you would want to remove: <your-service-name>
然后,运行 Amplify push 命令:
amplify push
删除整个项目
要删除项目和相关的资源,您可以运行 Amplify delete 命令:
amplify delete
恭喜!
您已在 AWS 上成功构建 Web 应用程序! 接下来,深入研究特定的 AWS 技术并让您的应用程序进入一下个级别。