TOC

Как загрузить файл в хранилище объектов с Node.js

Вступление

Хранение объектов - это популярный и масштабируемый метод хранения и обслуживания статических ресурсов, таких как аудио, изображения, текст, PDF-файлы и другие типы неструктурированных данных. Облачные провайдеры предлагают хранилище объектов в дополнение к традиционному локальному или блочному хранилищу, которое используется для хранения динамических файлов приложений и баз данных. Прочитайте Object Storage vs. Block Storage, чтобы узнать о вариантах использования и различиях между ними.

Spaces - это простой сервис хранения объектов, предлагаемый DigitalOcean. Помимо возможности входа в систему, загрузки, управления и удаления сохраненных файлов через панель управления, вы также можете получить доступ к вашему DigitalOcean Space через командную строку и API-интерфейс Spaces.

В этом руководстве мы создадим приложение Node.js, которое позволит пользователю загружать файл в свое пространство DigitalOcean путем отправки формы в интерфейс веб-сайта.

Предпосылки

Чтобы следовать этому уроку, вам понадобится:

  • DigitalOcean Space, а также ключ доступа и секретный ключ доступа к вашей учетной записи. Прочтите How To Создать DigitalOcean Space и ключ API, чтобы начать работу с Учетная запись DigitalOcean, создайте пробел и настройте ключ и секретный ключ API.

  • Node.js и npm установлены на вашем компьютере. Вы можете посетить Node.js Загрузки, чтобы установить правильную версию для вашей операционной системы.

Теперь у вас должна быть учетная запись DigitalOcean, пробел с ключом доступа и Node.js и npm, установленные на вашем компьютере.

Добавить ключи доступа к файлу учетных данных

DigitalOcean Spaces совместим с Amazon Simple Storage Service (S3) API, и мы будем использовать https://aws.amazon.com/sdk-for-node -js / [AWS SDK для JavaScript в Node.js] для подключения к Пространству, которое мы создали.

Первым шагом является создание файла * credentials * для размещения ключа доступа и секретного ключа доступа, которые вы получили при создании пространства DigitalOcean. Файл будет расположен по адресу * + ~ / .aws / credentials + * на Mac и Linux или * + C: \ Users \ USERNAME \ .aws \ credentials + * в Windows. Если вы ранее сохранили учетные данные AWS, вы можете прочитать о https://aws.amazon.com/blogs/security/a-new-and-standardized-way-to-manage-credentials-in-the-aws-sdks/ [хранение нескольких наборов учетных данных] для дальнейшего руководства.

Откройте командную строку, убедитесь, что вы находитесь в каталоге * Users *, имеете доступ к административному пользователю + sudo + и создайте каталог * + .aws + * с файлом * + credentials + * внутри.

sudo mkdir .aws && touch .aws/credentials

Откройте файл и вставьте в него следующий код, заменив + your_access_key + и + your_secret_key + соответствующими ключами.

полномочия

[default]
aws_access_key_id=
aws_secret_access_key=

Теперь ваш доступ к Spaces через AWS SDK будет аутентифицирован, и мы можем перейти к созданию приложения.

Установите Node.js зависимости

Для начала создайте каталог, в который вы хотите поместить приложение Node.js, и перейдите в каталог. Для этой демонстрации мы создадим наш проект в * + space-node-app * в каталоге *` + sites или` *.

mkdir sites/spaces-node-app && cd sites/spaces-node-app

Создайте новый файл * + package.json * для вашего проекта. Вставьте приведенный ниже код в файл.

package.json

{
 "name": "spaces-node-app",
 "version": "1.0.0",
 "main": "server.js",
 "scripts": {
   "start": "node server.js"
 },
 "license": "MIT"
}

Это основной файл + package.json, в котором указаны имя, номер версии и лицензия нашего приложения. Поле + scripts + позволит нам запустить сервер Node.js, набрав + npm start + вместо + node server.js +.

Мы установим все наши зависимости командой + npm install +, за которой следуют имена четырех зависимостей в нашем проекте.

npm install aws-sdk express multer multer-s3

После выполнения этой команды файл + package.json должен быть обновлен. Эти зависимости помогут нам в подключении к API DigitalOcean Spaces, создании веб-сервера и обработке загрузки файлов.

  • https://www.npmjs.com/package/aws-sdk [+ aws-sdk +] - AWS SDK для JavaScript позволит нам получить доступ к S3 через JavaScript API.

  • https://www.npmjs.com/package/express [+ express +] - Express - это веб-инфраструктура, которая позволит нам быстро и эффективно настроить сервер.

  • https://www.npmjs.com/package/multer [+ multer +] - Multer - это промежуточное ПО, которое будет обрабатывать загрузку файлов.

  • https://www.npmjs.com/package/multer-s3 [+ multer-s3 +] - Multer S3 расширяет возможности загрузки файлов в хранилище объектов S3, а в нашем случае в DigitalOcean Spaces.

