Sử dụng pre-signed URLs để tải lên file lên AWS S3

Mục lục

• Giới thiệu
• Cách thức hoạt động của pre-signed URLs
• Chuẩn bị
• Tạo bucket S3
• Cấp phép quyền truy cập tới bucket
• Lấy thông tin đăng nhập trên AWS
• Tạo API route để lấy pre-signed URLs
• Xây dựng giao diện người dùng
• Xử lý upload file lên S3
• Kiểm tra kết quả

Giới thiệu về pre-signed URLs cho việc tải lên file lên S3

Trong bài viết này, chúng ta sẽ tìm hiểu về cách sử dụng pre-signed URLs để tải lên hình ảnh và video lên S3 từ ứng dụng Next.js hoặc trpc của chúng ta. Pre-signed URLs cho phép chúng ta tạo ra một URL được ký để tải (put) hoặc lấy (get) một đối tượng từ bucket S3 trong một khoảng thời gian nhất định. Điều này cho phép chúng ta duy trì việc quản lý quyền truy cập vào bucket S3 dễ dàng mà không cần chia sẻ thông tin đăng nhập AWS giữa các ứng dụng.

Cách thức hoạt động của pre-signed URLs

• Ứng dụng gửi yêu cầu server-side để lấy pre-signed URL cho việc tải lên (put) file lên S3.
• Server-side ứng dụng tạo pre-signed URL và trả về cho ứng dụng.
• Ứng dụng gửi yêu cầu client-side để tải lên file lên S3 sử dụng pre-signed URL.
• Ứng dụng client-side sử dụng pre-signed URL để gửi yêu cầu tải lên file lên S3.
• S3 nhận yêu cầu tải lên file từ pre-signed URL và lưu trữ file trong bucket S3.

Chuẩn bị

Trước khi bắt đầu, chúng ta cần chuẩn bị một số thông tin, bao gồm:

• Access key và secret key của tài khoản AWS của chúng ta.
• Tên bucket S3 mà chúng ta muốn sử dụng.

Tạo bucket S3

Đầu tiên, chúng ta cần tạo một bucket S3 trên AWS. Điều này sẽ là nơi chúng ta lưu trữ các file hình ảnh và video.

1. Đăng nhập vào AWS và chọn dịch vụ S3.
2. Nhấp vào "Create bucket" và nhập tên cho bucket của bạn.
3. Chọn khu vực (region) cho bucket của bạn.
4. Cấu hình quyền truy cập cho bucket theo cách bạn muốn.

Cấp phép quyền truy cập tới bucket

Chúng ta cần thiết lập cấu hình quyền truy cập CORS (cross-origin resource sharing) để cho phép các yêu cầu từ client-side có thể gửi tới bucket S3 của chúng ta.

1. Vào phần quản lý Permissions của bucket S3.
2. Chọn "Bucket Policy" và chỉnh sửa nó.
3. Thêm các thiết lập CORS vào policy.

Lấy thông tin đăng nhập trên AWS

Để sử dụng AWS SDK, chúng ta cần lấy các thông tin đăng nhập như access key, secret key và region của tài khoản AWS của chúng ta.

1. Đăng nhập vào tài khoản AWS của bạn.
2. Vào phần "Security credentials" trong tài khoản của bạn.
3. Tạo một access key mới và sao chép access key ID và secret access key xuống.

Tạo API route để lấy pre-signed URLs

Chúng ta cần tạo một API route để lấy pre-signed URLs cho việc tải lên file lên S3.

import AWS from 'aws-sdk';
import { v4 as uuid } from 'uuid';
import axios from 'axios';

const s3 = new AWS.S3({
  apiVersion: '2006-03-01',
  accessKeyId: process.env.ACCESS_KEY,
  secretAccessKey: process.env.SECRET_KEY,
  region: process.env.REGION,
  signatureVersion: 'v4',
});

export default async (req, res) => {
  if (req.method === 'GET') {
    const key = `${uuid()}.jpg`;
    const params = {
      Bucket: process.env.BUCKET_NAME,
      Key: key,
      Expires: 60,
      ContentType: 'image/jpeg',
    };

    const uploadURL = await s3.getSignedUrlPromise('putObject', params);

    res.status(200).json({ uploadURL, key });
  } else {
    res.status(400).json({ message: 'Invalid request method.' });
  }
};

Xây dựng giao diện người dùng

Chúng ta cần xây dựng giao diện người dùng cho việc tải lên file lên S3.

import { useState } from 'react';
import axios from 'axios';

export default function Upload() {
  const [file, setFile] = useState(null);

  const handleSubmit = async (event) => {
    event.preventDefault();

    if (!file) {
      return;
    }

    const formData = new FormData();
    formData.append('file', file);

    const { data } = await axios.get('/api/media');
    await axios.put(data.uploadURL, formData, {
      headers: { 'Content-Type': file.type },
    });

    console.log('File uploaded successfully.');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" accept="image/jpeg,image/png" name="file" onChange={(e) => setFile(e.target.files[0])} />
      <button type="submit">Upload</button>
    </form>
  );
}

Xử lý upload file lên S3

Chúng ta cần xử lý việc tải lên file lên S3 sau khi đã nhận được pre-signed URL.

const uploadToS3 = async (event) => {
  const { key } = await uploadToS3(event);

  return key;
};

Kiểm tra kết quả

Sau khi xây dựng giao diện người dùng và xử lý việc tải lên file lên S3, chúng ta có thể thử nghiệm ứng dụng.

• Chọn file hình ảnh hoặc video từ giao diện người dùng.
• Gửi yêu cầu tải lên file lên S3.
• Kiểm tra kết quả trên bucket S3 của chúng ta.

💡 Điều này làm cho tải lên file lên S3 trở nên dễ dàng và bảo mật hơn. Bạn có thể sử dụng pre-signed URLs để tải lên nhiều file hoặc áp dụng cho các tác vụ tải lên tùy chỉnh. Hãy thử nghiệm và tùy chỉnh nó cho ứng dụng của bạn.