Firebase Hosting CDN Cache 설정
Firebase Hosting
은 간단히 정적 웹페이지 또는 SPA를 배포 하여 운영 할 수 있는 서비스 입니다.
무엇보다 Cli 기반의 간단한 배포가 큰 장점인 것 같습니다.
싱글 페이지 웹 어플리케이션 또는 정적 웹 페이지에는
아래의 파이어베이스 호스팅 페이지를 참고하시면 간단히 적용 하실 수 있습니다.
https://firebase.google.com/docs/hosting?hl=ko
문서도 잘 작성되어있고 유투브 영상 가이드도 있습니다.
문제는 !
이렇게 잘 사용중이었지만 배포 할때마다 새로 바뀐 웹 페이지를 유저들이 바로바로 확인 할 수 없다는 문제들을 발견 했는데요.
이유는 기본적으로 파이어베이스 호스팅이 캐싱 주기를 길게 잡고 있었습니다.
만약 유저가 이전의 캐싱된 프로트의 html, js, css 파일들을 가지고 있는 상태에서 프론트와 벡엔드가 업데이트 되었다면 에러가 발생 할 수 있습니다.
브라우저 캐싱으로 인해 실제 코드는 업데이트가 되었지만 유저는 한동안 이전의 프론트 소스를 계속 가지고 있을 것입니다.
이러한 문제를 실제로 겪은 후 문제의 심각성을 인지 하게 되었습니다 :(
그래서
파이어 베이스에 배포를 할때마다 유저들도 바로바로 바뀐 프론트 소스들을 브라우저에서 볼 수 있도록 개선을 해야 했는데요.
해결 방법
처음 프론트 환경에 firebase 를 init 하면 firebase.json 파일이 생성 되었을 것입니다.
여기의 "header" 부분에 아래의 코드들을 추가 해 줍니다.
"headers": [
{
"source": "**/*.html",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=0, no-cache"
}
]
},
{
"source": "**/*.@(css|js)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=3500"
}
]
},
{
"source": "**/*.@(jpg|jpeg|gif|png)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=3300"
}
]
},
]위의 설정에 따르면 index.html 파일은 매번 새로 받아오게 되고,
js, css, 및 이미지 파일들은 캐싱을 해주게 됩니다.
위의 설정 이후 배포후 새로 접속 시마다
바뀐 프론트를 확인 할 수 있었습니다.
참고 자료
https://medium.com/@StephanSmith93/firebase-hosting-deployment-solution-fc8061ebae6b
