[aws-s3] 연결하기

🟢 학습목표

aws-s3 와 나의 project를 연결하여 간단하게 file upload를 test 해본다.

🔵 순서

🐬 aws 로그인 후 S3 서비스에서 버킷생성

이름작성 후 region 은 이 버킷을 배포하는 지역 정도라고 생각하면 된다. 아무거나 선택후

## 객체 소유권을 활성화해준다.

모든 퍼블릭 액세스 차단을 비활성화 해준다.

🐬 버킷 정책 설정

정책을 설정하지 않으면 업로드가 된 파일을 링크로 받으려고 해도 받아지지가 않는다. -> 객체 uri denied

만들어진 버킷에 들어가 권한 tap 으로 넘어가 정책설정 편집을 한다.

아래 내용을 붙여넣는다.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicRead",
      "Effect": "Allow",
      "Principal": "*",
      "Action": [
        "s3:GetObject",
        "s3:PutObject",
        "s3:PutObjectAcl"
      ],
      "Resource": "arn:aws:s3:::testcolor99b/*"
    }
  ]
}

- version : aws iam 정책 문서의 버전

- statement : 정책 문서의 주요 부분으로, 권한을 부여하는 하나 이상의 선언문을 포함한다.
 - sid : statement 에 대한 고유 식별자 제공
 - effect : 정책 스테이트먼트에서 지정된 작업(action 에 해당하는 내용)에 대한 권한을 허용한다.
 - Principal : 권한을 부여받는 대상을 지정한다. * 은 모든 사용자를 의미한다.
 - Action : 스테이트먼트에 대한 허용 또는 거부할 aws 서비스 작업의 목록을 나타낸다.
    - s3:GetObject : 특정 객체를 가져올 수 있는 권한
    - s3:PutObject : 새 객체를 추가하거나 기존 객체를 덮어쓸 수 있는 권한
    - s3:PutObjectAcl : 객체에 대한 액세스 제어 목록을 설정할 수 있는 권한
 - Resource : 이 정책이 적용되는 resource 지정. 여기선 testcolor99b 라는 이름의 s3 버킷의 모든 객체에 적용하게 된다.

🐬 cors 설정 : 웹 app에서 다른 도메인의 리소스에 액세스 하는 것을 허용하거나 제한하는 설정

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

- AllowedHeaders : cors 요청에서 허용되는 http 헤더를 나열한다. * 은 모든 헤더를 허용한다는 것을 의미한다.

- AllowedMethods : cors 요청에서 허용되는 http 메서드. 여기서는 get, put, post, head

- AllowedOrigins : cors 요청을 보낼 수 있는 웹 페이지의 도메인을 나열. *은 모든 도메인에서 오는 요청을 허락한다는 뜻

- ExposeHeaders : cors 요청에 대한 응답에서 노출되는 헤더를 나열한다. 이 헤더들은 js에서 접근 가능하게 된다.

- MaxAgeSeconds : cors 관련 정보를 브라우저의 캐시에 저장하는 시간초단위. 3000초는 50분으로 이 기간 동안 동일한 요청이 발생하면 브라우저는 서버에게 새로운 cors 요청을 보내지 않고 캐시된 정보를 사용한다.

🟣 myproject front 에서 input 작성

🐬 formData 형태로 작성

보통 image만 툭 보내는 경우는 거의 없으므로, 여러가지 부가적인 설명, 이름, 등등을 넣는다고 가정하고 formData 로 진행하기 위해 Upload를 하는 component를 따로 test용으로 만들었다.

// UploadForm.tsx

// components/UploadForm.tsx
import React, { ChangeEvent, FormEvent, useState } from "react";
import { upload } from "@/apis";
const UploadForm: React.FC = () => {
  const [file, setFile] = useState<File | null>(null);

  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files[0]) {
      setFile(event.target.files[0]);
    }
  };

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (!file) return;

    const formData = new FormData();
    formData.append("image", file);
    for (const [key, value] of formData.entries()) {
      console.log(`${key}:`, value);
    }

    try {
      console.log(formData);
      const response = await upload(formData);
      console.log(response);
    } catch (error) {
      console.error("Error uploading image:", error);
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input type="file" accept="image/*" onChange={handleFileChange} />

        <button type="submit">Upload</button>
      </form>
      <button
        onClick={(e) => {
          console.log(file);
        }}
      >
        확인
      </button>
    </>
  );
};

export default UploadForm;

handleFileChange 함수는 input 태그로 선택한 파일이 바뀔 때마다 state를 변경해주는 역할.

