Руководство для начинающих
Загрузить файлы на S3 через интерфейс
Вот руководство, показывающее, как настроить корзину S3, включая доступ к корзине + конфигурацию CORS, и получить ключ доступа пользователя + секрет. Кроме того, как загрузить свои файлы в это ведро с помощью пакета aws-sdk, точнее, пакета client-s3.
В целом, это руководство будет следовать приведенному ниже списку:
- Создайте пользователя и предоставьте доступ к использованию API
- Создайте корзину и установите для нее общий доступ и CORS, чтобы ваш локальный сайт, а также ваш веб-сайт могли размещать и удалять файлы.
- Установите «aws-sdk» и загрузите файлы
- Сохраните его в своем бэкэнде или магазине
В этом руководстве я продемонстрирую Vuejs 3 с машинописным текстом, но, следуя указанному направлению, вы сможете добиться того же.
Создайте пользователя и предоставьте доступ к использованию API
Чтобы использовать корзину S3, у вас должна быть учетная запись на AWS. Чтобы создать его, перейдите по этой ссылке.
После создания учетной записи вам нужно будет настроить пользователя, чтобы предоставить ему максимальный доступ, который ему необходим, так называемое Управление идентификацией и доступом (IAM). Подробнее читайте здесь. Короче говоря, это для безопасности.
Чтобы настроить пользователя только для S3, в текстовом виде создайте пользователя IAM, предоставьте ему доступ к API для S3, выполните MFA для этого пользователя и, наконец, перейдите в раздел ключа доступа на вкладке безопасности. На скриншоте:
0. Найдите IAM в строке поиска
- Создать пользователя
2. Назовите пользователя, установите флажок «Предоставить доступ пользователя» и установите флажок «Я хочу создать пользователя IAM».
3. На следующем шаге вам будет предложено назначить пользователю группу. Создайте группу для доступа к S3. Нажмите создать группу.
4. Назовите группу, найдите политики S3 и отметьте «AmazonS3FullAccess».
5. После создания группы назначьте пользователю группу.
6. Завершите оставшуюся часть создания, затем щелкните имя пользователя на странице «Пользователи».
7. Включите доступ к консоли с помощью MFA, следуйте инструкциям с мобильного устройства. Если у вас не установлены совместимые приложения, просто нажмите «Просмотреть список совместимых приложений» и установите одно из них. Код MFA 1 — это первый код, который появился в вашем приложении, а код MFA 2 — это код после кода 1, да, нужно подождать, пока код 1 не исчезнет. К вашему сведению, код 2 должен быть следующим кодом кода 1. Если вы пропустите код 2, вам придется снова подождать.
8. После перенаправления обратно на страницу пользователя нажмите «Учетные данные безопасности» и прокрутите вниз, пока не увидите «Ключи доступа». Создайте один ключ доступа.
9. Выберите правильный для вас. Но в моем случае я буду следовать «Приложению, работающему вне AWS». Затем завершите процесс, вы должны получить ключ доступа с его секретом.
Создать сегмент
В текстовом виде создайте корзину общего доступа и задайте политику корзины и конфигурацию COR, как показано ниже.
политика корзины
{
"Version": "2008–10–17",
"Statement": [
{
"Sid": "AllowPublicRead",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your-bucket-name-here/*"
}
]
}
CORS-конфигурация
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"http://localhost:8080",
"any url that you want to access to your bucket"
],
"ExposeHeaders": []
}
]
На скриншоте
0. поиск S3
- Создать сегмент
2. Назовите свое ведро и выберите подходящий регион.
3. Снимите флажок «Блокировать весь публичный доступ» и подтвердите, что это ведро является общедоступным.
4. После завершения создания перейдите на вкладку разрешений и прокрутите до раздела политики корзины.
5. Отредактируйте политику корзины и вставьте следующие коды.
{
"Version": "2008–10–17",
"Statement": [
{
"Sid": "AllowPublicRead",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::gen-wedding-images/*"
}
]
}
6. Продолжайте прокручивать вниз до раздела CORS и вставьте следующий код в текстовую область.
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"http://localhost:8080"
],
"ExposeHeaders": []
}
]
Установите «aws-sdk» и загрузите файлы
npm install aws-sdk
Во входном файле импортируйте этот пакет и настройте конфигурацию с помощью выбранного вами ключа доступа пользователя и региона. PS, код региона можно получить здесь.
<script lang="ts" async setup>
import { ref } from 'vue';
import { PutObjectCommand, S3Client } from '@aws-sdk/client-s3';
// File input field
const fileInput = ref();
const addPhoto = () => {
fileInput.value.click();
};
// aws
const secretAccessKey = import.meta.env.VITE_S3_SECRET_KEY; // IAM user secret key
const accessKeyId = import.meta.env.VITE_S3_ACCESS_KEY; // IAM user access id
const bucket = import.meta.env.VITE_S3_BUCKET_NAME; // Bucket name
const region = import.meta.env.VITE_S3_REGION; // Region
const client = new S3Client({
region,
credentials: {
secretAccessKey,
accessKeyId,
},
});
const onImageUploaded = async (event: any) => {
const file = event.target.files[0];
const command = new PutObjectCommand({
Bucket: bucket,
Key: file.name,
Body: file,
});
try {
const response = await client.send(command);
} catch (err) {
console.error(err);
}
// Access link will be this one
console.log(`https://${bucket}.s3.${region}.amazonaws.com/${file.name}`)
};
</script>
<template>
<div class="block-container">
<button class="show-more">Show more</button>
</div>
<input
type="file"
multiple
@change="onImageUploaded"
class="hidden"
ref="fileInput"
accept="image/*"
/>
</template>
<style lang="scss" scoped>
.hidden {
display: none;
}
</style>
Для удаления или обновления объекта функция аналогична, вы можете обратиться к этому материалу.
Общий
В настоящее время S3 прост в использовании. Я думаю, что большинству людей придется много гуглить первую часть, где мы настраиваем разрешения пользователей и политики сегментов.
Желаю вам отличного дня и до встречи!
