简体   繁体   中英

Issue with transferring site written on Angular 6 to AWS S3 with the use of AWS CloudFront

I ran into a problem when transferring site written on Angular 6 to AWS S3 with the use of AWS CloudFront. Indicators of Google PageSpeed Insights differ from the production site with usage of Nginx and AWS S3 + AWS CloudFront, although it is exactly the same site version. Site on nginx: PageSpeed score of nginx site

Site on AWS S3 + AWS CloudFront: PageSpeed score of AWS S3+AWS CloudFront

I have set AWS S3 storage with public access, and activated Static website hosting. In the “Access Control List” I gave access to “List objects” for “Public Access - Everyone”. Also, I added metadata Cache-Control max-age=31536000 for every file in AWS S3 as it is on the production site. Metadata of each file in AWS S3

After that, I set AWS CloudFront Distribution, in which I connected AWS S3 storage. In the behavior settings I switched on the parameters of Cached HTTP Methods for OPTIONS, Object Caching - Custom where I set Minimum TTL = 31535999, Maximum TTL = 31536000 і Default TTL = 31536000. Also, I switched on the parameter Compress Objects Automatically. Behavior settings of AWS CloudFront Distribution

Also, here is my config nginx for the production site: Nginx configuration of production

Please help me find the problem, maybe I made a mistake while setting everything. I would be grateful for your advice on how to configure AWS S3 + AWS CloudFront.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM