[O'REILLY] Node & Express - 17장 : 정적 콘텐츠

16장은 Only React에 관한 내용이므로 스킵한다.

nodeJS Express

1. 정적 콘텐츠의 종류

- HTML : 웹앱에서 뷰를 통해 HTML을 동적렌더링한다면 일반적으로 정적 자원이라고 말하지 않는다. SPA앱은 일반적으로 정적 HTML파일 단 하나를 클라이언트에 전송하며 이런 경우는 HTML을 정적 자원으로 간주한다.

- CSS : 포스트CSS가 있더라도 어차피 클라이언트가 받는 css는 정적자원이다.

- JS : 클라이언트사이드의 JS는 일반적으로 정적자원으로 간주한다.

- 이진 파일 : PDF, 압축파일, 설치파일, 워드문서 등등

- 멀티미디어 : 이미지/비디오/오디오

 

2. 성능 고려사항

- 성능에서 고려할 점은 요청 숫자를 줄이는 것과 콘텐츠의 크기를 줄이는 것이 중요하다.

- 둘 중에서는 HTTP요청 숫자 자체를 줄이는 것이 더 중요하다.

- 요청 횟수는 자원 결합과 브라우저 캐싱 두 가지 방법을 통해 줄일 수 있다.

- 작은 이미지들을 합쳐서 스프라이트 하나로 만드는 것도 방법이다. (자원 결합은 프런트엔드의 문제이긴 하다.)

- 하나로 만든 이후 css를 통해 이미지의 일부분만 표시하도록 하는 스킬이 있다.

- 스프라이트패드 라는 서비스가 있다.

- 정적 자원크기를 압축하는 기술들도 있다.

 

3. 콘텐츠 전송 네트워크(CDN)

- CDN은 정적 자원을 전송하는 데 최적화된 서버이다.

- 브라우저 캐싱을 활성화하는 특별한 헤더를 사용한다.

- 위치 최적화라고도 한다. 물리적으로 클라이언트에 가까운 서버에서 정적 컨텐츠를 전송한다.

- 일반적으로 CDN 사용에는 CORS를 염려하지 않아도 된다. HTML에서 불러온 외부자원은 CORS의 영향을 받지 않는다.

- 다만 AJAX를 통해 불러온 자원에는 CORS를 활성화해야한다.

 

4. CDN 고려 설계

- 사이트 구조 역시 CDN 사용 방법에 영향을 준다.

- CDN 대부분은 들어오는 요청을 어디로 보낼지를 라우팅 규칙을 통해 결정한다.

- 보통은 정적 자원 요청을 한 위치(보통 CDN)로 보내고 동적 엔드포인트(동적페이지나 API엔드포인트) 요청을 다른 위치로 보내는 것이 일반적이다.

- 동적 자원과 정적 자원을 구별해서 CDN 라우팅 규칙을 가능한 단순하게 만들면 된다.

- 경로를 이용하여 /static 이나 /public 등의 접두사를 붙이는 것이 일반적이다.

 

- SSR에서는 보통 이런식으로 이해하면 된다.

   /static/* : CDN 정적 파일 저장소

   /*(나머지전부) : 노드/익스프레스 서버, 프록시, 로드 밸런서

 

- CSR(SPA)에서는 보통 이런식으로 이해하면 된다.

   /api/* : 노드/익스프레스서버, 프록시, 로드 밸런서

   /*(나머지전부) : CDN 정적 파일 저장소

 

5. 정적 자원 캐싱

- 정적 자원을 언제, 어떻게 캐시할지 판단하는 기준인 HTTP 응답 헤더를 알아두면, 익스프레스에서 정적자원을 전송하든, CDN을 사용하든지 관계없이 도움이 된다.

- Expires/Cache-Control : 자원을 어마나 오랫동안 캐시할지 정한다.

- 둘 중 Expires가 더 널리 지원된다.

- Last-Modified/ETag : 일종의 버전 관리 역할을 한다. 브라우저는 자원을 가져오기 전에 이 헤더를 검사한다. 헤더 검사 결과, 자원이 바뀌지 않았다고 확인되면 파일을 실제로 내려받지 않는다. 

- 정적자원을 전송할 때는 Expires 헤더와 함께 Last-Modified 또는 ETag 헤더를 사용해야 한다.

- express 자체 static미들웨어는 Cache-Control 헤더를 설정할 뿐 다른 설정이 없다.

- AWS 클라우드프런트, 애저, 아카마이 등등의 CDN 으로 정적 자원을 전송하면 이런 세부사항 대부분을 CDN에서 해결한다.

 

6. 정적 콘텐츠 수정

- 캐시버스팅을 통해 오랫동안 캐싱된 데이터를 업데이트할 수 있다. (강제로 자원을 다시 내려받도록 만든다.)

- 보통은 자원에 버전번호를 붙이거나 해시값을 추가하는 식으로 구현한다. (파일이름을 변경)

- CRA같은 SPA 프레임워크에서는 자원 번들에 해시를 붙여서 실무에 사용하기 적절하게 만들어준다.

 

결론 : 갓갓CDN 쓰자.