Як налаштувати просте завантаження зображень за допомогою Node та AWS S3

Покрокове керівництво, що пояснює, як завантажити зображення або будь-який файл на сервіс Amazon S3.

Це перша частина підручника, в якій ми оброблятимемо серверну (Node.js) частину коду.

Я також підготував відеоурок на YouTube. Ви можете знайти посилання в ресурсах внизу цієї статті.

1. Що нам потрібно встановити та короткий опис.

multer: проміжне програмне забезпечення для обробки файлів даних. В основному використовується для завантаження файлів. Більше інформації: Npm Посилання

multer-s3: розширення multer для зручного завантаження файлів у службу Amazon S3. Більше інформації: Npm Посилання

aws-sdk: необхідний пакет для роботи з AWS (Amazon Web Services). У нашому випадку послуга S3. Більше інформації: Npm Посилання

Перейдіть до своїх проектів і давайте встановимо пакети:

npm install —-save multer multer-s3 aws-sdk

2. Реєстрація на AWS

Спочатку давайте створимо обліковий запис на //aws.amazon.com. Amazon пропонує дивовижний безкоштовний рівень, яким ви можете користуватися перший рік. Після входу шукайте послугу S3.

Простіше кажучи, S3 - це хмарний сервіс для зберігання файлів.

Нам потрібно створити відро . Ви можете уявити відро як папку для ваших файлів. Виберіть назву сегмента та регіон . Оскільки це проста настройка, нас не цікавлять інші конфігурації. (Налаштування за замовчуванням - це нормально - якщо щось незрозуміле, запитуйте в коментарях). Натискайте « далі », поки не перейдете до Перегляду та створіть свій сегмент.

Перейдіть до створеного сегмента та перевірте рядок URL-адреси . Запам’ятайте своє ім’я кошика (для мене «середній тест») та регіон (для мене «схід-схід»).

Тепер нам потрібно отримати надійні облікові дані . Перейдіть до імені свого облікового запису до розділу « мої дані безпеки ». Потім “ Ключі доступу ” та Створити новий ключ доступу .

Ніколи не діліться своїми ключами ні з ким! Тимчасово збережіть ці ключі до якогось файлу або завантажте файл ключів, оскільки нам потрібні ключі, щоб налаштувати завантаження файлу.

Гаразд Налаштування Amazon виконано!

3. Перейдіть до редактора кодування

Тут я не буду пояснювати основи Node або Express. Цей підручник орієнтований лише на завантаження файлу. Якщо ви зацікавлені у реалізації всього проекту, перевірте моє сховище GitHub або перегляньте повний посібник. (Ви можете знайти посилання в кінці цього допису в блозі).

  1. Створіть службу завантаження файлів із наступною реалізацією (перша частина):

Важливе зауваження: Ніколи не виставляйте свої секретні дані безпосередньо у файл! Ніколи не діліться своїми секретними даними! Подумайте про налаштування змінних середовища у вашому локальному середовищі або у випадку розгорнутих проектів, змінних у вашому постачальнику хмарних послуг. Найкращим рішенням буде використання aws-профілів : //docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/loading-node-credentials-shared.html.

По-перше, ми імпортуємо всі встановлені пакети. Друга частина полягає в налаштуванні наших AWS . Нам потрібно надати наші секретні ключі та регіон із рядка URL, який я показав вам раніше.

Після налаштування AWS ми можемо створити екземпляр нашого Amazon S3. Ми ще не зовсім закінчили. Тепер давайте подивимось другу частину цього впровадження.

Тепер ми можемо створити рішення для багатомовного завантаження. Нам потрібно надати функцію об'єкту multer з такими властивостями.

  1. s3 : екземпляр Amazon S3, який ми створили раніше.
  2. bucket : назва нашого сегмента (у моєму випадку: “середній тест”)
  3. acl : контроль доступу до файлу ("загальнодоступне читання" означає, що кожен може переглядати файли), ви можете перевірити всі доступні типи тут: посилання на Amazon
  4. метада : функція зворотного виклику для встановлення метаданих завантажених файлів. Тут я встановлюю додаткові метадані для fieldName . Ви можете побачити ці дані на зображенні нижче.

5. ключ: функція зворотного виклику для встановлення властивості ключа (під яким ключем ваш файл буде збережений у вашому сегменті). У нашому випадку ми робимо позначку часу поточного часу і зберігаємо цей файл під цим іменем. Таким чином наше ім'я файлу завжди буде унікальним, але ви можете вибрати будь-яке ім'я, яке хочете.

Після всіх налаштувань ми експортуємо об’єкт завантаження , щоб використовувати його в інших файлах.

4. Налаштуйте маршрут для завантаження зображення

Ми майже закінчили, але користувачі нашого додатку все ще не мають доступу до завантаження зображень. Нам потрібно розкрити цю функціональність для них. Давайте створимо кінцеву точку для збереження файлу.

Ми експортуємо наш об’єкт завантаження, який ми створили раніше, і створюємо з нього новий. Новий є більш конкретним з додатковою конфігурацією для завантаження одного зображення . Ми надаємо йому значення « зображення ». Це значення дуже важливе, оскільки ми надішлемо наш файл на сервер за цим ключем.

Друга частина - це сам маршрут. Кінцеву точку POST до ' / image-upload '. Всередині ми називаємо singleUpload . Не забудьте передати всередині req та res, оскільки multer отримає файл, який ми надсилаємо на сервер, від об'єкта req.

Ми перевіряємо наявність помилки. Якщо такої немає, ми відправляємо назад JSON із значенням розташування нашого файлу, що є лише URL-адресою файлу на Amazon .

Аааа, і все! Ми можемо завантажувати файли на Amazon S3 зараз. Досить просто, що ти думаєш?

5. Давайте перевіримо це у Поштальєна.

Щоб побачити результати нашої напруженої роботи, нам потрібно надіслати запит на сервер із зображенням, яке ми хочемо завантажити. У цій частині ми перевіримо це через поштар. У наступній частині підручника ми створимо реалізацію в додатку Angular.

Якщо у вас немає Postman, ви можете просто завантажити його як розширення Google Chrome. Просто знайдіть " розширення листоноша google chrome ". Листоноша - це програма для ініціалізації, надсилання та тестування запитів на сервер з простої справи.

  1. Надішліть запит на публікацію кінцевій точці, яку ми створили раніше. У моєму випадку я вказав у шляху вузла / image-upload .
  2. Виберіть тіло даних форми .
  3. Забезпечити ключ від з зображенням. Ви помітите, що це ключ, який ми раніше встановлювали в нашому коді. Перевірте файл і виберіть файл із комп’ютера.
  4. Надішліть запит .

Вам слід повернути JSON із URL-адресою завантаженого файлу.

Вуаля! Оце, хлопці. Це просте завантаження файлу для Node. У наступній статті я продовжую реалізацію інтерфейсу для Angular.

Якщо вам подобається цей підручник, сміливо переглядайте мій повний курс з Udemy - Повне керівництво Angular, React & Node | Додаток у стилі Airbnb.

Відео Лекція: Youtube відео

Виконаний проект: Моє сховище github

Ура,

Філіп