it-swarm.com.de

So stellen Sie sicher, dass CloudFront index.html niemals im S3-Bucket zwischenspeichert

Ich habe eine React-App, die auf einem S3-Bucket gehostet wird. Der Code wird durch Verwendung von yarn build (eine App auf der Basis von Create-React-App) minimiert. Der build Ordner sieht ungefähr so ​​aus:

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

Ich möchte nie, dass index.html zwischengespeichert wird. Wenn ich den Code aktualisiere (wodurch das Hex-Suffix in main.*.js aktualisiert wird), muss der Benutzer beim nächsten Besuch die <script src>-Änderung in index.html abholen, um auf den aktualisierten Code zu verweisen.

In CloudFront kann ich nur Pfade ausschließen und das Ausschließen von "/" scheint nicht richtig zu funktionieren. Ich bekomme ein seltsames Verhalten, wenn ich den Code ändere, und wenn ich auf "Aktualisieren" klicke, sehe ich es. Wenn ich jedoch Chrome beendet habe und zurück gehe, sehe ich aus irgendeinem Grund sehr veralteten Code.

Ich möchte nicht bei jedem Code-Release (über CodeBuild) eine Ungültigkeitserklärung auslösen müssen. Gibt es einen anderen Weg? Ich denke, eine der Herausforderungen besteht darin, dass ich, da dies eine App ist, die React Router verwendet, einige Tricks machen muss, indem ich das Fehlerdokument auf index.html setze und einen HTTP-Status 200 anstelle von 403 erzwinge.

27
ffxsam

Wenn Sie niemals möchten, dass index.html zwischengespeichert wird, setzen Sie den Cache-Control: max-age=0-Header nur für diese Datei. CloudFront sendet eine Anfrage an Ihren Origin S3-Bucket bei jeder -Anforderung zurück, es klingt jedoch wie gewünscht.

Wenn Sie längere Verfallszeiten festlegen und den CloudFront-Cache manuell ungültig machen möchten, können Sie * oder /* als Invalidierungspfad verwenden (nicht /, wie Sie bereits erwähnt haben). Dies kann bis zu 15 Minuten dauern, bis alle CloudFront Edge-Knoten auf der ganzen Welt die Änderungen in Ihrem Origin widerspiegeln.

27
Luke Peterson

Hier ist der Befehl, den ich ausgeführt habe, um die Cache-Kontrolle für meine index.html-Datei festzulegen, nachdem ich neue Dateien nach S3 hochgeladen und Cloudfront ungültig gemacht hatte:

aws s3 cp s3://bucket/index.html s3://bucket/index.html --metadata-directive REPLACE --cache-control max-age=0
5
chadhamre

Eine Lösung basierend auf der CloudFront-Konfiguration:

Wechseln Sie zu Ihrer CloudFront-Distribution auf der Registerkarte "Behavior" und erstellen Sie ein neues Verhalten . Geben Sie die folgenden Werte an:

  • Pfadmuster: index.html
  • Objekt-Caching: Anpassen
  • Maximale TTL: 0 (oder ein anderer sehr kleiner Wert)
  • Standard-TTL: 0 (oder ein anderer sehr kleiner Wert)

Speichern Sie diese Konfiguration.

CloudFront speichert index.html nicht mehr im Cache.

0
seza443