10、使用 Cognito 构建和保护无服务器 Web 应用

使用 Cognito 构建和保护无服务器 Web 应用

1. 前端部署

在完成相关操作后，会在 dist 目录下创建 main.js 文件，同时生成一个包含额外图片的 assets 目录。使用 AWS 命令行工具部署前端，步骤如下：

$ cd frontend
$ source ../.env
$ aws s3 sync dist/ s3://$CHAPTER4_BUCKET

上述步骤会将 dist 目录的内容推送到新创建的第 4 章存储桶中。注意，需要将环境文件的内容加载到 shell 中，以提供 CHAPTER4_BUCKET 环境变量。

测试部署

若前面的步骤都顺利完成，此时应该已经将一个功能完整的系统部署到了 AWS 上。在浏览器中打开以下 URL 进行测试：

https://<CHAPTER4_BUCKET>.s3-eu-west-1.amazonaws.com/index.html

将 <CHAPTER4_BUCKET> 替换为你自己的存储桶名称。你应该能够通过浏览器前端创建和更新待办事项。

不过，当前系统存在一个小问题，即系统是公开可访问的，这意味着互联网上的任何人都可以读取和修改待办事项列表。为了解决这个问题，后续将使用 AWS Cognito 来保护待办