Теперь, когда у нас есть расположение проекта и зависимости, мы можем настроить сервер и интерфейсные представления.

Создайте интерфейс приложения

Во-первых, давайте создадим файлы для публичного просмотра нашего приложения. Это то, что пользователь увидит в интерфейсе. Создайте каталог * public * в своем проекте с помощью + index.html,` + success.html` и + error.html. Все эти три файла будут иметь приведенный ниже скелет HTML с различным содержанием в + body +. Запишите следующий код в каждый файл.

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>DigitalOcean Spaces Tutorial</title>

 <link rel="stylesheet" href="./style.css">
</head>

<body>

 <!-- contents will go here -->

</body>

</html>

Напишите сообщение об ошибке в + body файла` + error.html`.

error.html

...

<h1>Something went wrong!</h1>
<p>File was not uploaded successfully.</p>

...

Напишите сообщение об успехе в + body файла` + success.html`.

success.html

...

<h1>Success!</h1>
<p>File uploaded successfully.</p>

...

В + index.html + мы создадим HTML + form + с помощью + multipart / form-data +. Он будет состоять из простой загрузки файла + input + и кнопки отправки.

index.html

...

<h1>DigitalOcean Spaces Tutorial</h1>

<p>Please select a file and submit the form to upload an asset to your DigitalOcean Space.</p>

<form method="post" enctype="multipart/form-data" action="/upload">
 <label for="file">Upload a file</label>
 <input type="file" name="upload">
 <input type="submit" class="button">
</form>

...

Наконец, давайте создадим + style.css + и добавим достаточно CSS, чтобы приложение было легко читаемым.

style.css

html {
 font-family: sans-serif;
 line-height: 1.5;
 color: #333;
}

body {
 margin: 0 auto;
 max-width: 500px;
}

label,
input {
 display: block;
 margin: 5px 0;
}

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

Настройка среды экспресс-сервера

Мы создали все файлы для внешнего интерфейса нашего приложения, но в настоящее время у нас нет настроенного сервера или какого-либо способа их просмотра. Мы настроим Node-сервер с веб-фреймворком Express.

В корневом каталоге проекта создайте файл + server.js +. Вверху загрузите наши четыре зависимости с помощью + require () +. Мы направим наше приложение через + app + экземпляр + express +.

server.js

// Load dependencies
const aws = require('aws-sdk');
const express = require('express');
const multer = require('multer');
const multerS3 = require('multer-s3');

const app = express();

Наш внешний интерфейс находится в каталоге + public +, поэтому настройте эту конфигурацию под зависимостями.

server.js

...

// Views in public directory
app.use(express.static('public'));

Мы направим + index.html +, + success.html + и + error.html + относительно корня сервера.

server.js

...

// Main, error and success views
app.get('/', function (request, response) {
 response.sendFile(__dirname + '/public/index.html');
});

app.get("/success", function (request, response) {
 response.sendFile(__dirname + '/public/success.html');
});

app.get("/error", function (request, response) {
 response.sendFile(__dirname + '/public/error.html');
});

Наконец, мы сообщим серверу, какой порт прослушивать. В этом примере используется + 3001 +, но вы можете установить его на любой доступный порт.

server.js

...

app.listen(3001, function () {
 console.log('Server listening on port 3001.');
});

Сохраните + server.js + и запустите сервер. Вы можете сделать это, запустив + node server.js или` + npm start + , ярлык, который мы установили в + package.json`.

npm start
Output> node server.js

Server listening on port 3001.

Перейдите к + http: // localhost: 3001 +, и вы увидите форму загрузки, так как мы установили + index.html + в качестве корня сервера.

изображение: https: //assets.digitalocean.com/articles/eng_javascript/nodejs-spaces/upload-form.png [форма загрузки DigitalOcean Spaces Node.js]

Вы также можете перейти к + http: // localhost: 3001 / success и` + http: // localhost: 3001 / error`, чтобы обеспечить правильную маршрутизацию этих страниц.

Загрузить файл в пространство с Multer

Теперь, когда наша серверная среда запущена и работает должным образом, последний шаг - это интеграция формы с Multer и Multer S3 для загрузки файла в Spaces.

Вы можете использовать + new aws.S3 () + для подключения к клиенту Amazon S3. Для использования с DigitalOcean Spaces нам потребуется установить новую конечную точку, чтобы обеспечить ее загрузку в правильное местоположение. На момент написания + nyc3 + - единственная область, доступная для пробелов.

В + server.js + прокрутите назад до самого верха и вставьте следующий код ниже объявлений констант.

server.js

...
const app = express();

// Set S3 endpoint to DigitalOcean Spaces
const spacesEndpoint = new aws.Endpoint('nyc3.digitaloceanspaces.com');
const s3 = new aws.S3({
 endpoint: spacesEndpoint
});

Используя пример из документации multer-s3, мы создадим функцию + upload +, установив для свойства + bucket + уникальное имя пространства. Установка + acl в` + public-read i` обеспечит доступ к вашему файлу; если оставить это поле пустым, по умолчанию будет установлено значение private, что сделает файлы недоступными из Интернета.

server.js

...

// Change bucket property to your Space name
const upload = multer({
 storage: multerS3({
   s3: s3,
   bucket: '',
   acl: 'public-read',
   key: function (request, file, cb) {
     console.log(file);
     cb(null, file.originalname);
   }
 })
}).array('upload', 1);

Функция + upload + завершена, и наш последний шаг - подключить форму загрузки с кодом для отправки файла и соответственно направить пользователя. Прокрутите вниз до + server.js + и вставьте этот код прямо над методом + app.listen () + в конце файла.

server.js

...
app.post('/upload', function (request, response, next) {
 upload(request, response, function (error) {
   if (error) {
     console.log(error);
     return response.redirect("/error");
   }
   console.log('File uploaded successfully.');
   response.redirect("/success");
 });
});

Когда пользователь нажимает кнопку «Отправить», запрос POST отправляется в «+ / upload». Узел прослушивает этот POST и вызывает функцию + upload () +. Если обнаружена ошибка, условный оператор перенаправит пользователя на страницу + / error. Если он прошел успешно, пользователь будет перенаправлен на страницу + / success +, и файл будет загружен в вашу область.

Вот весь код для + server.js.

server.js

// Load dependencies
const aws = require('aws-sdk');
const express = require('express');
const multer = require('multer');
const multerS3 = require('multer-s3');

const app = express();

// Set S3 endpoint to DigitalOcean Spaces
const spacesEndpoint = new aws.Endpoint('nyc3.digitaloceanspaces.com');
const s3 = new aws.S3({
 endpoint: spacesEndpoint
});

// Change bucket property to your Space name
const upload = multer({
 storage: multerS3({
   s3: s3,
   bucket: '',
   acl: 'public-read',
   key: function (request, file, cb) {
     console.log(file);
     cb(null, file.originalname);
   }
 })
}).array('upload', 1);

// Views in public directory
app.use(express.static('public'));

// Main, error and success views
app.get('/', function (request, response) {
 response.sendFile(__dirname + '/public/index.html');
});

app.get("/success", function (request, response) {
 response.sendFile(__dirname + '/public/success.html');
});

app.get("/error", function (request, response) {
 response.sendFile(__dirname + '/public/error.html');
});

app.post('/upload', function (request, response, next) {
 upload(request, response, function (error) {
   if (error) {
     console.log(error);
     return response.redirect("/error");
   }
   console.log('File uploaded successfully.');
   response.redirect("/success");
 });
});

app.listen(3001, function () {
 console.log('Server listening on port 3001.');
});

Чтобы остановить Node-сервер, введите + CONTROL + + + C + в командной строке и перезапустите его, чтобы убедиться, что новые изменения вступили в силу.

npm start

Перейдите в корень проекта, выберите файл и отправьте форму. Если все было настроено правильно, вы будете перенаправлены на страницу успеха, и на вашем DigitalOcean Space появится публичный файл.

изображение: https: //assets.digitalocean.com/articles/eng_javascript/nodejs-spaces/nodejs-spaces-success.png [страница подтверждения успеха после загрузки]

Предполагая, что загруженный вами файл был + test.txt +, URL-адрес файла будет + https: //. Nyc3.digitaloceanspaces.com / test.txt +.

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

Заключение

Поздравляем, вы создали приложение Node.js and Express для загрузки статических ресурсов в хранилище объектов!

Вы можете поиграть с кодом этого приложения узла DigitalOcean Spaces по адресу remixing проекта здесь.

Дополнительные меры предосторожности, такие как аутентификация, должны быть предприняты, чтобы запустить приложение такого типа в производство, но это хорошая отправная точка для того, чтобы ваше веб-приложение работало с DigitalOcean Spaces. Для получения дополнительной информации о хранении объектов читайте An Введение в пространства DigitalOcean.

Related