코딩뚠뚠

[AWS] S3 정적웹호스팅 변경내용 바로 적용하기 본문

공부/AWS

[AWS] S3 정적웹호스팅 변경내용 바로 적용하기

로디네로 2022. 7. 24. 22:49
반응형

 

AWS S3를 이용한 정적 웹호스팅을 구성한 사용자들은,

 

페이지 업데이트를 위해 새로 업로드한 파일들이 페이지에 바로 적용되지 않는 경험을 했을 확률이 높다

 

대개 AWS의 CDN 서비스인 CloudFront 를 사용하고 있는 경우인데,

 

바로 적용하는 방법을 알아보도록 하자.

 

 

1. 새 프로젝트를 빌드 하고 S3 에 업로드

 

이후 사이트에 접속해보면 바로 변경내용이 적용되어 있지는 않은 것을 알 수 있다.

 

 

2. CloudFront - ID 클릭

 

 

 

3. Invalidations 클릭

 

 

 

4. Create invalidation

 

 

무효화 하고자하는 페이지를 적어준다.

 

내가 호스팅하고 있는 React 페이지의 경우 index.html 을 무효화 해야했다.

 

 

 

5. 결과

 

Create invalidation 시 Status가 In progress 상태에서 약간의 시간이 걸린 뒤 Completed로 변한다.

 

페이지 접속시 정상적으로 동작함을 확인할 수 있다.

 

 

 

위 테스트 접속 링크

 

카톡분석 왕 테스트

 

www.advancer-katalk.click

관련 포스팅

 

 

[AWS] Lambda 프로젝트-5 / S3 이용한 정적웹호스팅

이전장에서는 AWS S3에 파일을 업로드 하는 동작을 React로 연동해보았다. [AWS] Lambda 구축하기-4 / React 연동 파일 업로드 이전장까지 S3 저장소를 만들고 API Gateway를 통해 S3에 파일을 업로드해봤다. [

dbstndi6316.tistory.com

 

[AWS] Lambda 프로젝트-6 / S3 정적웹호스팅에 https 적용

이전장에서는 AWS S3 bucket을 이용한 정적 웹호스팅까지 진행해보았다. [AWS] Lambda 구축하기-5 / S3 이용한 정적웹호스팅 이전장에서는 AWS S3에 파일을 업로드 하는 동작을 React로 연동해보았다. [AWS] L

dbstndi6316.tistory.com

 

 

끝

 

 

 

반응형

'공부 > AWS' 카테고리의 다른 글

[AWS] 카톡분석 프로젝트-11 / React 이미지 슬라이드 구현  (0) 2022.08.05
[AWS] 카톡분석 프로젝트 - 마무리 및 배포  (2) 2022.08.01
[AWS] 사용자별 고유 페이지 배포 Access Denied(403) error  (0) 2022.07.17
[AWS] 오류 : DNS_PROVE_FINISHED_NXDOMAIN  (3) 2022.06.24
[AWS] 카톡분석 프로젝트-10 / React 링크 복사 버튼, 팝업  (1) 2022.06.22
'공부/AWS' Related Articles more