Cách đặt CloudFront không bao giờ lưu bộ nhớ cache index.html trên thùng S3

Question

Tôi có ứng dụng React được lưu trữ trên thùng S3. Mã được rút gọn bằng cách sử dụng yarn build (đó là ứng dụng dựa trên ứng dụng tạo phản ứng). Thư mục build trông giống như sau:

build 
├── asset-manifest.json 
├── favicon.ico 
├── images 
│   ├── map-background.png 
│   └── robot-icon.svg 
├── index.html 
├── js 
│   ├── fontawesome.js 
│   ├── packs 
│   │   ├── brands.js 
│   │   ├── light.js 
│   │   ├── regular.js 
│   │   └── solid.js 
│   └── README.md 
├── service-worker.js 
└── static 
    ├── css 
    │   ├── main.bf27c1d9.css 
    │   └── main.bf27c1d9.css.map 
    └── js 
     ├── main.8d11d7ab.js 
     └── main.8d11d7ab.js.map 

Tôi không bao giờ muốn index.html để được lưu trữ, bởi vì nếu tôi cập nhật mã (gây hậu tố hex trong main.*.js để cập nhật), tôi cần lần sau của người dùng để chọn lên trên <script src> thay đổi trong index.html để trỏ đến mã được cập nhật.

Trong CloudFront, tôi chỉ có thể loại trừ đường dẫn và loại trừ "/" dường như không hoạt động bình thường. Tôi nhận được hành vi kỳ lạ nơi tôi thay đổi mã, và nếu tôi nhấn làm mới, tôi nhìn thấy nó, nhưng nếu tôi bỏ Chrome và quay trở lại, tôi thấy mã rất lỗi thời vì một lý do nào đó.

Tôi không muốn kích hoạt việc vô hiệu hóa trên mọi bản phát hành mã (thông qua CodeBuild). Có cách nào khác không? Tôi nghĩ một trong những thách thức là vì đây là một ứng dụng sử dụng React Router, tôi phải thực hiện một số thủ thuật bằng cách đặt tài liệu lỗi thành index.html và buộc trạng thái HTTP 200 thay vì 403.

Answer 1

Nếu bạn không bao giờ muốn index.html để được lưu vào bộ nhớ cache, đặt tiêu đề Cache-Control: max-age=0 chỉ trên tệp đó. CloudFront sẽ gửi yêu cầu trở lại thùng S3 gốc của bạn theo số mọi yêu cầu, nhưng có vẻ như đây là hành vi mong muốn.

Nếu bạn đang muốn thiết lập thời gian hết hạn lâu hơn và làm mất hiệu lực bộ nhớ cache CloudFront bằng tay, bạn có thể sử dụng một * hoặc /* như con đường huỷ bỏ hiệu lực của bạn (không / như bạn đã đề cập). Điều này có thể mất đến 15 phút cho tất cả các nút cạnh CloudFront trên toàn thế giới để phản ánh những thay đổi trong nguồn gốc của bạn.