Использование Node.js для отображения изображений в частном сегменте AWS S3

Советы по Amazon Web Services

Использование Node.js для отображения изображений в частном сегменте AWS S3

Обход файловой системы и использование потоков

Обзор Amazon Web Services S3

Amazon Web Services (AWS) позволяет использовать свою облачную службу хранения объектов Amazon Simple Storage Service (Amazon S3) для хранения среди других элементов изображений. Они хранятся в ведре S3.

Чтобы узнать больше об Amazon S3, ознакомьтесь с этой статьей Йованом Эрнандесом и этой статьей Гонсало П.

В этой статье я хотел бы изучить один из нескольких способов отображения изображений, хранящихся в корзине S3, на веб-странице из node.js. и

таким образом, что нам не нужно сохранять изображение в файловой системе.

Я упомянул один из нескольких способов выше, потому что то, как вы выбираете отображение изображений в S3, зависит от того, как они хранятся, публично или приватно. Если они находятся в публичной корзине S3, процесс так же прост, как указание ‹img› на URL-адрес изображения. Большинство сегментов S3 не являются общедоступными.

Однако, когда ведро S3 является частным, все становится немного сложнее. В этой ситуации есть два основных варианта. Один из них - установить подписанный URL на вашу корзину S3. Другой -

доступ к изображениям как к потоку.

Это будет наш подход.

Репозиторий GitHub можно найти здесь.

Давайте начнем

Допущения AWS

Я предполагаю, что у вас уже есть частный сегмент S3 под названием companyimages с изображением в нем. Используйте упомянутые выше ресурсы, чтобы при необходимости создать S3.
Я предполагаю, что у вас есть учетные данные IAM или роль EC2, которая разрешает доступ к корзине S3.

Роли EC2 с наименьшими привилегиями считаются оптимальной практикой. Учетные данные IAM упоминаются и используются здесь только для тех, кто экспериментирует с бесплатным уровнем.

Я буду использовать Visual Studio Code (VSCode) с установленным node.js.

Примечание. Полный код находится внизу этой статьи на случай, если у вас возникнут какие-либо проблемы.

Создать веб-сервер

Начнем с использования экспресс для создания веб-сервера.

Создайте каталог и откройте VSCode в этой папке.
Создайте файл с именем index.js. затем откройте окно Терминал и введите следующее, чтобы создать package.json и сделать index.js файлом по умолчанию.

npm init -y

3. Для установки экспресс введите в Терминале следующее.

npm install express

4. Добавьте следующий код в index.js, чтобы создать наш базовый веб-сервер.

const express=require('express');
const app=express();
const PORT=3200;
// Our default route
app.get('/',(req,res)=>{
res.send('Testing');
})
app.listen(PORT,()=>{
    console.log(`Web Server running on port ${PORT}`);
});

5. Протестируйте свой веб-сервер, нажав F5. Консоль должна показать, что он работает на порту 3200 (не стесняйтесь выбирать другой порт). Также в вашем браузере введите localhost: 3200 и убедитесь, что там написано «Тестирование».

Примечание. Вы можете использовать инструменты в правом верхнем углу изображения выше, чтобы обновить и остановить веб-сервер по мере необходимости. Мы могли бы установить nodemon для мониторинга нашего веб-сервера, но я хотел бы сосредоточиться на нашей задаче.

Установка AWS SDK для JavaScript в Node.js

Этот шаг необходим для доступа к ресурсам AWS.

В Терминале введите следующее, чтобы установить пакет aws-sdk npm.

npm install aws-sdk

2. Нам нужно импортировать этот файл. Добавьте следующую дополнительную строку (выделенную жирным шрифтом) в начало вашего index.js.

const express=require('express');
const app=express();
const path = require('path');
const PORT=3200;
const AWS = require('aws-sdk');

Когда пользователь переходит на наш веб-сайт, будет доступен маршрут по умолчанию (/). Здесь app.get (‘/’) - это то место, где мы будем выполнять большую часть нашей работы. Сначала мы установим наши учетные данные AWS. Я не рекомендую жестко кодировать ваши учетные данные IAM, как мы будем это делать. Затем мы создадим экземпляр S3.

3. Удалите res.send («Тестирование»); и добавьте вместо него следующее.

AWS.config.update({
        accessKeyId: "Your Key Goes Here",
        secretAccessKey: "Your Secret Key Goes Here"
      });
