Codefragmenten Opslaan op AWS S3
Veeg om het menu te tonen
We hebben wat HTML-code gemaakt waarmee we de schildpad kunnen voeren, en in deze code hebben we een afbeelding gebruikt die we geüpload hebben naar AWS S3 in een publieke bucket. Je hebt misschien gemerkt dat het direct lezen van de code daaruit vrij onhandig was vanwege het grote aantal stijlen.
Dit brengt ons op het idee dat we ook bepaalde codefragmenten kunnen uploaden naar AWS S3, net zoals we dat met afbeeldingen doen. In ons geval zou het bijvoorbeeld erg handig zijn om CSS-stijlen voor onze HTML-pagina's of applicaties naar AWS te uploaden, zodat we de code schoner en beter georganiseerd houden.
Het beheren van deze stijlen zal eenvoudig zijn, want als we de stijlen op alle instanties willen bijwerken, hoeven we alleen maar een paar regels code in het S3-bestand aan te passen, waarna de wijzigingen worden toegepast op alle pagina's die naar de link verwijzen.
Laten we kijken naar het stijlbestand dat ik wil uploaden naar de opslag:
style.css
Om een bestand met stijlen toe te voegen aan AWS S3, moeten we eerst het bestand aanmaken en uploaden naar onze public bucket:
Om deze CSS-stijlen toe te passen in je HTML-code, gebruik je een eenvoudige syntaxis:
<link rel="stylesheet" href="link to your CSS styles here">
Bij het koppelen aan onze stijlen ziet deze regel er als volgt uit:
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Laten we eens kijken hoeveel onze code is verkleind na deze wijzigingen en hoe het er nu uitziet:
index.html
Als je klikt en deze link volgt, zie je de inhoud van dit bestand, met name de stijlen die ik eerder heb geschreven. Op deze manier kunnen zowel wij als bezoekers van onze website de op AWS opgeslagen stijlen bekijken en misschien willen ze deze van ons overnemen.
Het is ook belangrijk om te vermelden dat we JavaScript-scripts kunnen uploaden naar S3. Hoewel dit niet de beste praktijk is omdat scripts vaak bewerkt moeten worden en ermee gewerkt moet worden, zijn we in ons geval aan het leren, dus laten we het doen om onze code verder te stroomlijnen!
Hieronder staat het script dat we gaan uploaden naar onze publieke bucket:
script.js
Nu moeten we het JavaScript-scriptbestand uploaden naar onze openbare bucket:
Nu moeten we de volgende syntaxis gebruiken om het script via de link aan de code toe te voegen:
<script src="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
Na het toevoegen van het script vanuit AWS S3 ziet onze code voor de turtle er als volgt uit:
index.html
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
