Cách tải tệp lên lưu trữ đối tượng bằng Node.js

Lưu trữ đối tượng là một phương pháp phổ biến và có thể mở rộng để lưu trữ và cung cấp các tài sản tĩnh như âm thanh, hình ảnh, văn bản, PDF và các loại dữ liệu phi cấu trúc khác. Các nhà cung cấp cloud cung cấp lưu trữ đối tượng ngoài lưu trữ local hoặc khối truyền thống, được sử dụng để lưu trữ database và file ứng dụng động. ĐọcLưu trữ đối tượng so với Lưu trữ khối để tìm hiểu về các trường hợp sử dụng và sự khác biệt giữa hai loại.

---

Spaces là một dịch vụ lưu trữ đối tượng đơn giản do DigitalOcean cung cấp. Ngoài việc có thể đăng nhập và tải lên, quản lý và xóa các file được lưu trữ thông qua console , bạn cũng có thể truy cập DigitalOcean của bạn thông qua dòng lệnh và API Spaces.

Trong hướng dẫn này, ta sẽ tạo ứng dụng Node.js cho phép user tải file lên DigitalOcean của họ bằng cách gửi biểu mẫu trên giao diện user của trang web.

Yêu cầu

Để làm theo hướng dẫn này, bạn cần :

• DigitalOcean , cùng với khóa truy cập và khóa truy cập bí mật vào account của bạn. Đọc Cách tạo DigitalOcean và Khóa API để cài đặt và chạy với account DigitalOcean, tạo Không gian và cài đặt khóa API và bí mật.
• Node.js và npm được cài đặt trên máy tính của bạn. Bạn có thể truy cập Download Node.js để cài đặt version chính xác cho hệ điều hành của bạn .

Đến đây bạn sẽ có account DigitalOcean, Space có khóa truy cập, Node.js và npm được cài đặt trên máy tính của bạn.

Thêm khóa truy cập vào file thông tin xác thực

DigitalOcean Spaces tương thích với API Amazon Simple Storage Service (S3) và ta sẽ sử dụng AWS SDK cho JavaScript trong Node.js để kết nối với Không gian mà ta đã tạo.

Bước đầu tiên là tạo file thông tin xác thực , để đặt khóa truy cập và khóa truy cập bí mật mà bạn có được khi tạo DigitalOcean của bạn . Tệp sẽ được đặt tại ~/.aws/credentials trên Mac và Linux hoặc C:\Users\USERNAME\.aws\credentials trên Windows. Nếu trước đây bạn đã lưu thông tin đăng nhập AWS, bạn có thể đọc về việc lưu giữ nhiều bộ thông tin xác thực để được hướng dẫn thêm.

Mở dấu nhắc lệnh của bạn, đảm bảo bạn đang ở trong folder User của bạn , có quyền truy cập vào user sudo quản trị và tạo folder .aws với file credentials bên trong.

sudo mkdir .aws && touch .aws/credentials 

Mở file và dán mã sau vào bên trong, thay thế your_access_key và your_secret_key bằng các khóa tương ứng của bạn.

[default] aws_access_key_id=your_access_key aws_secret_access_key=your_secret_key 

Như vậy, quyền truy cập của bạn vào Spaces thông qua AWS SDK sẽ được xác thực và ta có thể chuyển sang tạo ứng dụng.

Cài đặt Node.js Dependencies

Để bắt đầu, hãy tạo một folder mà bạn muốn đặt ứng dụng Node.js của bạn và chuyển đến folder . Đối với phần trình diễn này, ta sẽ tạo dự án của bạn trong spaces-node-app trong folder sites .

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

Tạo một file package.json mới cho dự án của bạn. Dán mã bên dưới vào file .

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

Đây là một file package.json cơ bản liệt kê tên, số version và giấy phép của ứng dụng của ta . Trường scripts sẽ cho phép ta chạy server Node.js bằng lệnh npm start thay vì node server.js .

Ta sẽ cài đặt tất cả các phụ thuộc của bạn bằng lệnh npm install , theo sau là tên của bốn phụ thuộc trong dự án của ta .

npm install aws-sdk express multer multer-s3 

Sau khi chạy lệnh này, file package.json sẽ được cập nhật. Những phụ thuộc này sẽ giúp ta kết nối với API DigitalOcean Spaces, tạo web server và xử lý tải lên file .

• aws-sdk - AWS SDK cho JavaScript sẽ cho phép ta truy cập S3 thông qua API JavaScript.
• express - Express là một khung công tác web cho phép ta cài đặt một server một cách nhanh chóng và hiệu quả.
• multer - Multer là phần mềm trung gian sẽ xử lý tải lên file .
• multer-s3 - Multer S3 mở rộng tải file lên bộ lưu trữ đối tượng S3 và trong trường hợp của ta là DigitalOcean Spaces.

Bây giờ ta đã cài đặt vị trí dự án và các phụ thuộc, ta có thể cài đặt các chế độ xem server và giao diện user .

Lưu ý: npm install lưu các phần phụ thuộc vào file package.json theo mặc định trong các version Node hiện tại. Nếu bạn đang chạy version Node cũ hơn, bạn sẽ phải thêm cờ --save vào lệnh npm install của bạn đảm bảo rằng package.json được cập nhật.

Tạo Giao diện User của Ứng dụng

Đầu tiên, hãy tạo file cho các chế độ xem công khai của ứng dụng của ta . Đây là những gì user sẽ thấy trên giao diện user . Tạo một folder công khai trong dự án của bạn, với index.html , success.html và error.html . Cả ba file này sẽ có khung HTML bên dưới, với các nội dung khác nhau trong phần body . Viết mã sau vào mỗi file .

