✍오늘 한 일
CloudFront와 Amazom S3를 사용한 SSL 지원 정적 웹사이트 호스팅
ohsool이 모바일 환경에서 더 유용하게 쓰일 수 있도록 PWA(Progressive Web Apps)로 만들기로 결심하였다. PWA가 되기 위해서는 manifest.json과 Service Workers 2가지 기술이 필요하다.
1.manifest.json
manifest.json은 설치할 때 아이콘은 무얼 사용하고 아이콘을 눌렀을때 접속할 페이지는 무엇인지, 배경색은 무슨색으로 할 것인지 등등..에 대한 설정파일이다.
2.service-worker
Service Workers는 PWA의 핵심으로 캐싱은 어떻게 할 것인지 요청시 캐시를 먼저 보여줄지 웹서버를 통해서 먼저 보여줄지, push 등등에 대한 프로그래밍하는 기술이다.
또한 PWA는 HTTPS에서만 사용가능하기 때문에 HTTPS로 보안을 강화시키는 작업을 했다.
HTTPS가 되기 위해 AWS Certificate Manager를 통해 SSL 인증서 요청을 했는데 와일드 카드인 *.ohsool.com 주소로 발급해 ohsool.com의 모든 서브도메인이 가능하도록 했다.
이렇게 하면 인증서 검증에 사용할 CNAME 레코드가 도메인 이름마다 1개씩 표시가 된다.
다음으로는 CloudFront 웹 배포를 생성했다.
CloudFront는 AWS에서 제공하는 CDN으로, .html, .js .css 등 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 서비스이다.(자세히 보기)
CloudFront Distribution과 기존에 보유한 도메인을 연결하여 Route 53 설정을 해주었다.
확인한 결과 HTTPS를 사용하여 접속되고, 유효한 인증서가 적용된 것을 확인할 수 가 있었다.
하지만 HTTPS 를 적용시킨후 크게 2가지 문제점이 발생했다.
- 소셜로그인 Redirect 문제
React 같은 SPA를 통해 S3-CloudFront 배포를 하게 되면 Redirect 문제가 발생한다.
그래서 redirect로 구현한 소셜로그인 기능에 오류가 발생하였다.
React에서 사용하는 react-router-dom 때문인데, CloudFront에서 redirect를 403으로 막아버리기 때문이다. 그래서 CloudFront에서 에러 핸들링을 해줘야한다.
그래서 Access Denied를 방지하기 위해 아래 문서를 참고해 설정을 해줬다.
그리고 CloudFront는 브라우저 캐시 때문에 적용이 오래 걸린다. 이를 해결하기 위해서는 CloudFront-> disrtibutions-> invalidations ->create invalidation에서 object path를 지정해주면 된다.
그러면 캐시 문제가 금방 해결된다.
- build 폴더 적용 실패
이전에는 S3 버킷에 build된 폴더/파일들을 업로드하고, 권한만 설정해주면 바로 배포가 되었는데,
CloudFront을 사용하면 배포시 한가지 작업을 더 해줘야한다.
이또한 위에서 캐시 적용이 오래걸리는 문제 때문이라, invalidation에서 object path 설정을 /index.html로 적용해주면 1분정도 지나 바로 적용되는 것을 볼 수가 있다.
결과적으로 HTTPS 상태에서만 가능한 기술인, kakao 지도 API 현위치 불러오기와 PWA를 성공시켰다.👋
오늘은 배운게 참 많은 날이다.
✍참고자료
CloudFront와 Amazon S3 사용한 정적 웹사이트 호스팅
CloudFront로 React 앱 배포하기
