aws 部署angular_使用AWS S3和CloudFront部署的Angular应用程序的缓存清除

aws 部署angular

Caching is a very good way to load our web pages faster on users’ browsers, But that same cache becomes a problem when you have made a new release of your web application and this new release contains few very important bugs fixes or import feature. In that case, You expect your users to start using a new version of your application and you will have to handle cache-busting during such release.

缓存是在用户的浏览器上更快加载网页的一种很好的方法，但是当您发布了Web应用程序的新版本并且此新版本包含一些非常重要的错误修复或导入功能时，相同的缓存就成为一个问题。 在这种情况下，您希望您的用户开始使用新版本的应用程序，并且您将必须在此类发行版中处理缓存清除。

In this post, I am going to share a checklist of things that you should do to bust the cache for an angular app deployed with AWS S3 and Cloudfront.

在这篇文章中，我将分享一份清单，列出为AWS S3和Cloudfront部署的角度应用程序破坏缓存时应该做的事情。

In

在

生成生产版本 (Generate production build)

To deploy any Angular / Reactjs or Vuejs application, we need to generate a build. If you are using angular-CLI, then make sure that you are generating a production build.

要部署任何Angular / Reactjs或Vuejs应用程序，我们需要生成一个构建。 如果使用的是angular-CLI，请确保正在生成生产版本。

ng build --prod

This will set a number of flags, including — output-hashing=all which is required to generate build files with unique hashes. Your build output would look like this.

这将设置许多标志，包括-output-hashing = all，用于生成具有唯一哈希的构建文件。 您的构建输出将如下所示。

chunk {0} runtime.a5b5fc6b303bf4f57659.js (runtime) 2.48 kB [entry] [rendered]
chunk {1} 1.3eaffe77af2f5cf5cc60.js () 34.8 kB [rendered]
chunk {2} 2.54d0561213a13f87c70f.js () 46.7 kB [rendered]
chunk {3} main.4cd54d2a590c84799c74.js (main) 1.65 MB [initial] [rendered]
chunk {4} polyfills.cc0f1f379c61ac8668fe.js (polyfills) 45.5 kB [initial] [rendered]
chunk {5} polyfills-es5.fff1babb6b2975155bf2.js (polyfills-es5) 125 kB [initial] [rendered]
chunk {6} styles.cf3925058aa87715475d.css (styles) 9.13 kB [initial] [rendered]
chunk {7} 7.e18d700696420270428d.js () 1.43 kB [rendered]
chunk {8} 8.3ab11e7762b9eb57c76d.js () 70.3 kB [rendered]
chunk {9} 9.8cee7738482c27030a64.js () 9.49 kB [rendered]
chunk {10} 10.556452c0206871534497.js () 1.49 kB [rendered]
chunk {11} 11.a8474834281dac537636.js () 1.98 kB [rendered]
chunk {12} 12.b6b6e88016581aed72cb.js () 68.4 kB [rendered]
chunk {13} 13.e3cd5edabd462e8a6eee.js () 41.8 kB [rendered]
chunk {14} 14.7648624922bf971c0c67.js () 2.17 kB [rendered]
chunk {15} 15.8583c1e99a953a50803c.js () 1.42 kB [rendered]

Now, Notice that in our dist folder all files are having unique hashes in their names, except one file, index.html

现在，请注意，在我们的dist文件夹中，除一个文件index.html外，所有文件的名称均具有唯一的哈希值。

Now, to deploy this build, we usually upload the dist folder on the s3 bucket and then we create distribution on CloudFront and set origin pointing to our s3 bucket.

现在，要部署此构建，通常需要将dist文件夹上载到s3存储桶中，然后在CloudFront上创建发行版，并将起点设置为指向我们的s3存储桶。

Whenever someone visits your website, a request goes to CDN and since we had deployed a new build with a new file name, it would be cache miss for those files on CDN and they will be retrieved from origin s3 bucket. But, It would be a cache hit on the CDN side for index.html. So that won’t be retrieved from your origin s3 bucket. So your users would not able to see the latest updated version of your app.

每当有人访问您的网站时，都会向CDN发送请求，并且由于我们已经部署了具有新文件名的新版本，因此CDN上的那些文件将被缓存未命中，并且将从原始s3存储桶中检索这些文件。 但是，这将是CDN上index.html的缓存命中。 这样就不会从您的原始s3存储桶中检索到它。 因此，您的用户将看不到您应用程序的最新更新版本。

在您的CloudFront分配中创建行为 (Create Behavior in your CloudFront distribution)

We need to create behavior to tell CloudFront that it should never cache index.html.

我们需要创建行为来告诉CloudFront它永远不要缓存index.html。

Set Minimum TTL, Maximum TTL and Default TTL equals 0. Check the screenshot of the configuration below.

将“最小TTL”，“最大TTL”和“默认TTL”设置为0。请检查以下配置的屏幕截图。

So, This way we have handled cache busting on CloudFront side. But still, we need to bust cache on the user’s browser.

因此，通过这种方式，我们在CloudFront端处理了缓存破坏。 但是，我们仍然需要破坏用户浏览器上的缓存。

Update Index.html

更新Index.html

Add Meta tag with cache-control information in the index.html

在index.html中添加带有缓存控制信息的Meta标签

<meta http-equiv=”Cache-Control” content=”no-cache, no-store, must-revalidate” /><meta http-equiv=”Pragma” content=”no-cache” /><meta http-equiv=”Expires” content=”0" />

This will make sure that index.html is never cached in the user’s browser. So now whenever we make a release, users will get the latest version only.

这将确保index.html永远不会缓存在用户的浏览器中。 因此，现在无论何时发布，用户都只会获得最新版本。

That’s it. Thank you for reading.

而已。 感谢您的阅读。

翻译自: https://medium.com/swlh/cache-busting-for-an-angular-app-deployed-with-aws-s3-and-cloudfront-86cd52359578

aws 部署angular