Search code examples
reactjsamazon-s3react-reduxamazon-cloudfront

react app hosted in s3 doesn't update after deploy


I have a website hosted on S3 with CloudFront. I already deploy several times and work but now it does not update the s3 bucket after I deploy. I've used npm audit fix to check the dependencies and fixing the dependencies. Furthermore, I've used npm cache clean --force and deleted the package-lock.json and after that I deployed it, but it didn't work either.

Command use for deployment:

npm run build && aws s3 sync build/ s3://host

package.json

{
  "name": "dashboard",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fnando/cpf": "^0.1.1",
    "@rocketseat/unform": "^1.5.1",
    "axios": "^0.19.0",
    "date-fns": "^2.14.0",
    "history": "^4.9.0",
    "immer": "^3.2.0",
    "lodash": "^4.17.20",
    "polished": "^3.4.1",
    "prop-types": "^15.7.2",
    "react": "^16.9.0",
    "react-datepicker": "^2.16.0",
    "react-dom": "^16.9.0",
    "react-icons": "^3.7.0",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.3",
    "react-select": "^3.0.4",
    "react-skeleton-loader": "^1.0.4",
    "react-toastify": "^5.3.2",
    "reactotron-react-js": "^3.3.2",
    "reactotron-redux": "^3.1.1",
    "reactotron-redux-saga": "^4.2.2",
    "redux": "^4.0.4",
    "redux-persist": "^5.10.0",
    "redux-saga": "^1.0.5",
    "styled-components": "^4.3.2",
    "yup": "^0.27.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-plugin-root-import": "^6.4.1",
    "customize-cra": "^0.5.0",
    "prettier": "^1.18.2",
    "react-app-rewired": "^2.1.3"
  }
}

Solution

  • It's likely Cloudfront caching the previous deployment.

    You can either change your cache settings to disable caching entirely, or run an invalidation on your distribution to effectively purge the cache.

    aws cloudfront create-invalidation --distribution-id distribution_ID --paths "/*"