AWS S3 Deploy sync w/ Cloudfront Invalidation and Cache-Control headers for Create-React-App

1-websyncConfig.js

//Config for s3 websync with cloudfront invalidation
// and Cache-Control headers for a Create-React-App application
//https://www.npmjs.com/package/websync

module.exports = {
  source: "build/",
  target: `s3://yourcompany-us-east-1-${process.env.CI_ENVIRONMENT_NAME}-createreactapp/`,
  invalidateDeletes: true,
  modifiers: {
    "static/**": { CacheControl: "max-age=31536000" },
    "!static/**": { CacheControl: "no-cache" }
  }
};

2-package.json

//...snippet

"devDependencies": {
  "websync": "^0.0.13"
}

3-.gitlab-ci.yml

#...snippet
#Requires AWS credentials setup in gitlab ci/cd config

#Reusable script definition
.deploy-script:
  script: &deploy_script
    - echo "Syncing content files to S3 and invalidating Cloudfront CDN"
    - yarn websync --config ./websyncConfig.js
    - echo "Done!"

#Deploys to development environment when PR is merged to develop branch
deploy-dev:
  stage: deploy
  only:
    - main
  environment:
    name: development
    url: https://createreactapp.development.yourcompany.com/
  script: *deploy_script