NodeJS tải tập tin lên AWS

Thứ Ba, 25/02/2020

Tram Ho

Introdution

Bài này mình sẽ viết về cách upload files lên S3 của Amazon.
S3 là dịch vụ lưu trữ file của AWS. Trước khi sử dụng dịch vụ ta cần tạo Bucket( nơi sẽ chứa các file chúng ta upload lên).
FYI: Khi tạo tài khoản AWS một số dịch vụ sẽ free trong 12 tháng: EC2, S3, RDS, CloudFront ( nhớ đọc kỹ free như thế nào ví S3 sẽ free 5GB, 20k GET request và 2k PUT request – chỉ thế thôi, hơn tính phí đấy nên cẩn thận). Tuy nhiên nhiên một số dịch vụ khác lại luôn luôn miễn phí ( kể cả sau 12 tháng – nên tha hồ nghịch): DynamoDB, Lamda..

Before start

Trước khi bắt đầu ta cần có 1 tài khoản AWS ( nếu bạn chưa có thì tạo nha).
Tạo mới (nếu bạn chưa có) một AWS Access Key.

Create Bucket

Sau khi có tài khoản và Access Key chúng ta cần tạo Bucket để test upload file.
Có nhiều cách để có thể tạo Bucket:
- Bạn có thể tạo trực tiếp trên trang AWS
- Hoặc có thể tạo bằng AWS cli với lệnh: aws s3 mb s3://created-by-cli ở đây created-by-cli là tên của Bucket bạn muốn đặt. ( mb tắt make bucket).
- Tạo bằng API
Khi tạo Bucket còn rất nhiều thiết lập (tạo thử đi sẽ thấy ) như region, public, CORS.. theo mình cách 1 và 2 (tạo trên trang AWS, aws cli) chỉ nên thực hiện test cho biết. Còn lại nên tạo bằng API như vậy các thông số thiết lập sẽ được lưu lại không cần phải nhớ.
Trước khi bắt đầu chúng ta set up project một chút.
Tạo folder, khởi tạp project, khởi tạo git với các lệnh
mkdir nodejs-aws-s3 cd nodejs-aws-s3 npm init -y git init
1
2
3
4
5
mkdir nodejs-aws-s3
cd nodejs-aws-s3
npm init -y
git init

Tạo file config.json với nội dung:

<span class="token punctuation">{</span>
  <span class="token property">"BUCKET"</span><span class="token operator">:</span> <span class="token string">"created-by-api"</span><span class="token punctuation">,</span>
  <span class="token property">"REGION"</span><span class="token operator">:</span> <span class="token string">"ap-southeast-1"</span><span class="token punctuation">,</span>
  <span class="token property">"AWS_ACCESS_KEY"</span><span class="token operator">:</span> <span class="token string">"NHAP_ACCESS_KEY_CUA_BAN_VAO_DAY"</span><span class="token punctuation">,</span>
  <span class="token property">"AWS_SECRET_KEY"</span><span class="token operator">:</span> <span class="token string">"NHAP_SECRET_CUA_BAN_VAO_DAY"</span>
<span class="token punctuation">}</span>

{

"BUCKET": "created-by-api",

"REGION": "ap-southeast-1",

"AWS_ACCESS_KEY": "NHAP_ACCESS_KEY_CUA_BAN_VAO_DAY",

"AWS_SECRET_KEY": "NHAP_SECRET_CUA_BAN_VAO_DAY"

}

Tạo một file makeBucket.js (cho trùng với lệnh tạo bucket trong aws-cli)

<span class="token keyword">const</span> <span class="token constant">AWS</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"aws-sdk"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./config.json"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token constant">REGION</span> <span class="token operator">=</span> config<span class="token punctuation">.</span><span class="token constant">REGION</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token constant">ACCESS_KEY</span> <span class="token operator">=</span> config<span class="token punctuation">.</span><span class="token constant">AWS_ACCESS_KEY</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token constant">SECRET_KEY</span> <span class="token operator">=</span> config<span class="token punctuation">.</span><span class="token constant">AWS_SECRET_KEY</span><span class="token punctuation">;</span>

<span class="token constant">AWS</span><span class="token punctuation">.</span>config<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  accessKeyId<span class="token punctuation">:</span> <span class="token constant">ACCESS_KEY</span><span class="token punctuation">,</span>
  secretAccessKey<span class="token punctuation">:</span> <span class="token constant">SECRET_KEY</span><span class="token punctuation">,</span>
  region<span class="token punctuation">:</span> <span class="token constant">REGION</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> s3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AWS<span class="token punctuation">.</span>S3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> params <span class="token operator">=</span> <span class="token punctuation">{</span>
  Bucket<span class="token punctuation">:</span> config<span class="token punctuation">.</span><span class="token constant">BUCKET</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">editBucketCORS</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  s3<span class="token punctuation">.</span><span class="token function">putBucketCors</span><span class="token punctuation">(</span>
    <span class="token punctuation">{</span>
      Bucket<span class="token punctuation">:</span> config<span class="token punctuation">.</span><span class="token constant">BUCKET</span><span class="token punctuation">,</span>
      CORSConfiguration<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        CORSRules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            AllowedHeaders<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"*"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            AllowedMethods<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"PUT"</span><span class="token punctuation">,</span> <span class="token string">"POST"</span><span class="token punctuation">,</span> <span class="token string">"DELETE"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            AllowedOrigins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"*"</span><span class="token punctuation">]</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            AllowedMethods<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"GET"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            AllowedOrigins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"*"</span><span class="token punctuation">]</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    err <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> err<span class="token punctuation">.</span>stack<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">else</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`Edit Bucket CORS succeed!`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>

s3<span class="token punctuation">.</span><span class="token function">createBucket</span><span class="token punctuation">(</span>params<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> data<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> err<span class="token punctuation">.</span>stack<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">else</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">editBucketCORS</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

const AWS = require("aws-sdk");

const config = require("./config.json");

const REGION = config.REGION;

const ACCESS_KEY = config.AWS_ACCESS_KEY;

const SECRET_KEY = config.AWS_SECRET_KEY;

AWS.config.update({

accessKeyId: ACCESS_KEY,

secretAccessKey: SECRET_KEY,

region: REGION

});

var s3 = new AWS.S3();

const params = {

Bucket: config.BUCKET

};

const editBucketCORS = () =>

s3.putBucketCors(

{

Bucket: config.BUCKET,

CORSConfiguration: {

CORSRules: [

{

AllowedHeaders: ["*"],

AllowedMethods: ["PUT", "POST", "DELETE"],

AllowedOrigins: ["*"]

},

{

AllowedMethods: ["GET"],

AllowedOrigins: ["*"]

}

]

}

},

err => {

if (err) console.log(err, err.stack);

else console.log(`Edit Bucket CORS succeed!`);

}

);

s3.createBucket(params, (err, data) => {

else {

console.log(data);

editBucketCORS();

}

});

Cấu trúc thư mục hiện tại đang ntn:
. ├── config.json ├── makeBucket.js ├── node_modules ├── package.json └── package-lock.json
1
2
3
4
5
6
7
8
.
├── config.json
├── makeBucket.js
├── node_modules
├── package.json
└── package-lock.json
File makeBucket.js sẽ lấy cấu hình trong config.json và tạo mới một Bucket với tên created-by-api. Sau đó chỉnh lại cài đặt CORS của bucket với hàm editBucketCORS. Mình đã thử setup ngay lúc tạo bucket nhưng ko được. Search thử doc thì chỉ có 1 pha edit sau khi đã tạo bucket tại đây thôi .
Cài đặt gói phụ thuộc npm i aws-sdk, cấu hình key chính xác, ta chạy file với: node makeBucket.js sẽ có output như sau là tạo thành công:
node makeBucket.js { Location: 'http://created-by-api.s3.amazonaws.com/' } Edit Bucket CORS succeed!
1
2
3
4
node makeBucket.js
{ Location: 'http://created-by-api.s3.amazonaws.com/' }
Edit Bucket CORS succeed!
Ta cũng có thể kiểm tra bằng giao diện web hoặc cli, bằng cli sẽ có output dạng như thế này:
$ aws s3 ls 2020-02-18 23:05:59 craft-created 2020-02-22 22:28:01 created-by-api 2020-02-22 10:49:55 created-by-cli
1
2
3
4
5
$ aws s3 ls
2020-02-18 23:05:59 craft-created
2020-02-22 22:28:01 created-by-api
2020-02-22 10:49:55 created-by-cli
Chỉ chạy 1 file makeBucket.js thôi sao phải cấu hình project, config các thứ làm gì? Hãy làm quen với cách quản lý các file cấu hình liên quan tới Key của các dịch vụ như AWS hay Google… một cách là bạn lưu vào file config và add file đó vào trong .gitignore. ( Nếu triển khai trên cloud thì các file cấu hình này nên được lưu vào vùng có mã hóa và hạn chế quyền truy xuất như vậy sẽ an toàn hơn). Sau đó bạn có thể yên tâm đẩy project của mình lên github hoặc share link repo cho người khác.
File .gitignore ntn:
config.json node_modules/
1
2
3
config.json
node_modules/

Upload file

Bucket đã có ta sẽ test upload file lên S3
Tùy thuộc dịch vụ của mình mà chúng ta có các cách upload file lên S3 khác nhau.

Direct upload

Bài tán thứ nhất: giả sử server của bạn tự tạo invoice - hóa đơn khi đó chúng ta cần đẩy trực tiếp file lên S3 và trả về link cho khách hàng xem hóa đơn.

Để server trực tiếp đẩy file lên S3. Chúng ta tạo file directUpload.js với nội dung như sau:

<span class="token keyword">const</span> <span class="token constant">AWS</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"aws-sdk"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"fs"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./config.json"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token constant">BUCKET</span> <span class="token operator">=</span> config<span class="token punctuation">.</span><span class="token constant">BUCKET</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token constant">REGION</span> <span class="token operator">=</span> config<span class="token punctuation">.</span><span class="token constant">REGION</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token constant">ACCESS_KEY</span> <span class="token operator">=</span> config<span class="token punctuation">.</span><span class="token constant">AWS_ACCESS_KEY</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token constant">SECRET_KEY</span> <span class="token operator">=</span> config<span class="token punctuation">.</span><span class="token constant">AWS_SECRET_KEY</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> localImage <span class="token operator">=</span> <span class="token string">"./cat.jpeg"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> imageRemoteName <span class="token operator">=</span> <span class="token template-string"><span class="token string">`directUpload_catImage_</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.jpeg`</span></span><span class="token punctuation">;</span>

<span class="token constant">AWS</span><span class="token punctuation">.</span>config<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  accessKeyId<span class="token punctuation">:</span> <span class="token constant">ACCESS_KEY</span><span class="token punctuation">,</span>
  secretAccessKey<span class="token punctuation">:</span> <span class="token constant">SECRET_KEY</span><span class="token punctuation">,</span>
  region<span class="token punctuation">:</span> <span class="token constant">REGION</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> s3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">AWS<span class="token punctuation">.</span>S3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

s3<span class="token punctuation">.</span><span class="token function">putObject</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  Bucket<span class="token punctuation">:</span> <span class="token constant">BUCKET</span><span class="token punctuation">,</span>
  Body<span class="token punctuation">:</span> fs<span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span>localImage<span class="token punctuation">)</span><span class="token punctuation">,</span>
  Key<span class="token punctuation">:</span> imageRemoteName
<span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">promise</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>res <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`Upload succeeded - `</span></span><span class="token punctuation">,</span> res<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>err <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Upload failed:"</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

const fs = require("fs");

const BUCKET = config.BUCKET;

const localImage = "./cat.jpeg";

const imageRemoteName = `directUpload_catImage_${new Date().getTime()}.jpeg`;

accessKeyId: ACCESS_KEY,

secretAccessKey: SECRET_KEY,

region: REGION

});

s3.putObject({

Bucket: BUCKET,

Body: fs.readFileSync(localImage),

Key: imageRemoteName

})

.promise()

.then(res => {

})

.catch(err => {

console.log("Upload failed:", err);

});

Thư mục lúc này thêm 2 file: directUpload.js và cat.jpg
. ├── cat.jpg ├── config.json ├── directUpload.js ├── makeBucket.js ├── node_modules ├── package.json └── package-lock.json 1 directory, 6 files
1
2
3
4
5
6
7
8
9
10
11
.
├── cat.jpg
├── config.json
├── directUpload.js
├── makeBucket.js
├── node_modules
├── package.json
└── package-lock.json

1 directory, 6 files
Chạy thử chương trình, ok upload ngon lành:
node directUpload.js Upload succeeded - { ETag: '"550cf35812c2447027f8e4d547a78adb"' }
1
2
3
node directUpload.js
Upload succeeded - { ETag: '"550cf35812c2447027f8e4d547a78adb"' }

Upload with signedURL

Bài toán thứ 2: Ứng dụng của bạn cho phép người dùng tải file trực tiếp lên S3. Lúc này không thể để người dùng tải lên server rồi server lại tải lên S3 được. Thay vì thế Client sẽ call server để lấy 1 signedURL và client dùng nó để tải file lên S3.

Đầu tiên ở phía server chúng ta tạo 1 file: uploadWithSignedURL.js với nội dung như sau:

<span class="token keyword">const</span> cors <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"cors"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> aws <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"aws-sdk"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"express"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> configAWS <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./config"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token function">cors</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">"/sign-s3"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>req<span class="token punctuation">,</span> res<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> s3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">aws<span class="token punctuation">.</span>S3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> fileName <span class="token operator">=</span> req<span class="token punctuation">.</span>query<span class="token punctuation">[</span><span class="token string">"file-name"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> fileType <span class="token operator">=</span> req<span class="token punctuation">.</span>query<span class="token punctuation">[</span><span class="token string">"file-type"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> s3Params <span class="token operator">=</span> <span class="token punctuation">{</span>
    Bucket<span class="token punctuation">:</span> configAWS<span class="token punctuation">.</span><span class="token constant">BUCKET</span><span class="token punctuation">,</span>
    Key<span class="token punctuation">:</span> fileName<span class="token punctuation">,</span>
    Expires<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
    ContentType<span class="token punctuation">:</span> fileType<span class="token punctuation">,</span>
    <span class="token constant">ACL</span><span class="token punctuation">:</span> <span class="token string">"public-read"</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  s3<span class="token punctuation">.</span><span class="token function">getSignedUrl</span><span class="token punctuation">(</span><span class="token string">"putObject"</span><span class="token punctuation">,</span> s3Params<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> data<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`getSignedUrl error: `</span></span><span class="token punctuation">,</span> err<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">const</span> returnData <span class="token operator">=</span> <span class="token punctuation">{</span>
      signedRequest<span class="token punctuation">:</span> data<span class="token punctuation">,</span>
      url<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`https://</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>configAWS<span class="token punctuation">.</span><span class="token constant">BUCKET</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.s3.amazonaws.com/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>fileName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    res<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>returnData<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"come here babe..."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

const cors = require("cors");

const aws = require("aws-sdk");

const express = require("express");

const configAWS = require("./config");

const app = express();

app.use(cors());

app.get("/sign-s3", (req, res) => {

const s3 = new aws.S3();

const fileName = req.query["file-name"];

const fileType = req.query["file-type"];

const s3Params = {

Bucket: configAWS.BUCKET,

Key: fileName,

Expires: 60,

ContentType: fileType,

ACL: "public-read"

};

s3.getSignedUrl("putObject", s3Params, (err, data) => {

if (err) {

return res.end();

}

const returnData = {

signedRequest: data,

url: `https://${configAWS.BUCKET}.s3.amazonaws.com/${fileName}`

};

res.write(JSON.stringify(returnData));

res.end();

});

app.listen(3000, () => {

console.log("come here babe...");

});

Đoạn server trên làm gì ? Khởi tạo một api nhận request với route sign-s3 và các query: file-name, file-type. Sau đó request signedURL (với s3.getSignedUrl) và trả về cho client. Ok thế là đủ rồi, phần còn lại là của client.

Ở đây mình sẽ tạo một file ugly-client index.html với nội dung như dưới:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>file-input<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>status<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Please select a file<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript">
      <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"file-input"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onchange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> files <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"file-input"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>files<span class="token punctuation">;</span>
          <span class="token keyword">const</span> file <span class="token operator">=</span> files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span>file <span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"No file selected."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
          <span class="token function">getSignedRequest</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> <span class="token function-variable function">getSignedRequest</span> <span class="token operator">=</span> file <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>
          <span class="token string">"GET"</span><span class="token punctuation">,</span>
          <span class="token template-string"><span class="token string">`http://localhost:3000/sign-s3?file-name=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>file<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;file-type=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>file<span class="token punctuation">.</span>type<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">===</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
              <span class="token function">uploadFile</span><span class="token punctuation">(</span>file<span class="token punctuation">,</span> response<span class="token punctuation">.</span>signedRequest<span class="token punctuation">,</span> response<span class="token punctuation">.</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
              <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Could not get signed URL."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> <span class="token function-variable function">uploadFile</span> <span class="token operator">=</span> <span class="token punctuation">(</span>file<span class="token punctuation">,</span> signedRequest<span class="token punctuation">,</span> url<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"PUT"</span><span class="token punctuation">,</span> signedRequest<span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">===</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`Upload succeed to: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
              <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Could not upload file."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>

<html>

<body>

<p id="status">Please select a file</p>

(() => {

document.getElementById("file-input").onchange = () => {

const files = document.getElementById("file-input").files;

const file = files[0];

if (file == null) {

return alert("No file selected.");

}

getSignedRequest(file);

};

})();

const getSignedRequest = file => {

const xhr = new XMLHttpRequest();

xhr.open(

"GET",

`http://localhost:3000/sign-s3?file-name=${file.name}&file-type=${file.type}`

);

xhr.onreadystatechange = () => {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

const response = JSON.parse(xhr.responseText);

uploadFile(file, response.signedRequest, response.url);

} else {

alert("Could not get signed URL.");

}

};

xhr.send();

};

const uploadFile = (file, signedRequest, url) => {

xhr.open("PUT", signedRequest);

console.log(`Upload succeed to: ${url}`);

} else {

alert("Could not upload file.");

}

};

xhr.send(file);

};

</script>

</body>

</html>

Đến đây folder có thêm 2 file mới rồi nha:

.
├── cat.jpg
├── config.json
├── directUpload.js
├── index.html
├── makeBucket.js
├── node_modules
├── package.json
├── package-lock.json
└── uploadWithSignedURL.js

1 directory, 8 files

├── cat.jpg

├── config.json

├── directUpload.js

├── index.html

├── makeBucket.js

├── node_modules

├── package.json

├── package-lock.json

└── uploadWithSignedURL.js

1 directory, 8 files

Nói qua một chút. File chỉ có 1 thẻ input để người dùng chọn file. Script sẽ lắng nghe onchange để gửi request tới server bằng getSignedRequest. Ở đây mình đang fix cứng URL local như bạn thấy: http://localhost:3000/sign-s3?file-name=${file.name}&file-type=${file.type}. Sau khi nhận được signedURL do server trả về client sẽ upload file lên S3 bằng: uploadFile.
Ok! Chạy thử luôn đi. Đầu tiên npm i express cors. Chạy server trước:
node uploadWithSignedURL.js come here babe...
1
2
3
4
node uploadWithSignedURL.js
come here babe...
Sau đó mở file index.html bằng chrome và chọn file cat.jpg chờ một lát kiểm tra trên cửa sổ console của browser thấy dạng như dưới là đã upload thành công(nếu thất bại bước nào sẽ bật popup):
Upload succeed to: https://created-by-api.s3.amazonaws.com/cat.jpg
1
2
Upload succeed to: https://created-by-api.s3.amazonaws.com/cat.jpg
Chắc cú bạn có thể kiểm tra lại trên trang của AWS, hoặc nhanh hơn với aws-cli:
$ aws s3 ls s3://created-by-api 2020-02-24 23:24:19 58836 cat.jpg 2020-02-24 23:21:51 58836 directUpload_lovelyCat_1582561310482.jpg
1
2
3
4
$ aws s3 ls s3://created-by-api
2020-02-24 23:24:19 58836 cat.jpg
2020-02-24 23:21:51 58836 directUpload_lovelyCat_1582561310482.jpg
Như bạn thấy có 2 file 1 file directUpload từ server nodejs và 1 file upload từ phía client với signedURL.
Cảm ơn bạn đã theo dõi tới đây! Full code trong bài này có tại đây nhớ đọc qua ReadMe.md một chút nếu có chạy!
Happy using AWS service!

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

NodeJS tải tập tin lên AWS

Introdution

Before start

Create Bucket

Upload file

Direct upload

Upload with signedURL

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript