Question

我对AWS服务完全陌生，并想知道是否有关于如何构建照片库Web应用程序的在线教程，以允许我浏览存储在S3存储桶中的文件夹和子文件夹中的照片。

网络应用程序应该允许我以缩略图的形式查看文件夹的内容，当我点击缩略图时，将显示完整的图像。

非常感谢任何帮助。

谢谢！

SAM。

Answer 1

自首次提出这个问题以来，AWS经历了许多增长。引入了无服务器平台，该平台合并了AWS CLI功能。 API网关现在合并了App Sync，安全性和Lambda。现在，最好，最简单的方法是一项称为AWS Amplify的服务。它使用了所有上述技术以及云形成模板的集成。一些出色的功能包括使用REST或GraphQL的托管，授权，存储和API。

在几行代码中添加Auth流。在10分钟内，您可以直接使用S3图片和S3相册设置后端。

检出Amplify Storage，Amplify S3和S3Album here。他们为多种语言提供支持。我亲自在React中使用JavaScript，并且能够导入S3Album，在一行中配置存储并在如下的render方法中显示它：

import './App.css';
import Amplify from 'aws-amplify';
import { S3Album, withAuthenticator, S3Image } from 'aws-amplify-react';
Amplify.configure(awsmobile);

Class App extends Component {
  render() {
    return (
      <div className="App">
        <S3Album path="pictures/" picker />
      </div>
    );
  }
}

export default withAuthenticator(App, true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

考虑到您希望它与AWS服务无服务器：

这里是您想要的教程

https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html

Answer 3

在寻找类似于OP要求的内容的同时，跨整个项目https://github.com/toehio/s3album进行访问。

概述

Browse your bucket for photos.
Publish albums from your photos.
Share albums with their public URL.

您发布的相册是私人相册：只有在您知道的情况下才能找到它们相册的网址。

成为纯网络应用程序意味着：

Configuration-free: upload the scripts to S3 and start publishing albums right away.
Database-free: no database is required for creating or viewing albums. Albums are self contained and portable.
No server-side scripts: all the operations are done in your browser, including resizing photos and thumbnails.

创建一个照片库网站，显示S3存储桶中的所有照片

3 个答案: