Statische S3-Seiten ohne HTML-Erweiterung

70

Beim Bereitstellen einer statischen Site außerhalb von Amazon S3 frage ich mich, wie die .htmlDateierweiterungen für jede Seite entfernt werden können.

Gerade habe ich:

mysite.com/             # works fine, serves index.html
mysite.com/mypage.html  # works fine
mysite.com/mypage       # doesn't work

Der Fehler für /mypagezeigt:

404 Not Found

Code: NoSuchKey
Message: The specified key does not exist.
Key: mypage
RequestId: 1089D7A26EFED9AD
HostId: Ud8cFy8Zl1mJ+oFjFOmU1Xacq9+v70KuaJfOc4nFMEPhd66AkLhr4Pj5u0QH6Gog

Ich habe versucht, das auf Content-Typezu setzen text/html, wie in diesem Beitrag beschrieben , aber es behebt das Problem nicht für mich.

Wie kann ich /mypagedie Datei /mypage.htmlauf S3 bereitstellen?

html  amazon-web-services  amazon-s3 
— Tyler
quelle

Antworten:

84

Ich hatte gerade dieses Problem und möchte die Lösung teilen:

Sie müssen die Metadaten der Datei Content-typeauf text/htmlUND setzen, um die Datei umzubenennen und .htmldas Ende zu entfernen .

Auf diese Weise können Sie jede Seite ohne die Dateierweiterung erreichen.

— André Lucas
quelle
Wie bearbeiten Sie den Content-typeHeader in den Befehlszeilentools? Oder in der Konsole von S3 oder Cloudfront?
— Costa
3
@Costa, ich hatte Erfolg beim Ändern des Content-typeHeaders mithilfe der folgenden Elemente in der Konsole (Windows): aws s3 cp C:\folder\file s3://folder/file --content-type "text/html" Referenz: docs.aws.amazon.com/cli/latest/reference/s3/cp.html
— Jeremy
7
Ich habe diese Lösung im Internet gesehen, aber das Entfernen der Dateierweiterung fühlt sich für mich schmutzig an. Ist dies immer noch die empfohlene Methode für hübsche URLs in S3?
— Dave Roma
1
Dies hat nicht funktioniert, bis ich den HTML-Header <!doctype html>von dem <html xmlns="http://www.w3.org/1999/xhtml" >, den ich verwendet habe, geändert habe .
— Patrick Walton
1
Ich habe zu viele HTML-Dateien. Gibt es ein automatisiertes Skript, um HTML-Dateien vom Dateinamen zu entfernen?
— Anirudh
14

Im Allgemeinen können Sie unter Amazon S3 saubere URLs erstellen:

  1. Laden Sie die Auslagerungsdatei mit einem "sauberen" Namen hoch, z. B. mypageund setzen Sie den Content-TypeSatz auf text/html(als den Beitrag, auf den Sie verlinkt haben). Sie müssen die Datei auf Ihrem System umbenennen, bevor Sie sie hochladen, um keine Erweiterung zu haben, oder sie nach dem Hochladen ohne die Erweiterung in S3 umbenennen . Der Dateiname in S3 darf keine Erweiterung haben.

  2. Erstellen Sie einen Ordner mit dem Namen "sauber" und laden Sie die Auslagerungsdatei in diesen Ordner hoch, wobei der Name auf das Standardindexdokument festgelegt ist , z index.html. Sie müssen den Standardnamen des Indexdokuments überprüfen. Dies wird festgelegt, wenn Sie Ihren Bucket als Website konfigurieren, kann aber später geändert werden.

Wenn dies nicht funktioniert, können Sie ein neues Null-Byte-Objekt mit dem Namensschlüssel hochladen mypageund dann eine Seitenumleitung festlegen, indem Sie den Website Redirect LocationSchlüssel mit einem Wert mypage.htmlin den Metadaten während des Upload-Vorgangs angeben. Siehe Konfigurieren einer Webseitenumleitung in der Amazon S3-Dokumentation.

