CloudFront에서 큰 파일을 gzip 전달

Summary

CloudFront는 10MB 이상의 큰 파일을 자동으로 gzip으로 전송하지 않습니다.
미리 gzip 압축한 파일을 S3에 넣는 것으로 대처할 수 있었습니다.

전제 조건

S3 및 CloudFront에서 사이트를 배포 중입니다.

10 MB 이상의 큰 파일을 전달하고 있습니다.

큰 파일에도 gzip 압축을 걸고 싶다.

CloudFront에서 자동으로 gzip 전송할 수 없는 파일

문장 교정을 할 수 있는 사이트를 만들고 있었는데, 형태소 분석 를 위한 사전 파일을 Web 브라우저에 읽어들일 필요가 나왔습니다.
그 사전 파일은 gzip 압축으로 20 MB, 비압축으로 100 MB 의 꽤 큰 파일.
CloudFront에서 gzip 압축을 걸고 싶지만…



CloudFront에서 'Compress Objects Automatically'를 사용하도록 설정해도 사전 파일은 gzip으로 전송되지 않았습니다.
기사 CloudFront의 gzip 압축을 켜면 압축되는 데이터 에 따르면, 10 MB를 넘는 파일에는 gzip 압축이 적용되지 않는 것 같습니다.

gzip 압축된 파일을 S3에 저장

그래서 미리 gzip 압축한 파일을 S3에 넣기로 했습니다.
GitHub Actions를 사용하여 S3에 배포하고 있으므로 ↓과 같이 gzip 명령을 사용한 전처리를 넣습니다.

해당 커밋

- run: gzip -r docs
- run: for file in $(find docs -type f); do mv "${file}" "${file%.gz}"; done
- uses: jakejarvis/s3-sync-action@master
  with:
    args: --acl public-read --content-encoding gzip --delete --follow-symlinks
  env:
    AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
    SOURCE_DIR: docs

docs 디렉터리 부하를 전달하려면 $ gzip -r docs 에서 모든 파일을 gzip 압축합니다. 이 때 압축된 파일에는 .gz 확장자가 붙습니다.
$ for file in $(find docs -type f); do mv ${file} ${file%.gz}; done로 압축된 파일에서 .gz 확장자를 제거합니다.

그리고 s3 sync 명령을 --content-encoding gzip 옵션으로 실행하면 완료됩니다.
※ 동작 확인 시에는 CloudFront 캐시 삭제가 필요할 수 있습니다.

gzip 전달할 수 있었다!

사전 데이터를 20MB 이내에 저장하여 배포할 수 있습니다.
그래도 웹사이트로서는 매우 큰데요.
거기서

Service Worker 를 사용해 캐쉬를 영속화하면 실용 범위내일까.

오프라인에서도 움직이는 앱으로 하면 타협할 수 있을까……?

문장 교정 사이트를 만들어 보았습니다.

교정씨

문장 교정을 할 수 있는 웹 사이트를 만들어 보았습니다!
사전 데이터 및 교정 프로그램을 포함한 모든 웹 브라우저에서 실행됩니다.
PWA 에 대응시켰으므로, 스마트 폰으로부터라면 네이티브 어플처럼 사용할 수 있다고 생각합니다.