let s3 = new AWS.S3();

Получение и отображение изображения

Мы будем использовать метод getObject () S3. Мы заключим это в асинхронную функцию и вернем обещание.

Функция getImage () вызовет метод getObject (), передав ему имя вашей корзины S3 и имя желаемого изображения.

4. Добавьте следующий код (жирным шрифтом). Теперь внутренняя часть app.get должна выглядеть следующим образом.

AWS.config.update({
        accessKeyId: "Your Key Goes Here",
        secretAccessKey: "Your Secret Key Goes Here"
      });
let s3 = new AWS.S3();
async function getImage(){
        const data =  s3.getObject(
          {
              Bucket: 'companyimages',
              Key: 'your stored image'
            }
          
        ).promise();
        return data;
      }

Данные const будут содержать поток данных. Нам нужно будет преобразовать это в строку Base64 и добавить тип MIME. Кодирование будет выполнено с помощью функции encode (). Функция encode () ниже будет вызвана, как только мы получим данные от S3.

5. Добавьте следующий код под функцией getImage ().

function encode(data){
    let buf = Buffer.from(data);
    let base64 = buf.toString('base64');
    return base64
    }

Наконец, нам нужно вызвать getImage (), который, в свою очередь, вызовет getObject (). Поскольку getObject () возвращает обещание, мы будем использовать .then () для получения данных и, используя стрелочную функцию, закодировать их, создав тег ‹img›, источником которого будут наш тип MIME и закодированные данные. Затем мы создадим нужный нам HTML, в том числе с использованием изображения.

HTML-часть, конечно же, может быть реализована в рамках или движке шаблонов, но я хотел бы, чтобы она была как можно более простой.

6. Добавьте следующий код выше или ниже функции encode (). Я поставил свой над ним.

getImage()
 .then((img)=>{
  let image="<img src='data:image/jpeg;base64," + encode(img.Body) + "'" + "/>";
  let startHTML="<html><body></body>";
  let endHTML="</body></html>";
  let html=startHTML + image + endHTML;
  res.send(html)
  }).catch((e)=>{
        res.send(e)
  })

Готово!

Давай проверим. Полный код будет предоставлен в случае возникновения каких-либо проблем.

Обновите свой веб-сервер или остановите и запустите его. Перейдите к localhost: 3200 в своем браузере или обновите его, и вы увидите свое изображение.

Довольно круто!

Заключение

Мы успешно извлекли изображение из корзины AWS S3 и отобразили его без использования файловой системы для хранения изображения. Зачем обходить файловую систему? Если вы запускаете это на AWS EC2, у вас нет доступа к файловой системе или, скорее, не следует ее использовать.

Попутно мы также узнали, как создать простой веб-сервер и передавать данные со стороны сервера клиенту с помощью простого JavaScript.

Спасибо за чтение и удачного программирования!

Прочтите все статьи на Medium, которые вам нужны, и помогите мне продолжать писать, став участником Medium всего за 5 долларов в месяц.

Присоединяйтесь к Medium по моей реферальной ссылке - Gravity well (Роб Томлин)
Как участник Medium, часть вашего членского взноса идет писателям, которых вы читаете, и вы получаете полный доступ в каждую историю… bobtomlin-70659.medium.com

Полный код

const express=require('express');
const app=express();
const PORT=3200;
const AWS = require('aws-sdk');
// Our default route
app.get('/',(req,res)=>{
AWS.config.update({
        accessKeyId: "Your Key Goes Here",
        secretAccessKey: "Your Secret Key Goes Here"
      });
let s3 = new AWS.S3();
async function getImage(){
        const data =  s3.getObject(
          {
              Bucket: 'companyimages',
              Key: 'your stored image'
            }
          
        ).promise();
        return data;
      }
getImage()
      .then((img)=>{
          let image="<img src='data:image/jpeg;base64," + encode(img.Body) + "'" + "/>";
          let startHTML="<html><body></body>";
          let endHTML="</body></html>";
          let html=startHTML + image + endHTML;
        res.send(html)
      }).catch((e)=>{
        res.send(e)
      })
function encode(data){
          let buf = Buffer.from(data);
          let base64 = buf.toString('base64');
          return base64
      }
})
app.listen(PORT,()=>{
    console.log(`Web Server running on port ${PORT}`);
});

Ссылки: