[AWS S3] 클라이언트 배포 시 404 에러

📝 배경

• 프로젝트가 50% 정도 진행되었을때, *S3를 통해 클라이언트 빌드파일을 배포하고 테스트를 진행하였다.
• 서버는 EC2를 통해 배포하였음
• 분명 로컬에서 테스트 했을 때에는 api호출이 정상적으로 이루어졌던 상황이었음

 

* S3 란?

Amazon Simple Storage Service(Amazon S3)는 업계 최고의 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스입니다. 모든 규모와 업종의 고객은 Amazon S3를 사용하여 데이터 레이크, 웹 사이트, 모바일 애플리케이션, 백업 및 복원, 아카이브, 엔터프라이즈 애플리케이션, IoT 디바이스, 빅 데이터 분석 등 다양한 사용 사례에서 원하는 양의 데이터를 저장하고 보호할 수 있습니다. Amazon S3는 특정 비즈니스, 조직 및 규정 준수 요구 사항에 맞게 데이터에 대한 액세스를 최적화, 구조화 및 구성할 수 있는 관리 기능을 제공합니다.
AWS S3 공식문서

 

🚨 문제 상황 - (1). CORS 에러

• 우선 S3 버킷 등록 후 퍼블릭으로 권한 설정을 완료하였다. ( 퍼블릭으로 설정하지 않으면 외부에서 접근 불가 )

S3버킷 퍼블릭 설정

• 퍼블릭으로 설정후  권한 > 버킷 정책 에 아래와 같은 코드를 추가해 주었음 ( 서버에 접근하기 위한 설정 )

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1654095607580",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{생성한 버킷 명 넣어주기}/*"
        }
    ]
}

• 위의 과정을 거치고 배포하였으나, 다음과 같은 CORS에러를 맞이하였다.

CORS 에러

 

🔨 원인 파악 및 해결

• 위와 같은 상황은 SOP 정책에 의해 출처가 다른 경우 리소스 상호작용(공유)가 불가능한 상황이라는 것이다.
• S3에서는 권한 > CORS(Cross-origin 리소스 공유) 탭을 눌러 다음과 같이 수정하엿다.
• 아래 설정에서 "AllowedOrigins":["*"] 는  모든 출처에  대해서 리소스 공유를 허용한다는 내용의 설정이다.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"   // 모든 출처 허용
        ],
        "ExposeHeaders": []
    }
]

• 더불어, 서버(스프링)쪽 담당자 분께서는 컨트롤러 상단부에 @CrossOrigin를 추가하는 작업을 하였습니다.
• 이를 통해 CORS 오류는 해결하였다!

 

 

🚨 문제 상황 - (2). 404 에러

• 위의 과정을 거져 CORS 오류는 해결하였으나, 로그인 파트를 제외한 모든 요청에서 아래와 같은 404에러가 뜨는 것을 확인하였다..!

CORS오류는 해결하였으나, 404에러가 발생

 

🔍️ 원인 파악 

• 정상 작동하는 로그인 파트의 코드를 보니, API통신 코드의 Base URL이 하드코딩으로 작성되어 있는 것을 확인함

// .env 파일

REACT_APP_API_URL= 서버주소

• 그 외 모든 통신 코드는 위와 같이 환경변수로 설정해둔 REACT_APP_API_URL 값을 사용하여 코딩함
• 이를 미루어 봤을때, 환경변수(env)파일이 빌드 시 제대로 적용이 되지 않았다는 것을 추측할 수 있었음

 

🔨 문제 해결

• 리액트의 환경변수에는 .env파일 외 여러가지가 있다는 것을 확인하였음

환경변수는 개발 환경과 배포 환경, 테스트 환경에 따라 나뉘어진다.
- .env : 기본
- .env.local : test 환경 외에 모든 환경에서 사용
- .env.development : 개발환경 -> npm start
- .env.production : 배포 환경 -> npm run build
- .env.test : 테스트 환경 -> npm test

또한, 각 상황에 따라 우선순위가 다르다.
1. npm start: .env.development.local > .env.development > .env.local > .env
2. npm run build: .env.production.local > .env.production > .env.local > .env
3. npm test: .env.test.local > .env.test > .env

* 우선순위는 왼쪽으로 갈수록 높음

• 배포환경에 적합한 .env.production 파일을 만들고 빌드를 한후 배포를 하니 404에러 또한 해결되었다.
• 하지만 위의 내용에서도 확인 가능하듯, npm run build를 할 경우 낮은 우선순위로 .env파일의 내용도 빌드가 되어야 할텐데, 왜 안되었던 것인지는 아직도 의문이 들어 추가로 더 찾아 보았다.
• 관련 내용을 살펴 보면, 리액트 프로젝트의 기본 동작은 .env 파일을 빌드에 포함하지 않으며, .env 파일을 포함하고 싶다면 명시적으로 설정해야 한다고 한다.

// .env 파일

REACT_APP_MY_VAR=my_value npm run build // npm run build 시 .env 파일의 특정 내용도 build 하고 싶은 경우

 

 

🌱 느낀점

• 실제 부트캠프 수업을 진행하면서 SOP, CORS 관련 내용을 학습할때는 와닿지 않던 내용들이었는데, 실제로 해당 문제를 접해보니, 당시 배웟던 내용들이 주마등 처럼 스처지나갔다.
• 한 번 겪은 문제이니, 다음부터는 비슷한 오류나 에러 발생 시 금방 해결 할 수 있을것 같다!

 

 

🌐 참고자료

• https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/cors.html