Sie können auch die Datei in ein neues Objekt mit dem Namen kopieren mypagemit Content-TypeSatz text/html.

— jamtin
quelle
1
Der Null-Byte-Objektansatz führt eine Umleitung von mypagenach durch mypage.html, sodass die .htmlErweiterung nicht wirklich entfernt wird . Ich habe auch beide Ansätze in 1 & 2 ausprobiert und keiner funktioniert für mich. Irgendwelche Ideen, warum das so sein könnte?
— Tyler
Mit der Weiterleitung habe ich Ihre Frage "Wie kann ich / mypage dazu bringen, die Datei unter /mypage.html bereitzustellen" verstanden? Sie sagen unten, dass mein Ansatz in (2) funktioniert. Das "Indexdokument" kann auf alles gesetzt werden (ich konnte in meiner Antwort keinen Link für die Amazon-Dokumente hinzufügen). Wie haben Sie für Ansatz (1) die Seite benannt, die Sie bedienen möchten?
— Jamtin
Wie änderst du den Inhaltstyp auf s3? Oder Cloudfront?
— Costa
8

Löschen Sie, wie einige bereits gesagt haben, die Dateierweiterung, aber befolgen Sie dann einfach die folgenden Schritte:

  1. Gehen Sie zu Ihrem Amazon S3-Bucket.
  2. Aktivieren Sie das Kontrollkästchen neben der Datei, die ordnungsgemäß verknüpft werden soll.
  3. Klicken Sie rechts auf "Eigenschaften". Ein neuer Bereich wird angezeigt. Es wird "Objekt: Dateiname" sagen
  4. Klicken Sie auf die Registerkarte Metadaten, ändern Sie die Standardeinstellung, die für mich "binär / Oktett-Stream" war. Der neue Wert sollte "text / html" sein.
  5. Sparen.

Und wie bereits erwähnt, stellen Sie sicher, dass Ihre neuen Links in Ihrem HTML-Code nicht mehr die Dateierweiterung .html enthalten. Das hat bei mir funktioniert.

— BrotherDonkey
quelle
6

Das Erstellen eines Ordners bei /mypageund das index.htmlEinfügen in diesen Ordner hat bei mir nicht funktioniert. Es stellt sich heraus, dass dies daran lag, dass die Einstellung "Indexdokument" des Buckets geändert wurde in myindex.html:

Bucket Properties --> Static Website Hosting --> Enable Website Hosting --> Index Document

Dies wurde tatsächlich auch auf alle Unterordner angewendet, sodass es /mypage/index.htmlauf der /mypageRoute nicht gesucht wurde . es suchte /mypage/myindex.htmlstattdessen.

Ich habe die myindex.htmlEinstellung einfach wieder geändert index.htmlund die Standardordnerstruktur funktioniert. Es hätte genauso gut funktioniert, myindex.htmlDateien überall mit dieser Einstellung zu verwenden, aber das schien verwirrend, ohne wirklich zu gewinnen.

Ich weiß immer noch nicht, warum das Setzen von Content-Typeauf text/htmlnicht funktioniert - es scheint so, als ob es sollte, da dies an mehreren Stellen erwähnt wird.

Wie auch immer, das Problem wird gelöst, indem die Buckets Index Documentund alle zu verwendenden Unterordner geändert werden index.html.

— Tyler
quelle
1
Ich weiß nicht, ob sich etwas geändert hat, aber es gibt keine Optionen, um die Standardindexseite für etwas anderes als den Bucket selbst festzulegen. Außerdem können Sie die Eigenschaften für Verzeichnisse in den Buckets nicht festlegen. Diese Technik scheint also nicht zu funktionieren. Ich würde mich über eine Klarstellung freuen, wenn diese Antwort tatsächlich noch funktioniert. Vielen Dank.
— Hairgami_Master
Ich habe es auch versucht und es funktioniert nicht. Wenn Sie index.html oder was auch immer als "Indexdokument" verwenden, gilt diese Konfiguration nicht für Unterordner.
— Gianluca Casati
4

Mit der AWS CLI:

