AWS S3 이미지 접근 문제 및 기타 오류 해결 과정 (CORS, 프로젝트 에러 문제 등)

이번 포스팅에서는 AWS S3에 업로드한 이미지에 접근할 수 없는 AccessDenied 오류와 함께 발생한 여러 문제들을 해결한 과정을 매우 자세히 정리했다.

또한, CORS 설정, Kakao 지도 API 오류, MySQL 데이터 삽입 문제 등 다양한 문제들을 해결한 방법도 설명한다.

---

1. S3에 업로드된 이미지 접근 오류 (AccessDenied)

문제 발생:

S3에 이미지를 업로드한 후, 해당 이미지를 외부에서 접근하려고 했을 때 "Access Denied" 메시지가 나타났다.

이미지 링크를 클릭해도 AccessDenied XML 문서만 표시되었고, 파일을 볼 수 없었다.

해결 과정:

1. ACL(Access Control List) 설정 확인:
   먼저, S3 콘솔에서 파일에 대한 권한(ACL)을 확인했다. 이미지 파일이 퍼블릭 읽기 권한이 없으면 외부에서 접근할 수 없기 때문에, 파일에 대한 읽기 권한이 부여되어 있는지 확인했다.
2. 퍼블릭 액세스 설정 수정:
   • AWS S3 콘솔에서 문제의 이미지 파일을 선택하고 Permissions(권한) 탭에서 퍼블릭 읽기 권한을 부여했다.
   • 이를 통해 외부 사용자가 해당 이미지 파일을 읽을 수 있도록 설정을 완료했다.
3. S3 버킷 정책 수정:
   버킷 정책에서 외부에서 모든 파일을 읽을 수 있도록 설정하는 추가 작업이 필요했다. 따라서 S3 버킷 정책을 다음과 같이 수정했다.
   • your-bucket-name 부분을 실제 S3 버킷 이름으로 대체하여 모든 객체에 대해 퍼블릭 읽기 권한을 부여했다.
   •  
4. 퍼블릭 액세스 차단 설정 확인:
   마지막으로, S3 콘솔의 퍼블릭 액세스 차단 설정을 확인했다. 버킷 수준에서 퍼블릭 액세스가 차단되어 있으면, 개별 파일에 퍼블릭 권한을 설정하더라도 접근이 차단된다. 따라서 퍼블릭 액세스 차단 설정을 해제하여 외부 접근을 허용했다.

{ 
	"Version": "2012-10-17", 
	"Statement": [ 
		{ 
        	"Sid": "PublicReadGetObject",
			"Effect": "Allow", 
			"Principal": "*", 
			"Action": "s3:GetObject", 
			"Resource": "arn:aws:s3:::your-bucket-name/*" 
		} 
	] 
}

---

2. CORS(Cross-Origin Resource Sharing) 문제

문제 발생:

S3 파일에 대한 접근을 설정한 후에도, 웹 애플리케이션에서 S3 리소스에 접근할 때 CORS 오류가 발생했다. 다른 도메인에서 S3 리소스에 접근하는 경우, CORS 설정이 없으면 파일을 읽을 수 없다.

해결 과정:

1. CORS 설정 오류 수정:
   먼저 S3 콘솔에서 CORS 설정을 XML 형식으로 입력하였으나, 이는 올바른 형식이 아니었다. AWS S3의 CORS 설정은 JSON 형식으로 작성해야 한다.
2. 올바른 JSON 형식으로 수정:
   다음과 같은 JSON 형식으로 CORS 설정을 수정했다.
   • AllowedOrigins에 *을 사용하여 모든 도메인에서 접근을 허용하도록 설정했다.
   • AllowedMethods에는 GET만 허용하도록 했고, AllowedHeaders에도 *을 사용하여 모든 헤더를 허용했다.
   •  
3. 적용 후 테스트:
   CORS 설정을 저장한 후, 웹 애플리케이션에서 S3 이미지에 정상적으로 접근할 수 있음을 확인했다.

