因此，我之前两次尝试在一夜之间成为百万富翁的尝试已经失败了。 当然，我设法鼓起了一点兴奋，但是我还没有法拉利坐在我自己家的车道上……

这第三次尝试肯定是赢家，对吗？

我将建立一个可以与流行图像托管网站Imgur媲美的网站。 这将是一个高度可扩展，有弹性且低成本的解决方案，它将利用无服务器 技术来取得巨大成功。 更具体地说，我将使用AWS的Lambda产品来托管单个页面应用程序和组成站点的一系列端点。

在货币化方面？ 我想我会等到明天看到成群的天使投资者在寻找便宜的投资在进行中！ 我将尽快将自己的汽车发射入轨道……

要求

好的，和往常一样，我们需要定义项目必须遵守的一系列要求，才能使此成功。

• 该网站从一开始就必须具有高度的可扩展性。 这将确保它在传播时不会崩溃。 由于我们的端点基于Lambda，因此我们不必太担心可伸缩性。
• 该网站必须具有某种形式的身份验证/授权，以便人们不能只是开始访问未经身份验证的终结点并上传一百万张图像并破坏我们的乐趣。
• 该网站绝对不能让我花大价钱！

这些对于一个小型项目而言是相当可实现的，并且不需要花费太长时间来实施，同时还展示了Cognito，Lambda和S3组合的强大功能。

伸展任务

在以后的文章中，我将对此进行扩展，以便我可以使用Rekognition和dynamodb等服务作为认证考试的练习。

• 在以后的文章中，我们将研究如何使用Rekognition从任何上传的图像中提取一系列标签。 这些标签随后将存储在dynamodb中，并允许人们查看某些类别的图像。
• 我还想实现一个评论和一个upvote / downvote系统，以便用户可以对网站上他们喜欢的内容进行评论和投票。

Vue.JS中的前端

我最新的百万美元构想的前端将使用Vue.JS 2构建。这将允许用户登录/注册+将新图像上传到站点。 它还将以真实的imgur样式显示网站上所有可用的图像。

0.01版将如下所示：

实作

我们的前端将利用amazon-cognito-identity-js和aws-sdk节点模块来与我们的AWS Cognito服务进行通信。 我们需要将以下信息传递到前端的配置文件中，以便连接到Amazon的Cognito服务：

export default {

    region: 'eu-west-1',

    IdentityPoolId: 'eu-west-1_9IBAarCx9',

    UserPoolId: 'eu-west-1:853957954650',

    ClientId: '43duengi4ldb6jel18p84sgq22',

    s3SignedUrl: 'https://rvv1a9to8j.execute-api.eu-west-1.amazonaws.com/dev/upload-node'

}

最初，将这些内容包含在我的前端代码中的想法有些可怕。 如果您像我一样，那么您可能会想到-“如果我揭露了这些，那么人们将能够假装他们是我，并积millions数百万美元的费用”。

但是，这些值仅用于命中未经身份验证的端点，黑客使用它们不会造成* no *伤害。

我们的认知服务

使用amazon-congito-identity-js库，我们可以轻松创建注册功能，身份验证和验证功能。 我不会发布完整的Cognito服务文件，但会介绍一下configure和signup功能：

完整的源文件可以在这里找到： https : //github.com/elliotforbes/imgur-clone/blob/master/src/imgur-frontend/src/cognito/cognito.js

只需在AWS控制台中进行一些设置，并编写140行代码，我们便拥有了一个可以正常运行的用户配置文件系统。 考虑到弹性如何，这非常了不起，并且只需很少的工作即可充分充实。 我不必定义架构，建立数据库，确保数据库弹性或类似功能。 我只是配置了一个用户池，所以一切顺利。

接下来几天，我将在自己的YouTube频道上做一个深入的教程： https : //www.youtube.com/tutorialedge ，介绍如何实现自己的Cognito用户管理系统。

我们的Lambda函数

现在，我们已经对一个简单的前端进行了排序，我们需要我们的lambda函数，这些函数将使我们能够完成诸如上传文件之类的很酷的事情，并检索到存储桶中所有图像的链接。

为了使它起作用，我们需要2个lambda函数来开始。

• 该函数将返回一个已签名的url，使我们可以将其上传到s3存储桶
• 该函数将返回存储桶中所有项目的简单JSON列表。

为了部署我们的功能，我们将再次使用serverless.com的cli。

文件上传Lambda函数

因此，我们的“上传”功能实际上并不是将图像上传到s3存储桶的功能。 本质上，它将仅获取签名的URL，然后将其与PUT HTTP请求打中以便上传到S3。

这里要注意一些关键事项。 我们正在创建一个s3Params对象，其中包括我们要上传到的存储桶名称，密钥，该密钥将是文件名，内容类型，签名的URL保持有效的时间以及ACL。 此ACL是访问控制列表，我们需要将其设置为public-read ，以便人们能够查看存储桶中的图像。

然后调用s3.getSignedUrl() ，该s3.getSignedUrl()返回我们随后上传到的URL。 漂亮又简单。

列出所有Lambda函数

我们列出所有lambda函数将完成查询s3存储桶中的所有对象并将它们作为json响应返回的工作。

我们可以通过将所有上载的图像与一个键和一个发电机中的位置相关联来进一步扩展此功能，然后让该函数返回一个分页的结果列表，但是就最低限度可行的产品而言，这将立即执行。

无服务器部署

每当涉及到部署lambda函数时，我都可以使用无服务器cli轻松实现。

在这个serverless.yml文件中，我可以定义IAM权限以及用于保护我的lambda函数的授权者。 这些授权者将确保人们不仅可以编写脚本，而且每秒可以击中这些端点5,000次。 他们还需要拥有一个注册帐户，并设置一个带有有效令牌的适当Authorization标头。

每当我对函数进行更改时，我都serverless deploy其称为serverless deploy ，它会部署无服务器帝国，并为我提供API端点，现在我可以用任何HTTP请求来实现这些端点。 对于我的两个功能，此部署大约需要10秒钟，因此速度相当快。

无服务器的喜悦

整个项目的主要工具之一是无服务器cli。 这极大地改善了我编写lambda并随后对其进行部署的方式。 如果您有兴趣了解有关如何管理所有Lambda的更多信息，那么我建议您查阅我的另一篇名为《使用Serverless管理Lambda Empire》的文章：

完整的源代码

如果您想自己尝试一下，可以在这里找到该项目的完整源代码：

演示链接

您可以在以下网址找到最终产品：[可能吗？ NSFW ] http://imgur-serverless-clone.s3-website-eu-west-1.amazonaws.com/#/

测试一下，注册一个帐户，然后上传合适的东西！ 请记住，尽管我还没有时间实现诸如密码重置之类的小事情。

结论

这个相当简单的项目拥有一个功能齐全的用户帐户系统，并带有电子邮件验证功能。 它还具有弹性和高度可扩展性，如果您要在专用服务器上设计类似的项目，则需要在多个数据中心中使用多个服务器，则必须设置负载平衡器并为基础系统提供弹性。

通过利用无服务器和Cognito服务，我们可以构建一个系统，该系统要花费数月甚至数年的开发工作才能满足旧基础架构上的同一标准。

希望您发现本文有趣而有教育意义！ 如果您喜欢这个，请随时在下面的评论部分或通过发给我Elliot Forbes来让我知道。 我也想加入LinkedIn 。

From: https://hackernoon.com/building-a-highly-scalable-imgur-clone-with-lambda-and-s3-aaf9da422c3e