我对AWS服务完全陌生,并想知道是否有关于如何构建照片库Web应用程序的在线教程,以允许我浏览存储在S3存储桶中的文件夹和子文件夹中的照片。
网络应用程序应该允许我以缩略图的形式查看文件夹的内容,当我点击缩略图时,将显示完整的图像。
非常感谢任何帮助。
谢谢!
SAM。
答案 0 :(得分: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>
答案 1 :(得分:0)
考虑到您希望它与AWS服务无服务器:
这里是您想要的教程
https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html
答案 2 :(得分:0)
在寻找类似于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.