CODEWITHSUNDEEP
reactjsamazon-s3amazon-cloudfront
nomadus
nomadus

Reputation: 909

Deploying reactjs based application to AWS

I have deployed a ReactJS based application to AWS S3 bucket. Additionally, I had to use CloudFront due to react-router issues, please see S3 Static Website Hosting Route All Paths to Index.html. Now, with CloudFront I have to re-create the distribution when I change endpoints (e.g. API host, callback URL etc), is this the way it works?

Upvotes: 0

Views: 730

Answers (3)

Chris Lam
Chris Lam

Reputation: 3614

No you don't have to re-create Cloudfront distribution.

A common practice is to append a hash to the static asset, eg:

<script src="myapp.bundle.js?v=12345678"></script>

The hash is usually the MD5/SHA1 hash of the file. Some may use the timestamp of the time you build the code. So after you update the file content and issue a new deploy, a new hash should be used. Consider the following flow as the client:

  1. A client requests for myapp.bundle.js?v=1
  2. Cache does not exist yet, Cloudfront proxies the request to S3 directly and caches the content.
  3. Cloudfront serves cached content to myapp.bundle.js?v=1 for any subsequent requests.
  4. Now you updated your code and deployed to S3 (with a new hash in your index.html).
  5. Clients now request myapp.bundle.js?v=2 instead
  6. repeat 2-3 and so on

The hash appending is usually done by build tool such as gulp and webpack with plugins.

Upvotes: 1

nomadus
nomadus

Reputation: 909

The best way would be the one which is written here https://medium.com/@omgwtfmarc/if-youre-not-already-doing-this-creating-an-invalidation-for-cloudfront-will-dramatically-speed-7080357c9e8d

Just add invalidation for /index.html

Upvotes: 0

nomadus
nomadus

Reputation: 909

To make this solution complete, create-react-app uses HtmlWebpackPlugin to inject script tag into the index.html file. To append a hash, change the node_modules\react-scripts\config\webpack.config.prod.js as below (added hash:true line)

new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      hash:true
    }),

To see the details, please see the documentation https://github.com/jantimon/html-webpack-plugin#configuration

Upvotes: 0

Related Questions