<!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> 

Viết một thông báo lỗi trong body của error.html .

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

Viết một tin nhắn thành công trong body của success.html .

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

Trong index.html , ta sẽ tạo một form HTML với multipart/form-data . Nó sẽ bao gồm một input tải lên file đơn giản và một nút gửi.

...  <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>  ... 

Cuối cùng, hãy tạo style.css và thêm CSS vừa đủ để làm cho ứng dụng dễ đọc.

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; } 

Với ba file này, ta có một biểu mẫu tải lên tạo nên trang chính của ứng dụng nhỏ của ta và ta có các trang thành công và lỗi cho user .

Cài đặt môi trường server nhanh

Ta đã tạo tất cả các file cho giao diện user của ứng dụng, nhưng ta hiện chưa cài đặt server hoặc bất kỳ cách nào để xem chúng. Ta sẽ cài đặt một server Node với khung công tác web Express.

Trong folder root của dự án, hãy tạo file server.js . Ở trên cùng, hãy tải vào bốn phần phụ thuộc của ta với require() . Ta sẽ định tuyến ứng dụng của bạn thông qua version app express .

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

Giao diện user của ta nằm trong folder public , vì vậy hãy đặt cấu hình đó bên dưới các phần phụ thuộc.

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

Ta sẽ định tuyến index.html , success.html và error.html liên quan đến folder root của server .

...  // 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'); }); 

Cuối cùng, ta sẽ cho server biết cổng nào để lắng nghe. Trong ví dụ này, 3001 được sử dụng, nhưng bạn có thể đặt nó thành bất kỳ cổng nào có sẵn.

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

Lưu server.js và khởi động server . Bạn có thể thực hiện việc này bằng cách chạy node server.js hoặc với npm start , phím tắt mà ta đặt trong package.json .

npm start 

Output
> node server.js  Server listening on port 3001. 

Điều hướng đến http://localhost:3001 , và bạn sẽ thấy biểu mẫu tải lên, vì ta đặt index.html là folder root của server .

Bạn cũng có thể chuyển đến http://localhost:3001/success và http://localhost:3001/error đảm bảo các trang đó được định tuyến đúng cách.

Tải file lên không gian bằng Multer

Bây giờ ta đã cài đặt và chạy môi trường server bình thường, bước cuối cùng là tích hợp biểu mẫu với Multer và Multer S3 để tải file lên Spaces.

Bạn có thể sử dụng new aws.S3() để kết nối với ứng dụng client Amazon S3. Để sử dụng với DigitalOcean Spaces, ta cần đặt một điểm cuối mới đảm bảo nó tải lên đúng vị trí. Tại thời điểm viết bài, nyc3 là khu vực duy nhất có sẵn cho Spaces.

Trong server.js , cuộn lên trên cùng và dán đoạn mã sau vào bên dưới các khai báo hằng số.

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

Sử dụng ví dụ từ tài liệu multer-s3 , ta sẽ tạo một hàm upload , đặt thuộc tính bucket thành tên Space duy nhất của bạn. Đặt acl thành public-read sẽ đảm bảo công chúng có thể truy cập file của ta ; để trống phần này sẽ mặc định ở chế độ riêng tư, làm cho các file không thể truy cập được từ web.

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

Chức năng upload đã hoàn tất và bước cuối cùng của ta là kết nối biểu mẫu tải lên với mã để gửi file qua và định tuyến user phù hợp. Cuộn xuống cuối server.js và dán mã này ngay trên phương thức app.listen() ở cuối file .

... 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");   }); }); 

Khi user nhấp vào gửi, một yêu cầu ĐĂNG sẽ được chuyển đến /upload . Node đang lắng nghe POST này và gọi hàm upload() . Nếu lỗi được tìm thấy, câu lệnh điều kiện sẽ chuyển hướng user đến trang /error . Nếu thành công, user sẽ được chuyển hướng đến trang /success và file sẽ được tải lên Không gian của bạn.

Đây là toàn bộ mã cho 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: 'your-space-here',     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.'); }); 

Dừng server Node bằng lệnh CONTROL + C trong dấu nhắc lệnh và khởi động lại nó đảm bảo các thay đổi mới được áp dụng.

npm start 

Điều hướng đến folder root của dự án, chọn một file và gửi biểu mẫu. Nếu mọi thứ được cài đặt đúng cách, bạn sẽ được chuyển hướng đến trang thành công và file công khai sẽ có sẵn trên DigitalOcean của bạn.

Giả sử file bạn đã tải lên là test.txt , URL của file sẽ là https:// your-space-here .nyc3.digitaloceanspaces.com/test.txt .

Các lý do phổ biến dẫn đến giao dịch không thành công là thông tin đăng nhập sai, file thông tin đăng nhập không đúng vị trí hoặc tên group không chính xác.

Kết luận

Xin chúc mừng, bạn đã cài đặt ứng dụng Node.js và Express để tải nội dung tĩnh lên bộ nhớ đối tượng!

Bạn có thể thử với mã của Ứng dụng DigitalOcean Spaces Node này bằng cách phối lại dự án tại đây .

Các biện pháp phòng ngừa bổ sung như xác thực phải được thực hiện để đưa loại ứng dụng này vào production , nhưng đây là điểm khởi đầu tốt để làm cho ứng dụng web của bạn hoạt động với DigitalOcean Spaces. Để biết thêm thông tin về lưu trữ đối tượng, hãy đọc Giới thiệu về DigitalOcean .

---

---

Các tin liên quan