Amazon S3 Bucket - это ресурс облачного хранилища от Amazon Web Services (AWS), который удобно использовать для простого хранения простых объектов и файлов. S3 - это своего рода аббревиатура от Simple Storage Service.

Хотя загрузка данных в основном выполняется на стороне сервера, это легко сделать в браузере или, как мы говорим, во внешнем интерфейсе через Javascript SDK для AWS.

Вот несколько простых, но подробных шагов по настройке собственного S3 Bucket и загрузке файлов в него, используя только Javascript и HTML.

Шаг 1. Создание сегмента S3

  1. Перейдите в консоль AWS и выберите сервис S3.
  2. В консоли выберите параметр «Создать сегмент».

3. Откроется форма. На странице «Имя и регион» введите желаемое название сегмента в поле «Имя сегмента». В поле «Регион» выберите регион, в котором вы хотите разместить корзину.

4. На странице «Установить разрешения» выберите нужные разрешения в соответствии с вашими требованиями к доступности ваших файлов.

5. После заполнения формы нажмите «Создать корзину», и ваша корзина будет создана!

Шаг 2: Создайте пул федеративной идентификации

Теперь нам нужно создать пул федеративной идентификации для пользователей, не прошедших проверку подлинности, и получить его идентификатор, который будет помещен в скрипт нашего браузера, чтобы пользователи могли получить доступ для загрузки данных в корзину s3.

  1. Перейдите в консоль Amazon Cognito в том же регионе, в котором создана корзина.
  2. Щелкните «Manage Identity Pool».

3. На следующей странице нажмите «Создать новый пул пользователей».

4. Создайте новый пул с доступом для неаутентифицированного пользователя.

Шаг 3. Добавьте роль политики в IAM Console

  1. В консоли IAM найдите роль неаутентифицированного пользователя, созданного пулом федеративных удостоверений, и присоедините следующую политику, чтобы разрешить пользователям разрешения.
{
     "Version": "2012-10-17",
   "Statement": [
      {
         "Effect": "Allow",
         "Action": [
            "s3:*"
         ],
         "Resource": [
            "arn:aws:s3:::BUCKET_NAME/*"
         ]
      }
   ]
}

2. Здесь BUCKET_NAME - это имя вашего нового ведра.

Шаг 4. Настройте CORS

Перейдите в свою корзину и на вкладке «Разрешения» напишите конфигурацию CORS следующим образом.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>POST</AllowedMethod><AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod><AllowedMethod>DELETE</AllowedMethod><AllowedMethod>HEAD</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Шаг 5: Написание сценария JavaScript

После завершения всех настроек в консоли Amazon остается только написать JS-скрипт в коде браузера для настройки корзины.

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Bucket Configurations
var bucketName = BUCKET_NAME;
var bucketRegion = BUCKET_REGION;
var IdentityPoolId = IDENTITY_POOL_ID;

 AWS.config.update({
                region: bucketRegion,
                credentials: new AWS.CognitoIdentityCredentials({
                    IdentityPoolId: IdentityPoolId
                })
            });

            var s3 = new AWS.S3({
                apiVersion: '2006-03-01',
                params: {Bucket: bucketName}
        });
</script>

Здесь BUCKET_NAME - это имя корзины, которую вы только что создали, IDENTITY_POOL_ID - это идентификатор пула федеративной идентификации, который можно получить из его консоли, а BUCKET_REGION - это область корзины, в которой она создана и в настоящее время находится.

Шаг 6: простой HTML-код

Вот базовый простой HTML-код, имеющий поле ввода для загрузки файла вместе с простой шкалой выполнения HTML.

<div>        
   <input type="file" id="fileUpload">    
</div>    
<div> 
   <button onclick="s3upload()">Submit</button>    
</div>     
<progress max=”100” value=”0”></progress>

Шаг 7: функция S3 для загрузки файла в корзину

<script type="text/javascript">
function s3upload() {
   var files = document.getElementById('fileUpload').files;
   if (files) 
   {
     var file = files[0];
     var fileName = file.name;
     var filePath = 'my-first-bucket-path/' + fileName;
     var fileUrl = 'https://' + bucketRegion + '.amazonaws.com/my-    first-bucket/' +  filePath;
     s3.upload({
        Key: filePath,
        Body: file,
        ACL: 'public-read'
        }, function(err, data) {
        if(err) {
        reject('error');
        }
        alert('Successfully Uploaded!');
        }).on('httpUploadProgress', function (progress) {
        var uploaded = parseInt((progress.loaded * 100) / progress.total);
        $("progress").attr('value', uploaded);
      });
   }
};
</script>

Здесь мы загружаем данные с помощью простой функции загрузки S3. Мы можем определить наш собственный путь внутри корзины. Пути вложены друг в друга и разделены символом «/».

Теперь ваши данные были успешно загружены в корзину S3! Вы можете получить к нему доступ в консоли S3, зайдя в корзину, в которую вы загрузили свой файл.

Вы можете получить доступ к приведенному выше примеру на Github.

Есть много других способов, которыми можно управлять данными через браузер в корзине S3, включая перечисление, удаление и просмотр файлов и папок. Они объясняются в документации AWS на простом примере здесь.