创建一个相册网站，显示S3存储桶中的所有照片 [英] Create a photo gallery site that shows all photos in an S3 bucket

问题描述

我对AWS服务完全陌生，想知道是否有任何在线教程介绍如何构建照片库Web应用程序，以使我能够浏览存储在S3存储桶中的文件夹和子文件夹中的照片.

I'm totally new to AWS services and was wondering if there are any online tutorials on how to build a photo gallery web app to allow me to browse photos stored in folders and subfolders in an S3 bucket.

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

The web app should allow me to view the contents of a folder as thumbnails and when I click on a thumbnail, the full image will appear.

任何帮助将不胜感激.

谢谢！

山姆.

推荐答案

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

AWS has gone through many growth spurts since this question was first asked. The Serverless platform was introduced which incorporated AWS CLI functionalities. API gateway now incorporates App Sync, security and Lambda. Now the best and easiest way is a service called AWS Amplify. It uses all the aforementioned technologies with the integration of cloud formation templates. Some of the great features include Hosting, Authorization, Storage and API's using REST or GraphQL.

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

In just a few lines of code add Auth flow. In 10 minutes you can set up a backend with S3 pictures and an S3 Album straight out of the box.

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

Check out Amplify Storage, Amplify S3 and S3Album here. They offer support for many languages. I personally work with JavaScript in React and was able to import S3Album, configure storage in one line and display it within the render method like this:

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>

这篇关于创建一个相册网站，显示S3存储桶中的所有照片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！