Gitlab Pagesでgzip圧縮転送を使う方法

Gitlab Pagesのデフォルトはgzipなし

Gitlabの静的ページ配信サービス「Gitlab Pages」では、配信サーバー側でgzip圧縮はしてくれません。調べた限りは、gzip圧縮する設定も無いようです。

Gitlab CI/CDで公開する時にgzipファイルを用意する

サーバー側でgzip圧縮してくれないなら、gzipファイルを用意すれば良いということで、Gitlab CI/CDでページを公開するときに、gzip圧縮を行います。

具体的には、下記のコマンドを入れればOKです。

find public -type f \( -name \*.html -or -name \*.css -or -name \*.js \) | xargs -I {} sh -c "gzip -k {}"

参考：gzipで圧縮して高速化する | Gitlab

Node.jsアプリの.gitlab-ci.ymlをサンプルだと下記のようになります。

image: node:latest

variables:
  GIT_SUBMODULE_STRATEGY: recursive

pages:
  stage: deploy
  only:
    - master
  cache:
    paths:
      - .cache/    
  before_script:
    - mkdir -p .cache
    - npm config set cache $CI_PROJECT_DIR/.cache/npm --global
    - yarn config set cache-folder $CI_PROJECT_DIR/.cache/yarn
    - yarn install
  script:
    - yarn build
    - mv public public_org && mv dist public
    - find public -type f \( -name \*.html -or -name \*.css -or -name \*.js \) | xargs -I {} sh -c "gzip -k {}"
  artifacts:
    paths:
      - public

やっていることは、scriptブロックで、

1. yarn buildでアプリをビルド
2. 出力先のdistをpublicディレクトリにリネーム
3. publicディレクトリ以下の.html、.css、.jsファイルをgzip圧縮

という感じです。

これでcurlやブラウザで静的ファイルにアクセスするとgzip圧縮されているはずです。

Gitlab Pagesでgzip圧縮転送を使う方法を見てきました。

CI/CDの設定ファイルに一文追加するだけで、転送量を抑えてダウンロードを早くできるので、ぜひ使ってみてください。