Next

aws 이미지 업로드 하드만들기 1 [설정]

하림회사 2023. 7. 31. 21:27

유저가 글작성시 이미지를 업로드할 수 있게 만들어봅시다.

업로드한 이미지를 하드에 저장해놓고 필요할 때 보여주면 될텐데 

Vercel에 올려놨거나 AWS 인스턴스를 여러개 만들었거나 하는 경우 하드 이용이 난감한 경우가 있어서

AWS S3같은 파일저장용 클라우드 서비스 빌려서 거기 업로드해놓는게 좋습니다. 

 

저번에 AWS 배포하면서 카드등록해놨으면 S3도 무료로 5GB까지 1년 이용가능하니까

AWS S3 사용해서 이미지 파일 올리는 법을 좀 알아봅시다. 

근데 대충넣으려면 구글 firebase storage 같은게 더 쓰기쉽고 5GB 까지 아마 평생 무료임

 

 

 

 

 

AWS S3 셋팅

 

AWS 로그인하고 S3 검색해서 들어가봅시다. 

그리고 어딘가에 있는 버킷만들기 버튼 누르면 됩니다. 

 

 

 

 

▲ 버킷은 여러분만의 저장공간입니다. 

작명은 유니크하게 해줍시다. 

 

 

 

 

▲ 퍼블릭 액세스 설정을 이렇게 바꿔줍시다. 그래야 개발시 편합니다. 

대충 이것만 채워서 버킷만들면 됩니다. 

 

 

 

 

 

 

버킷정책 수정하기

 

보안을 신경써야한다면 일반 사람들은 읽기만 가능하게,

관리자는 수정, 삭제가 가능하게 바꾸는게 좋은데 

 

 

 

 

▲ '권한' 눌러서 '버킷 정책' 편집을 눌러봅시다.

누가 버킷을 읽기, 수정, 삭제 할 수 있는지 정의하는 부분입니다.

 

 

 

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::님들버킷명/*"
        },
        {
            "Sid": "2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::님들AWS계정ID:root"
            },
            "Action": [
                "s3:PutObject",
                "s3:DeleteObject"
            ],
            "Resource": "arn:aws:s3:::님들버킷명/*"
        }
    ]
} 

그래서 이렇게만 써놔도 일단은 안전한데 1번은 모든 유저는 GET이 가능하고

2번은 관리자만 PUT, DELETE가 가능하다고 적어놓은 것입니다. 

 

- Principal은 어떤 유저인지 명시하는 부분인데 * 쓰면 모든유저,

특정 AWS 계정을 넣고 싶으면 arn:aws:iam::님들AWS계정ID:root 넣으면 됩니다.

님들 계정 ID는 AWS 사이트 오른쪽 위 눌러보쇼

 

- 자료 읽기는 s3:GetObject

쓰기는 s3:PutObject

삭제는 s3:DeleteObject

를 의미합니다. 

 

- Resource는 어떤 버킷인지 버킷명 잘 적어주면 됩니다. 

저는 arn:aws:s3:::codingappleimage1/* 이렇게 적어봄 

 

 

 

 

 

그 밑에 CORS 설정은

 

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
] 

어떤 사이트에서 버킷안의 파일들을 읽기, 쓰기, 삭제할 수 있는지 CORS 설정하는 부분입니다.

다른 사이트에서 자료 쓰기, 삭제 못하게 만들려면

AllowedOrigins 안에 님들 사이트 주소 넣으면 되는데 개발중이니 * 넣어둡시다. 

 

 

 

 

 

Access 키 발급

 

님이 만든 서버에서 S3로 접속하고 이미지올리고 이거저거 하고 싶으면

코드짤 때 Access key를 기입해줘야합니다.

그거 발급하려면 IAM 검색해서 들어갑시다. 

 

 

 

▲ 아니면 우측 위에 님들 이름눌러도 아마 들어갈 수 있음

그럼 중간쯤에 액세스키 만들기가 있는데 하나만들어서 액세스키와 비밀키 2개 세트를

코딩할 때 사용하게 안전한 곳에 보관해둡시다. 

분실했으면 지우고 새로 만들면 됩니다. 

이거 털리면 님들 AWS 요금 월 1억 나오는 것임 

 

 

 

 

 

 

 

요즘은 Presigned URL

 

유저가 업로드할 이미지를 하나 고르면 그걸 유저에게 미리 보여줘야하지 않겠습니까

createObjectURL 같은걸 써도 보여줄 수 있는데 

근데 보통은 편하게하려면 유저가 이미지를 <input type="file">에서 고르는 순간 그냥 S3에 집어넣으면 됩니다. 

그리고 집어넣은 후에 이미지 URL을 <img src=" "> 안에 넣으면 이미지를 보여줄 수 있습니다. 

 

예전엔 직접 서버에서 이미지를 업로드하는 식으로 코드를 짰다면

요새 S3에서는 Presigned URL 이라는 방식으로 이미지를 업로드합니다. 

Presigned URL을 가진 모든 유저는 브라우저에서 서버안거치고 직접 S3에 업로드가 가능한데

그러면 서버부담이 덜해져서 좋으니 그렇게 쓰는 것이고 어떤 식인지 구체적으로 설명해보면 

 

 

1. 글작성 페이지의 <input>에서 유저가 이미지 고르는 순간 서버에게 GET요청을 합니다.

심심하니까 이미지 이름도 같이 보내줌

2. 그럼 서버는 괜찮은 유저인지 이거저거 검사해보고 Presigned URL을 만들어서 유저 브라우저로 보내줌

3. 유저는 브라우저에서 Presigned URL을 이용해서 S3로 POST요청해서 바로 이미지를 보냅니다.

4. 업로드 성공시 업로드된 이미지의 URL을 <img src=" ">에 박아서 이미지 업로드된걸 보여줌 

이런 식으로 개발합니다.

실은 개발할 것도 없고 그냥 사용법 복붙만 하면 되는거라 다음 시간에 알아봅시다.