Speichern von Codefragmenten auf AWS S3
Wir haben einen HTML-Code erstellt, mit dem wir die Schildkröte füttern können. In diesem Code haben wir ein Bild verwendet, das wir in einen öffentlichen Bucket auf AWS S3 hochgeladen haben. Allerdings ist Ihnen vielleicht aufgefallen, dass das direkte Lesen des Codes von dort ziemlich umständlich war, da es sehr viele Styles gab.
Daraus ergibt sich die Idee, dass wir auch bestimmte Code-Snippets auf AWS S3 hochladen können, ähnlich wie wir es mit Bildern tun. In unserem Fall wäre es beispielsweise sehr praktisch, CSS-Styles für unsere HTML-Seiten oder Anwendungen auf AWS hochzuladen, um den Code übersichtlicher und besser organisiert zu halten.
Die Verwaltung dieser Styles ist einfach, denn wenn wir die Styles in allen Instanzen aktualisieren müssen, können wir einfach einige Zeilen Code in der S3-Datei bearbeiten. Die Änderungen werden dann auf alle Seiten angewendet, die auf den Link verweisen.
Sehen wir uns die Style-Datei an, die ich in den Speicher hochladen möchte:
style.css
Um eine Datei mit Styles zu AWS S3 hinzuzufügen, muss die Datei zunächst erstellt und anschließend in unseren öffentlichen Bucket hochgeladen werden:
Um diese CSS-Stile in Ihrem HTML-Code anzuwenden, ist lediglich eine einfache Syntax erforderlich:
<link rel="stylesheet" href="link to your CSS styles here">
Beim Verknüpfen mit unseren Stilen sieht diese Zeile folgendermaßen aus:
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Betrachten wir, wie stark unser Code nach diesen Änderungen reduziert wird und wie er jetzt aussieht:
index.html
Wenn Sie auf diesen Link klicken und ihm folgen, sehen Sie den Inhalt dieser Datei, insbesondere die zuvor erstellten Styles. Auf diese Weise können sowohl wir als auch die Besucher unserer Website die auf AWS gespeicherten Styles einsehen und eventuell von uns übernehmen.
Es ist ebenfalls erwähnenswert, dass wir JavaScript-Skripte auf S3 hochladen können. Obwohl dies nicht die beste Praxis ist, da Skripte häufig bearbeitet werden müssen und mit ihnen gearbeitet wird, befinden wir uns in unserem Fall im Lernprozess. Daher werden wir dies tun, um unseren Code weiter zu optimieren!
Nachfolgend das Skript, das wir in unseren öffentlichen Bucket hochladen werden:
script.js
Nun muss die JavaScript-Skript-Datei in unseren öffentlichen Bucket hochgeladen werden:
Nun muss die folgende Syntax verwendet werden, um das Skript über den Link in den Code einzufügen:
<script src="https://content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
Nach dem Hinzufügen des Scripts von AWS S3 sieht unser Code für die Turtle wie folgt aus:
index.html
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you explain how to make a file public in an AWS S3 bucket?
What are the benefits of separating CSS and JavaScript into different files?
Is it safe to link scripts and styles directly from AWS S3 in production?
Awesome!
Completion rate improved to 4.55Speichern von Codefragmenten auf AWS S3
Swipe um das Menü anzuzeigen
Wir haben einen HTML-Code erstellt, mit dem wir die Schildkröte füttern können. In diesem Code haben wir ein Bild verwendet, das wir in einen öffentlichen Bucket auf AWS S3 hochgeladen haben. Allerdings ist Ihnen vielleicht aufgefallen, dass das direkte Lesen des Codes von dort ziemlich umständlich war, da es sehr viele Styles gab.
Daraus ergibt sich die Idee, dass wir auch bestimmte Code-Snippets auf AWS S3 hochladen können, ähnlich wie wir es mit Bildern tun. In unserem Fall wäre es beispielsweise sehr praktisch, CSS-Styles für unsere HTML-Seiten oder Anwendungen auf AWS hochzuladen, um den Code übersichtlicher und besser organisiert zu halten.
Die Verwaltung dieser Styles ist einfach, denn wenn wir die Styles in allen Instanzen aktualisieren müssen, können wir einfach einige Zeilen Code in der S3-Datei bearbeiten. Die Änderungen werden dann auf alle Seiten angewendet, die auf den Link verweisen.
Sehen wir uns die Style-Datei an, die ich in den Speicher hochladen möchte:
style.css
Um eine Datei mit Styles zu AWS S3 hinzuzufügen, muss die Datei zunächst erstellt und anschließend in unseren öffentlichen Bucket hochgeladen werden:
Um diese CSS-Stile in Ihrem HTML-Code anzuwenden, ist lediglich eine einfache Syntax erforderlich:
<link rel="stylesheet" href="link to your CSS styles here">
Beim Verknüpfen mit unseren Stilen sieht diese Zeile folgendermaßen aus:
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Betrachten wir, wie stark unser Code nach diesen Änderungen reduziert wird und wie er jetzt aussieht:
index.html
Wenn Sie auf diesen Link klicken und ihm folgen, sehen Sie den Inhalt dieser Datei, insbesondere die zuvor erstellten Styles. Auf diese Weise können sowohl wir als auch die Besucher unserer Website die auf AWS gespeicherten Styles einsehen und eventuell von uns übernehmen.
Es ist ebenfalls erwähnenswert, dass wir JavaScript-Skripte auf S3 hochladen können. Obwohl dies nicht die beste Praxis ist, da Skripte häufig bearbeitet werden müssen und mit ihnen gearbeitet wird, befinden wir uns in unserem Fall im Lernprozess. Daher werden wir dies tun, um unseren Code weiter zu optimieren!
Nachfolgend das Skript, das wir in unseren öffentlichen Bucket hochladen werden:
script.js
Nun muss die JavaScript-Skript-Datei in unseren öffentlichen Bucket hochgeladen werden:
Nun muss die folgende Syntax verwendet werden, um das Skript über den Link in den Code einzufügen:
<script src="https://content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
Nach dem Hinzufügen des Scripts von AWS S3 sieht unser Code für die Turtle wie folgt aus:
index.html
Danke für Ihr Feedback!
