Closed13

react-scripts build を改善していく

kyoncykyoncy

create-react-app を使ってて、react-scripts build してbuildディレクトリにバンドル結果が吐き出されるわけだが、そのままS3なりGCSにアップロードするとgzip圧縮してないままアセットを配信することになる

gzip コマンドでとりあえずは圧縮できるが、いい感じに組み込めないか模索する
その上でS3にアップロードする際に content-encoding: gzip とかどういう感じに設定するのかも書き残しておきたい。

(まだ問題を発見した段階なので、これから試す)

kyoncykyoncy

S3 にアップする時、html, css, js だけを gzip 効くようにする必要もある

max-age はどのくらいがよいのかなぁ
css, js は contentHash がつくから結構長く設定しててもコードに変更があれば参照されなくなるだろうけど?
エントリポイントのhtmlは index.html のままだから短めで良さそう

https://qiita.com/seyself/items/43426f57c50021ea55f8

aws s3 sync ./build s3://mybucketname/DIRECTORY_NAME/ --exclude "*" --include "*.js"\
  --acl public-read --cache-control "max-age=600" --content-type "application/javascript"\
  --content-encoding "gzip" --profile PROFILE_NAME
aws s3 sync ./build s3://mybucketname/DIRECTORY_NAME/ --exclude "*" --include "*.css"\
  --acl public-read --cache-control "max-age=600" --content-type "text/css"\
  --content-encoding "gzip" --profile PROFILE_NAME
aws s3 sync ./build s3://mybucketname/DIRECTORY_NAME/ --exclude "*" --include "*.html"\
  --acl public-read --cache-control "max-age=300" --content-type "text/html"\
  --content-encoding "gzip" --profile PROFILE_NAME
kyoncykyoncy

Firebase Hosting はデプロイの際に Brotli で圧縮してくれるっぽい。さすがGoogle

kyoncykyoncy

よく分からんこと

  • gzip圧縮すると *.js.gz ってファイルが作成されるけど *.js ファイルは残すのか
  • GCS, S3 とかで content-encoding: gzip を適用させた上でjsなどを置いた場合、accept-encofing: gzip を見て *.js.gz ファイルがあればそっちを返すようになってるのか

この辺ちゃんと理解しないと

kyoncykyoncy

参考になりそうだから見てる
https://cloud.google.com/storage/docs/transcoding

解凍トランスコーディングってplaneな状態にしてリクエスト元に返すの?どんな意味があるんだ...

解凍トランス コーディングを使用すると、ファイルの圧縮バージョンを Cloud Storage に保存できます。保存時のストレージ コストを抑えながら、圧縮を行わずにファイル自体をリクエスト元に提供できます。これは、お客様にファイルを提供する場合などに便利です。

kyoncykyoncy

S3にアップロードする際にgzip圧縮をする場合

※ CI上だと変わる箇所はあるが、ローカルから色々試した結果。

js, cssにgzip圧縮をかける

gzip ./build/static/js/*.js ./build/static/css/*.css

圧縮したファイルの拡張子から .gz を削除する

ls ./build/static/js/*.gz | sed -e s/\.gz// | awk '{print $1 ".gz " $1}' | xargs -n 2 mv
ls ./build/static/css/*.gz | sed -e s/\.gz// | awk '{print $1 ".gz " $1}' | xargs -n 2 mv

S3へアップロード

aws s3 sync ./build/ s3://{BUCKET_NAME} --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude "*.css" --exclude "*.js"
aws s3 sync ./build/ s3://{BUCKET_NAME} --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude "*.css" --include "*.js" --content-encoding "gzip" --content-type "text/javascript"
aws s3 sync ./build/ s3://{BUCKET_NAME} --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude "*.js" --include "*.css" --content-encoding "gzip" --content-type "text/css"
kyoncykyoncy

ちゃんと記事にしてからCloseする。
たぶん流れとしてはgzipやってる?的なところから入ってCloudFront良いねって感じ(雑)

このスクラップは2021/04/05にクローズされました