Statische S3-Seiten ohne HTML-Erweiterung

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?

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.

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.

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.

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.

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

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.

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>

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 "/*" ');





})();

Eine andere mögliche Lösung ist die Verwendung von Lambda @ edge power, Dokumentationsreferenz hier .

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/