Amazon S3 Bucket - это ресурс облачного хранилища от Amazon Web Services (AWS), который удобно использовать для простого хранения простых объектов и файлов. S3 - это своего рода аббревиатура от Simple Storage Service.
Хотя загрузка данных в основном выполняется на стороне сервера, это легко сделать в браузере или, как мы говорим, во внешнем интерфейсе через Javascript SDK для AWS.
Вот несколько простых, но подробных шагов по настройке собственного S3 Bucket и загрузке файлов в него, используя только Javascript и HTML.
Шаг 1. Создание сегмента S3
- Перейдите в консоль AWS и выберите сервис S3.
- В консоли выберите параметр «Создать сегмент».
3. Откроется форма. На странице «Имя и регион» введите желаемое название сегмента в поле «Имя сегмента». В поле «Регион» выберите регион, в котором вы хотите разместить корзину.
4. На странице «Установить разрешения» выберите нужные разрешения в соответствии с вашими требованиями к доступности ваших файлов.
5. После заполнения формы нажмите «Создать корзину», и ваша корзина будет создана!
Шаг 2: Создайте пул федеративной идентификации
Теперь нам нужно создать пул федеративной идентификации для пользователей, не прошедших проверку подлинности, и получить его идентификатор, который будет помещен в скрипт нашего браузера, чтобы пользователи могли получить доступ для загрузки данных в корзину s3.
- Перейдите в консоль Amazon Cognito в том же регионе, в котором создана корзина.
- Щелкните «Manage Identity Pool».
3. На следующей странице нажмите «Создать новый пул пользователей».
4. Создайте новый пул с доступом для неаутентифицированного пользователя.
Шаг 3. Добавьте роль политики в IAM Console
- В консоли 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 на простом примере здесь.