photo sharing website

照片共享网站

静态预渲染的照片共享网站可以公开分享您的图片，而无需运行或维护服务器。

概念

• 静态网站 - 公共访问的Web应用程序，
• 管理Web应用程序 - 密码保护的Web应用程序（React.js Web应用程序）用于按需生成静态网站。

下面的YouTube视频显示了一切的工作方式：

建筑学

1. 用/路径在S3桶中作为原点
2. S3存储桶中带有/website路径的CloudFront分发作为原点（静态网站静态源代码）
3. S3存储桶可容纳所有静态资源（HTML，CSS，JavaScript和图像）
4. 带有初始上传图片的S3存储桶
5. AWS Lambda用于生成静态网站的HTML源代码
6. AWS Lambda用于生成缩略图并使用Amazon Rekognition检测上载照片的相关标签
7. Amazon Cognito为管理用户提供身份验证

部署

先决条件

• 创建一个AWS帐户
• 安装放大CLI
• 安装NPM

指示

1。克隆存储库

 git clone https://github.com/cornelcroi/photo-sharing-website.git

2。初步操作

• 管理用户电子邮件

  • 在amplify/backend/boostrap/adminuser/parameters.json中，用自己的电子邮件地址替换[email protected] 。

• 图像大小

  • 该应用程序使用包装为lambda层的sharp库来调整图像，
  • 创建一个锋利的层。请按照本教程在所需的区域中创建一个锋利的层，然后在amplify/backend/function/S3TriggeraXXXX/S3TriggeraXXXX-cloudformation-template.json中更新层ARN。

3。安装依赖项

 npm install

4。将堆栈部署到您的AWS帐户

• 初始化您的放大云应用程序

   amplify init
  

• 随着本地开发的运行，云资源的规定云资源

   amplify push
  

• 将静态资产发布到Amazon S3

   amplify publish
  

享受 ！

配x您可能需要在第一次部署之后等待几个小时，以便将S3存储桶的DNS名称传播！ （如果使用电子邮件收到的临时密码在耗竭后登录，则必须等待，请等待，然后再尝试，代码没有错）

关键点

• AWS lambda使用HTML模板和存储在DynamoDB中的数据生成静态文件，
• 使用AWS Amplify构建的React.js应用程序，
• 在第一次部署时创建了一个admin用户，
• 静态网站（带有HTML模板文件）是由AWS lambda生成的
• 4个HTML文件用于生成静态网站，

  /albums-gallery-template.html                                       <-- template for an album gallery page
  /albums-template.html                                               <-- template for list of albums page
  /album-item-template.html                                           <-- template for one album used in list of albums page
  /photo-item-template.html                                           <-- template for one photo used on album gallery page

• 每个HTML模板都包含要用lambda替换的变量，例如Code Bellow

  < div >
    < h2 > {ALBUM_NAME} </ h2 >
    < div > {ALBUM_PHOTOS} photos · {ALBUM_DATE} </ div >
  </ div > 

预渲染静态网站的优点

• 静态位点的预渲染静态HTML的加载速度比动态位点上的页面快得多。快速网站对于良好的用户体验非常重要，也可以在搜索引擎排名中提高您的网站，
• 静态站点发生器降低了现场复​​杂性。反过来，这提高了速度和可靠性，并使开发人员体验平滑，
• 您不必担心数据库 - 通用流量峰值，
• 您可以通过内容交付网络托管您的网站，该网站随着网站的流量扩展，
• 降低成本，
• 更好的SEO，
• 好缓存。

我使用此存储库来构建自己的网站manbehindlens.com。

工具

• AWS放大JavaScript库将我们的前端连接到云资源

• Amazon Cognito处理管理员注册授权

• 亚马逊简单存储服务（S3）存储和提供我希望上传的照片，以托管我们的应用程序的react.js App Assets，并托管静态生成的网站

• 亚马逊Cloudfront存储并提供与我们的用户关心上传的尽可能多的照片，并托管我们应用的静态资产

• Amazon DynamoDB提供对专辑和照片数据的API查询的毫秒响应时间

• AWS AppSync托管我们的前端的GraphQl API

• AWS lambda在云中创建光合作用的照片缩略图并按需生成静态网站

• 亚马逊重新认知要检测每张上传照片的5个标签

费用

每月不到一杯咖啡

学分

• 多宇宙HTML模板
• 镜头HTML模板
• 使用AWS Amplify Workshop构建照片共享网络应用
• 为AWS Lambda创建锋利的层
• AWS层