aws开发作业

最新推荐文章于 2023-12-05 11:48:40 发布

鸭梨的药丸哥

最新推荐文章于 2023-12-05 11:48:40 发布

阅读量765

点赞数

分类专栏： AWS服务文章标签： vue

本文链接：https://blog.csdn.net/qq_43203949/article/details/118554719

版权

AWS服务专栏收录该内容

6 篇文章 1 订阅

订阅专栏

前言

在以前做的一个作业，其实没什么参考价值，不过丢了可惜，就直接上传博客了。这个作业也只是用了半天时间去搞，虽然没什么参考价值，不过对那些刚碰AWS服务的人或许有点作用。

1. 创建AWS资源

1.1 创建AWS S3存储桶

创建

分别创建两个存储桶，分别是：bucket2021-6-11，resizebucket2021-6-11。存储桶：bucket2021-6-11用于存储用户上传的图片，resizebucket2021-6-11用于存储resize后的图片，并提供用户进行下载。

在这里插入图片描述

权限控制

对于resizebucket2021-6-11存储桶是用来供用户进行下载的，所以要设置公开。resizebucket2021-6-11存储桶的权限如下：
在这里插入图片描述

跨域请求配置

因为前端和S3不在同一个网络域下，前端Ajax请求发起跨域请求时，需要给S3存储同配置允许跨域请求。CORS内容如下：

在这里插入图片描述

1.2创建lambda函数

创建并编写代码

创建一个lambda函数并编写一个处理程序，处理程序如下，该处理程序将上传到bucket2021-6-11的图片进行resize操作分别生成512X512和 256X256规格的图片并上传到resizebucket2021-6-11存储桶中。

在这里插入图片描述

捆绑一个S3存储桶（测试）

因为要接收来时S3的上传消息，所以触发器捆绑在存储桶bucket2021-6-11上面。

在这里插入图片描述

测试lambda函数

配置一个测试事件，测试事件选择s3put操作，并命名测试事件为test，更改test中的bucket的位置，以便进行测试。

在这里插入图片描述

查看测试结果如下，可以看到我们配置的内存大少为128MB，使用的内存为108MB，整个lambda执行时间为3052.42ms，收费时间为3053ms，重这些数据中我们可以知道，lambda函数的收费时间是精确到ms级别。

在这里插入图片描述

1.3 创建 SNS主题

创建标准类型的SNS

因为图片处理无需强制要求信息发布的按照先后顺序，所有我们这里创建的是标准类型的SNS主题，以最大确保其最大的SNS信息发布的性能。

在这里插入图片描述

添加订阅

添加两个lambda函数，当发布者将消息发布到SNS主题时，订阅该SNS主题订阅者将会收到发布者的发布的消息，这里的订阅者是两个resize函数。
在这里插入图片描述

给S3创建事件通知

给S3存储桶创建事件通知，当S3存桶发生创建对象时，发生事件通知，这里配置的事件通知是putobject，事件类型是：所有对象创建事件。

在这里插入图片描述

S3事件目标绑定SNS

给事件绑定一个目标，当S3发生上传事件时，S3会将消息发布到SNS中。

在这里插入图片描述

2.架构设计

整个架构设计如下，用户通过浏览器访问，当用户上传图片到S3时，S3会发送事件通知到SNS，然后SNS将事件发放到订阅者，也就是lambda函数中，lambda函数处理完图片后，将图片上传到另一个存储桶，然后用户通过浏览器获取resize后的图片。

在这里插入图片描述

3. vue制作前端页面

前端页面使用前端最留下的VUE框架继续制作，vue是一个渐进式的JavaScript框架，具有易用，灵活，高效等特点。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

前端页面展示

在这里插入图片描述

前端页面使用element-plus UI库进行快速开发，本次制作的前端页面提供上传图片功能和下载resize后图片的功能，上传图片支持拖拽式上传，上传的文件将存储到s3存储中等待触发lambda函数进行处理。

经过几秒种的处理后点击获取图片将会在下面的列表中获取到处理后的图片。获取图片列表如下图所示：
在这里插入图片描述

点击下载将会对图片进行下载操作，将图片保存到本地磁盘中，保存路径使用的是浏览器保存文件的路径。

4. lambda函数的优势

