[ SpringBoot & JPA 프로젝트 ] AWS S3 이미지 서버

EC2 인스턴스에 프로젝트를 띄우고 나니 (환경이 달라져서) 발생하는 수많은 문제들

그중에서는 이미지 업로드가 안되는 문제가 있었다.

 

☞ 판매자가 판매할 상품등록 시 상품 이미지는 필수 첨부사항임

 

 

 

 

기존에 이미지 업로드 경로를

String UPLOAD_IMG_PATH="C:\\Users\\user\\Desktop\\proj\\Knitmarket\\src\\main\\resources\\static\\uploadImg\\"

이렇게 로컬 환경에 맞춰서 설정해놨으니 당연히 서버환경에서는 해당경로를 찾을 수가 없어 업로드가 안됐다.

 

 

로컬환경의 경로를 못찾는구나 ! => 서버환경의 경로로 설정해놔야겠다 ! 

 

라는 생각을 하게되었고 1주일간의 경로찾기 삽질이 시작됐다..

프로젝트하면서 가장 길제 고민한 문제였음

 

 

내가 시도했던 건

1. EC2 인스턴스 서버의 경로 찾기 => 못찾음

2. 톰캣 서버 경로에 uploadImg 폴더 생성해서 저장하기 => 업로드는 되는데 이미지 불러오기가 안됨

3. 주소 + 경로 ( = 서버상의 uploadImg 폴더의 경로일거라는 바보같은생각 ) => http:/knitmarket.shop/uploadImg

 

구글링을 하면서 S3 이미지 서버를 사용하는 방법을 보긴했으나, 

경로만 수정하면 해결될 문제라고 생각했었기때문에

눈에 불을 켜고 경로 수정으로 해결할 수 있는 방법만 찾아다녔다.

 

1주일이 지나고

디스코드 개발자 커뮤니티에 질문했다.

그래 .. S3 를 받아들이기로 했다

 

 

---

이것도 S3 연동과정을 하나씩 캡쳐해두지 않았기 때문에

대략 흐름만 적어보자면

 

• AWS IAM 계정 생성
• S3 버킷생성 
•  AWS S3 client 연결 정보 받아오기 (보안을 위해 절대 !! git 에 커밋되면 안됨) 
• S3에 정적 파일을 올리는 기능을 하는 S3Uploader 파일생성
• 버킷공개설정 public 으로 변경

 

---

 

  let url = "/item/register";
        formData.append('data', file);

        $.ajax({
            type: 'POST',
            url: '/item/uploadImg',
            data: formData,
            processData: false,
            contentType: false
        }).success(function (data) {
            location.replace(url);
        }).fail(function (error) {
            alert("상품등록에 실패했습니다. 다시 시도해주세요");
            location.replace("/");
        })

상품등록을 클릭(click)하면

S3Uploader 서비스가 실행되는 /uploadImg 컨트롤러로 이동해서 S3 서버에 이미지를 업로드하고,

성공 시 상품이름을 포함한 그 외 정보가 DB에 업로드되는 /item/register 로 이동합니다.

 

 

 

//상품등록_img
    @PostMapping("/uploadImg")
    public String upload(@RequestParam("data") MultipartFile multipartFile) throws IOException {
       return amazonS3Service.upload(multipartFile,"uploadImg");
    }

 

 

 

그리고 버킷 public 설정 관련 내용은 구글링으로 잘 안나오던데

이렇게 액세스가 '퍼블릭' 으로 되어있어야

url 로 이미지를 불러왔을때 확인이 가능합니다

 

 

 

html 에서 S3 에 업로드 된 이미지는 아래와 같이 불러옵니다 (thymeleaf)

<img th:src ="'https://{버킷이름}.s3.{위치}.amazonaws.com/{업로드 폴더이름}/'+${item.getOrginFileName()}" class="card-img-top"
                                     th:alt="${item.itemName}">

 

 

---

AmazonS3Exception: The bucket does not allow ACLs 

 

해결 : 버킷이름클릭 => 권한 탭 클릭 => 객체소유권 편집