功能简介
图片与实现说明来自 Uploading to Amazon S3 directly from a web or mobile application
实现流程简介
- 创建 Bucket:用于存储上传的文件
- 创建 Role:保障 Lambda 函数有权限访问 S3
- 创建 Lambda 函数:用于生成预签名 URL
- 创建 Rest API:用于调用 Lambda 函数
- 创建前端页面:用于上传文件
- 在前端页面调用 Rest API:获得 S3 预签名 URL
- 上传文件:使用 PUT 请求将文件上传到 S3(上传地址为上一步获取的「S3 预签名 URL」)
常用文档
- AWS CDK 2.90.0 API Reference 版本更新很快,请注意文档版本号
- AWS SDK for JavaScript v3
- Amazon S3
作为一名初学者我参考了以下资料
Bilibili 入门视频
AWS 入门
- AWS Lambda 入门
- AWS CDK入门
- AWS Command Line Interface 文档
- AWS IAM Identity Center (successor to AWS Single Sign-On)
- Create Entity Class from SQL Database Table
- AWS SDK for JavaScript
- DynamoDB 的一致性有三种:Strongly、consistent、reads
AWS SDK
- Integrate the AWS SDK for JavaScript into a React App
- install yarn
- 安装 Amazon S3 软件包和依赖项
- AWS SDK for JavaScript Getting started in Node.js
- 使用 Node.js 构建 Lambda 函数
- 使用 AWS SDK 创建 Amazon S3 的预签名 URL
开发时遇到权限问题时可参考
API Gateway
开始使用 API Gateway 教程:使用 Lambda 和 DynamoDB 构建 CRUD API
Website
- Deploying a Static Website with AWS Amplify and CDK
- Cross Origin Resource Sharing (CORS)
- How to host static website manually on AWS S3
- How to Build a File Upload System on AWS with React and a Serverless API | Lambda, S3, API Gateway 上传文件视频说明
- 解决 aws api gateway 502 internal server error
- 解决 AWS SDK for JavaScript v3 Credential is missing
- 解决 cdk RestApi CORS 设置无效
其他
使用 AI 解决的一些问题
AI 工具:Edge 聊天功能;Google bard
- 在 aws cdk javascript的项目中如何使 index.html 与 apiGateway 使用相同的域名
- 在 aws cdk javascript的项目中如何通过 vpc 使 index.html 与 apiGateway 使用相同的ip
- 在 aws cdk javascript的项目中如何允许 Api Gateway 跨域访问
- 在 aws cdk javascript的项目中如何实现 Stack 向 index.html 传递参数
- 在 aws cdk javascript的项目中如何给 bucket 添加角色
- 在 aws cdk javascript的项目中 index.html 页面请求 Api Gateway 报 AccessDenied 如何解决
- 在 aws cdk javascript的项目中设置 Api Gateway 可以公开访问
- 在 aws cdk javascript的项目中设置 Api Gateway 的 IAM 策略
- AWS SDK for JavaScript v3 调用 apiGateway 示例代码
- AWS SDK for JavaScript v3 invoke Lambda
- Building S3 Static Website Using AWS CDK
- S3 Static Website invoke api gateway