AWS Lambda 是一种无服务器的计算服务，让您无需预置或管理服务器、创建可感知工作负载的集群扩展逻辑、维护事件集成或管理运行时，即可运行代码。借助 Lambda，您几乎可以为任何类型的应用程序或后端服务运行代码，而且完全无需管理。只需将您的代码以 ZIP 文件或容器映像的形式上传，Lambda 便会自动、精确地分配计算执行能力，并根据传入的请求或事件运行您的代码，以适应任何规模的流量。

Lambda 便会自动、精确地分配计算执行能力，并根据传入的请求或事件运行您的代码重上面的lambda函数的分析中可以看到，lambda函数的收费是精确到ms级别，内存分配是精确到MB级别的。

AWS的lambda函数无需用户操心服务器的配置，并且lambda函数拥有极高的可扩展性，能动态地应对各种高流量的变动，lambda函数会更具请求的变化，对计算资源进行动态的扩展，无需用户操心计算资源的扩展。

5. S3存储桶的优势

Amazon S3 提供了一个简单的Web服务接口，可用于随时在Web上的任何位置存储和检索任何数量的数据。

Amazon Simple Storage Service (Amazon S3) 是一种对象存储服务，提供行业领先的可扩展性、数据可用性、安全性和性能。这意味着各种规模和行业的客户都可以使用 S3 来存储并保护各种用例（如数据湖、网站、移动应用程序、备份和还原、存档、企业应用程序、IoT 设备和大数据分析）的数据，容量不限。

Amazon S3 可达到 99.999999999%（11 个 9）的持久性，并为全球各地的公司存储数百万个应用程序的数据。

6. AWS SDK for JS

AWS提供了多种开发语言的SDK包，供开发者调用AWS上面的资源，本次使用SDK for JS去调用AWS上面的资源，进行前端的请求的开发。当前AWS SDK for JS有两个版本可以用，一个是V2版本，一个是V3版本。

6.1 JS调用S3的资源

V3 SDK JS ListObjects

import { S3Client, ListObjectsCommand } from "@aws-sdk/client-s3";
//创建s3client对象
var s3 = new S3Client({
    region: "us-west-2",
    credentials:{
        accessKeyId: "xxxxxxxxx",
        secretAccessKey: "xxxxxxxxxxxxxxxxx"
    }
})

//创建listcommand
const Params = {
    Bucket : "resizebucket2021-6-11",         //桶名
    Prefix: "web/"           //前缀路径
};
var listcommand = new ListObjectsCommand(Params);
const run = async () => {
    try{
        const data = await client.send(new ListObjectsCommand(Paramsweb));
        console.log("Data", data);
    }catch (err) {
        console.log("Error", err);
    }
}

V2 SDK JS upload

const AWS=require('aws-sdk');

var credentials = {
    accessKeyId: "xxxxxxx",
    secretAccessKey: "xxxxxxxxxxxxxxx"
}; //秘钥形式的登录上传
AWS.config.update(credentials);
AWS.config.region = 'us-west-2'; //设置区域

var bucket = new AWS.S3({ params: { Bucket: 'bucket2021-6-11' } }); //选择桶
//上传文件
bucket.upload(params, function(err, data) {
    results.innerHTML = err ? 'ERROR!' : '恭喜上传成功！！！.';
});

7. 参考

AWS SDK for JS V3: (https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-s3/globals.html)

AWS S3 API Reference: https://docs.aws.amazon.com/zh_cn/AmazonS3/latest/API/Welcome.html

nts/client-s3/globals.html)

AWS S3 API Reference: https://docs.aws.amazon.com/zh_cn/AmazonS3/latest/API/Welcome.html

AWS SNS 开发人员指南： (https://docs.aws.amazon.com/zh_cn/sns/latest/dg/welcome.html

鸭梨的药丸哥

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
aws开发作业

目录文章目录目录前言1. 创建AWS资源1.1 创建AWS S3存储桶创建权限控制跨域请求配置1.2创建lambda函数创建并编写代码捆绑一个S3存储桶（测试）测试lambda函数1.3 创建 SNS主题创建标准类型的SNS添加订阅给S3创建事件通知S3事件目标绑定SNS2.架构设计3. vue制作前端页面前端页面展示4. lambda函数的优势5. S3存储桶的优势6. AWS SDK for JS6.1 JS调用S3的资源V3 SDK JS ListObjectsV2 SDK JS upload7.
复制链接

扫一扫