{ 
	"CORSRules": [ 
    	{ 
        	"AllowedOrigins": ["*"], 
            "AllowedMethods": ["GET"], 
            "MaxAgeSeconds": 3000, 
            "AllowedHeaders": ["*"] 
        } 
    ] 
}

---

3. Kakao 지도 API 오류

문제 발생:

웹 애플리케이션에서 Kakao 지도 API를 호출할 때 kakao is not defined라는 JavaScript 오류가 발생했다. 이 오류는 Kakao 지도 API가 제대로 로드되지 않아 발생한 문제다.

해결 과정:

1. Kakao 지도 API 스크립트 순서 문제 확인:
   HTML 파일을 확인한 결과, Kakao 지도 API 스크립트가 HTML에서 제대로 로드되지 않았다는 것을 알게 되었다. JavaScript 코드가 ready 상태 전에 실행되어 API가 로드되지 않은 상태에서 호출된 것이다.
2. 스크립트 로드 순서 수정:
   Kakao 지도 API 스크립트를 다음과 같이 HTML 파일의 하단에 배치하고, jQuery의 $(document).ready() 함수 내에서 Kakao API가 로드된 후 실행되도록 수정했다.
3. <script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=your-app-key&libraries=services"></script> <script> $(document).ready(function() { if (typeof kakao !== "undefined") { getMap(); // 지도 함수 호출 } else { console.error("Kakao 지도 API 로드 실패"); } }); </script>
4. Kakao API Key 확인:
   Kakao Developers 콘솔에서 API 키를 확인하고, 해당 도메인이 Kakao API에서 허용된 도메인 목록에 있는지 확인했다. 문제가 있었던 도메인을 추가한 후 오류가 해결되었다.

---

4. MySQL 데이터 삽입 오류 (Field 'cardPrice' doesn't have a default value)

문제 발생:

카드 데이터를 데이터베이스에 삽입할 때, Field 'cardPrice' doesn't have a default value라는 오류가 발생했다. 이는 cardPrice 필드가 NOT NULL로 설정되어 있지만, 삽입 시 값을 제공하지 않아 발생한 문제다.

해결 과정:

1. 테이블 구조 수정:
   MySQL 테이블에서 cardPrice 필드에 기본값을 설정하기 위해 다음 SQL 명령어를 실행했다.이를 통해 cardPrice 필드에 기본값 0.00이 설정되었고, 값이 없을 때 기본값으로 자동 삽입되도록 했다.
2. ALTER TABLE Card MODIFY cardPrice DECIMAL(10,2) DEFAULT 0.00;
3. SQL 삽입문 수정:
   데이터 삽입 시 cardPrice 필드 값을 명시적으로 제공하도록 SQL 삽입문을 수정했다.이렇게 SQL 삽입문에 cardPrice 값을 추가하여 문제를 해결했다.
4. INSERT INTO Card (cardName, cardIsPublic, cardIsPaid, cardDate, cardStartDate, cardEndDate, cardImage, cardEmojis, cardDesign, templateThumbnail, categoryID, memberID, payID, cardPrice) VALUES (?, ?, ?, DATE_ADD(CURRENT_TIMESTAMP, INTERVAL 9 HOUR), ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);

---

결론

이번 과정에서는 AWS S3에 대한 접근 권한 문제부터 CORS 설정, Kakao 지도 API 문제, MySQL 데이터베이스 오류까지 다양한 문제를 해결한 방법을 다뤘다.

문제를 하나씩 해결해가면서 각 기술에 대한 이해를 높일 수 있었으며, 이를 통해 전체적인 시스템 안정성을 확보했다.

 

해결 과정에서 가장 중요한 것은 문제의 원인을 파악하고, 차근차근 문제를 해결하는 것이다.

이를 통해 비슷한 문제가 발생했을 때에도 빠르게 대처할 수 있는 능력을 기를 수 있다.