[클라우드] AWS-S3-REACT

이정훈·2023년 3월 16일
0

클라우드

목록 보기
9/14
post-thumbnail

React 빌드하기

  • 앞서 만들어 놨던 URL을 가져왔다. 백엔드 코드를 입력해줘야한다.
  • 비쥬얼스튜디오는 수정하고 바로 적용이 되지않기 때문에 저장을 하고 빌드를 해줘야 한다!
npm run build
  • 빌드 파일 만들어주고 새로만든 버킷에 업로드 해준다.

  • 드래그 엔 드랍으로 해도 상관이 없다. 오히려 이게더 편하다.

  • 버킷을 만들었을 때 권한 부분에서 엑세스 전부 허용하고, 버킷정책 생성해서 만들어줘야한다.

  • 이렇게만 해서 정적URL을 키면 cors오류가 뜬다!
    왜? CORS (Cross-Origin Resource Sharing) 도메인에서 오는 요청을 허용해 줘야한다.
    누가? 백에서 장고에서 허용해 줘야한다.

CORS_ORIGIN_WHITELIST = [
    "[프론트로 사용한 IP=S3의 정적URL]"
    ]
  • 허용해주는 도메인은 백에서 봤을때는 S3의 정적URL을 넣어줘야한다.
zappa update dev
  • 수정했으면 업데이트!
  • 그리고 편집에 들어가서 기본 인덱스 문서를 index.html로 설정해줘야한다.
  • 프로트로 접속하면 백으로 요청하여 화면을 보여준다.
  • 지금 데이터가 없어서 아무것도 안떴지만 요청 URL을 보면 백에서 요청해서 가져온 것을 확인 할 수 있다!
profile
싱숭생숭늉

0개의 댓글