VitePress で作成したサイトを、CloudFront と S3 で公開している。
VitePress は、assets ディレクトリ以下に Cache-Control: max-age=31536000,immutable というヘッダーをつけることを推奨している。
https://vitepress.dev/guide/deploy#http-cache-headers
まずは aws s3 sync で S3 にサイトをデプロイした後、aws s3 cp コマンドで assets 以下のファイルに Cache-Control メタデータをつけてみた。
shell
aws s3 sync --delete vitepress/.vitepress/dist s3://${{ env.AWS_TARGET_S3_BUCKET }}/website/public
aws s3 cp \
"s3://${{ env.AWS_TARGET_S3_BUCKET }}/website/public/assets" \
"s3://${{ env.AWS_TARGET_S3_BUCKET }}/website/public/assets" \
--metadata-directive "REPLACE" \
--cache-control "max-age=31536000,immutable" \
しかし、この方法では、Content-Type がすべて binary/octet-stream に変更されてしまった。
Content-Type は変えたくない。
そこで、最初に assets 以下を aws s3 sync でコピーした後、サイト全体を aws s3 sync コマンドでコピーすることにした。
shell
aws s3 sync --delete vitepress/.vitepress/dist/assets s3://${{ env.AWS_TARGET_S3_BUCKET }}/website/public/assets --cache-control max-age=31536000,immutable
aws s3 sync --delete vitepress/.vitepress/dist s3://${{ env.AWS_TARGET_S3_BUCKET }}/website/public
aws s3 sync はファイルサイズが同じファイルはスキップするので、無駄なコピーが発生することはない。