handleSubmit 함수는 new FormData() 형태로 압축해서 server로 보내주는 역할을 한다.

중간에 있는 console.log key와 value는 formData 는 단순 console.log로는 빈값으로 밖에 확인할 수 없는데 이는 다른 포스팅에서 설명한다.

https://yjunvlog.tistory.com/42

🟠 front api code 작성

export const upload = async (formData: FormData) => {
  console.log("폼데타");
  for (const [key, value] of formData.entries()) {
    console.log(`${key}:`, value);
  }

  return await request.post("/upload", formData);
};

🔴 server code 작성

app.post("/api/upload", upload.single("image"), (req: MulterRequest, res) => {
  console.log(req.body);
  console.log(req.file);
  if (!req.file) {
    return res.status(400).json({ error: "No file was provided" });
  }

  console.log(req.file.location);
  //DB 추가
  res.status(200).json({ location: req.file.location });
});

⭐ 제일 중요한 s3Multer module 작성

import multer from "multer";
import multerS3 from "multer-s3";
import AWS from "aws-sdk";

const S3_BUCKET = "testcolor99b";

AWS.config.update({
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  region: process.env.AWS_REGION,
});

const myBucket = new AWS.S3({
  region: process.env.AWS_REGION,
});
const upload = multer({
  storage: multerS3({
    s3: myBucket as any,
    bucket: S3_BUCKET,
    contentType: multerS3.AUTO_CONTENT_TYPE,
    acl: "public-read",
    contentDisposition: "inline",
    key: (req, file, cb) => {
      file.originalname = Buffer.from(file.originalname, "latin1").toString(
        "utf8"
      );
      cb(null, Date.now().toString() + "_" + file.originalname);
    },
  }),
});

export default upload;

AWS.config~~~ : aws 설정을 업데이트하는데 환경 변수에서 가져온 값으로 세팅한다.

const myBucket = new ~~ : aws s3 instance를 code상에서 생성한다.

upload ~~ : multer 객체를 초기화하고 저장소를 multerS3로 설정한다. 이는 파일이 S3에 저장되도록 설정한다.
   s3 : s3 인스턴스
   bucket : s3bucket 이름 설정
   acl : 파일의 접근 권한 public-read 는 누구나 읽을 수 있도록 허용
   contentDisposition : 파일의 전송형태를 inline으로 설정. 브라우저에서 파일이 표시되도록 허용
   key : 파일이 s3에 저장될 때 사용할 키(파일 경로 및 이름) 를 정의하는 함수.

🐬 file.originame 을 왜 수정해??

영어와 숫자로 구성된 .image* 파일을 upload 하면 잘 올라간다. 하지만 aws도 그렇고 vs-code 도 그렇고 한글 기준이 아니기에 한글로 upload를 하면 이상하게 글자가 깨지는 것을 볼 수 있다.

기본적으로 multer는 파일 이름을 latin1 인코딩으로 처리한다. latin1은 ASCII 문자와 일부 확장된 Latin 문자만 지원하기에 한글과 같은 유니코드 문자를 올바르게 표현할 수 없는 것이다.

따라서 유니코드 문자를 올바르게 처리할 수 있는 utf8 인코딩 방식으로 바꿔서 저장을 해주는 것이다.

다만, 이미지를 다시 front로 불러낼때 img URI 를 사용해야하는데 이 URI는 s3에 upload 할때 response로 반환받는 값으로, 이 URI는 %3DX% 이런식으로 나오는데 이걸 해결할 수 있는 방법은 더 찾아봐야 할 것 같다.
--> 해결

🐬 percentEncoding

따로 설정해준 것이 없는데, 기본적으로 return 받는 값이 %3DX% 이런식으로 나타나는 것은 한글이 percent-encoded 되어 있는 것인데. 웹에서는 특수문자, 공백, 한글 등과 같은 문자들을 안전하게 전송하기 위해 이런 방법을 사용한다.

한글로 된 uri를 사용하는 것은 인터넷 표준 규약 규정에 어울리지 않기 때문에 원본 한글이름을 사용하는 대신 안전한 ASCII 문자열로 변환하는 것이 좋다.

🟣 front에서 s3에 업로드된 이미지 불러오기

아주 간단하다. img uri 를 img 태그의 src에 넣어주기만 하면 ok

즉 db와 연동하여 imguri를 같이 저장만 해주면 불러오기는 쉽다는 뜻이다.

 

 

🟤 Reference

https://www.youtube.com/watch?v=LRsC8_tvLcA    =>  aws-s3 파일업로드