Angenommen, Sie haben die Erweiterung aus dem Dateinamen entfernt und AWS CLI mit Ihrem Konto eingerichtet, können Sie die Metadaten der Datei festlegen, indem Sie diesen Befehl in Ihrer Konsole ausführen:

aws s3 cp /path/to/file s3://yourwebsite.com --content-type 'text/html' --acl public-read
— Captainblack
quelle
0

Sehr einfache und getestete Lösung. ::

  1. Datei umbenennen, Erweiterung (.html) aus Dateiname entfernen. (Beispiel: Galerie.html in Galerie ändern).
  2. Eigenschaften der Datei bearbeiten. Fügen Sie einen Metadatenschlüssel hinzu (Inhaltstyp = Text / HTML und Inhaltssprache = HTML).
  3. Speichern und testen Sie über eine Browser-URL wie websiteurl.com/gallery.
— Nirmal Bajpai
quelle
0

Wenn Sie eine JSON-Datei hochladen möchten. Speichern Sie die JSON-Datei ohne Erweiterung auf Ihrem lokalen Computer.

Verwenden Sie in der AWS CLI den folgenden Befehl: 

  aws s3 mb s3://<s3bucketname>

  #output 
  make_bucket: s3bucketname

  aws s3 cp path\to\local\file s3://<s3bucketname>  --content-type 'application/json' --acl public-read

  #output
  upload: .\<filename> to s3://<s3bucketname>/<filename>

Jetzt können Sie über die URL auf die Datei zugreifen:

https://<s3bucketname>.s3.amazonaws.com/<filename>

— leidenschaftliche evops
quelle
0

Ich habe ein automatisiertes Skriptbeispiel hinzugefügt, um die Erweiterung * .HTML zu entfernen, und durch Hinzufügen eines Metaobjekts vom Inhaltstyp auf s3 hochgeladen. Ich benutze Javascript, um eine sh-Datei zu erstellen. Ich führe eine sh-Datei aus.

const recursive = require("recursive-readdir");
const fs = require("fs");

(async (params) => {
 let buffer = "aws s3 cp ./out s3://www.Example.com \n";
  await recursive("out", [
    "css",
    "_next",
    "images",
    "static",
    "svg",
    "*.ico",
    "*.txt",
    "*.xml",
    "index.html",
    "404.html",
  ]).then(
    (files) => {
     
    
      for (const file of files) {
        const path = file.substring(file.indexOf("\\") + 1);

        buffer += `aws s3 cp --content-type 'text/html' --metadata-directive REPLACE ./out/${path}  s3://www.example.com/${path} \n`;

        const removeExtension = file.replace(/\.[^/.]+$/, "");

        fs.rename(file, removeExtension, function (err) {
          if (err) console.log("ERROR: " + err);
        });
      }
   
    },
    (error) => {
      console.error("something exploded", error);
    }
  );

  


  fs.writeFileSync("deploy.sh", "echo 'copy your files' \n");
  fs.appendFileSync("deploy.sh", buffer);

  fs.appendFileSync("deploy.sh", 'echo "Invalidation cloudfront"');
  fs.appendFileSync("deploy.sh", 'aws cloudfront create-invalidation --distribution-id XXXXXXX --paths "/*" ');





})();
— Cemil Birinci
quelle
-1

Der Grund, warum es ohne den abschließenden Schrägstrich in der Stammdomäne funktioniert, ist, dass Sie diese Struktur für Ihren Hauptindex haben:

mysite.com/index.html

Dann geht der Server und Server die Index-Standardseite, die Folgendes zeigt:

mysite.com/

Wenn Sie nicht möchten, dass der Schrägstrich für alle Ihre Seiten angezeigt wird, sollten Sie dies auch für alle Ihre HTML-Dateien tun. Anstatt von

mysite.com/mypage.html

Tun

mysite.com/mypage/index.html

Anschließend zeigt der Server die Standardindexdatei für den Ordner "mypage" an, die in der URL angezeigt wird

mysite.com/mypage/

— Caio Gomes
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.