Cloudfront, EC2 und relative URLs

Question

Dies ist wahrscheinlich eine einfache Frage, aber ich kann nirgendwo eine einfache Antwort finden.

Meine Website ist auf Amazon EC2 gehostet.

Ich möchte Amazon Cloudfront nutzen, um das Laden von Bildern, Javascript und CSS auf meiner Website zu beschleunigen.

Überall auf meiner Website habe ich relative URLs verwendet, um auf die Bilder, Javascript und CSS zu verweisen, die sich auf meinem EC2-Server befinden.

Um CloudFront nutzen zu können, muss ich nun alle meine relativen URLs in absolute URLs ändern, die auf Cloudfront verweisen, oder wird dies automatisch von Amazon/EC2/Cloudfront gehandhabt? Oder, eine bessere Möglichkeit, die Frage zu stellen, ist, kann ich alle meine URLs als relative URLs belassen und trotzdem alle Vorteile von Cloudfront nutzen?

Answer 1

Wenn Sie alles so lassen möchten, wie es ist, können Sie alles durch cloudfront übergeben und Ihre Site als benutzerdefinierten Ursprung einrichten. Dies kann sehr gut funktionieren, wenn Ihre Website größtenteils statisch ist.

Wenn Sie die Cloudfront nutzen möchten, ohne alles zu senden, müssen Sie Ihre relativen URLs auf absolute aktualisieren. CSS-Dateien können relative URLs beibehalten, solange die CSS-Datei über Cloudfront bereitgestellt wird.

Answer 2

Kurze Antwort ist nein, Ihre relativen URLs funktionieren nicht wie erwartet auf CloudFront - abgesehen von dem in Gio Hunt erwähnten Fall, dass sobald Ihre Seite die CSS-Datei lädt, jede relative URL in der CSS-Datei selbst zu CloudFront aufgelöst wird Das ist wahrscheinlich in Ihrem Fall nicht sehr nützlich.

See this answer für eine Lösung SASS verwenden, die ziemlich genau dem entspricht, was ich in der Vergangenheit getan haben:

• I SASS gebraucht - http://sass-lang.com
• ich eine mixin namens cdn.scss mit Inhalten wie $ image_path: "/ images /";
• Importieren Sie das Mixin im Sass-Stil @import "cdn.scss"
• Aktualisieren Sie Bildpfade als solche: background: url ($ image_path + "image.png");
• Auf Deployment ich die $ image_path Variable in der mixin.scss ändern und dann erneut ausführen, sass

Grundsätzlich regenerieren Sie Ihre CSS die CDN (Cloudfront) Basis-URL zu verwenden, indem eine Variable erstellen, die alle Seiten Respekt. Die damit verbundene Schwierigkeit hängt davon ab, wie viele Referenzen und Dateien Sie ändern müssen, aber ein einfaches Suchen und Ersetzen für relative Pfade ist ziemlich einfach.

Viel Glück.