Lagring af kodefragmenter på AWS S3
Stryg for at vise menuen
Vi har oprettet noget HTML-kode, der lader os fodre skildpadden, og i denne kode brugte vi et billede, som vi uploadede til AWS S3 i en offentlig bucket. Du har måske bemærket, at det var ret besværligt at læse koden direkte derfra på grund af det store antal styles.
Dette fører os til idéen om, at vi også kan uploade bestemte kodefragmenter til AWS S3, ligesom vi gør med billeder. For eksempel ville det i vores tilfælde være meget praktisk at uploade CSS-styles til vores HTML-sider eller applikationer til AWS, hvilket hjælper os med at holde koden renere og mere organiseret.
Håndtering af disse styles vil være simpelt, fordi hvis vi har brug for at opdatere styles på tværs af alle forekomster, kan vi blot redigere et par linjer kode i S3-filen, hvilket anvender ændringerne på alle sider, der refererer til linket.
Lad os se på den style-fil, jeg vil uploade til lageret:
style.css
For at tilføje en fil med styles til AWS S3, skal vi først oprette filen og uploade den til vores offentlige bucket:
For at anvende disse CSS-stilarter i din HTML-kode, skal du blot bruge en enkel syntaks:
<link rel="stylesheet" href="link to your CSS styles here">
Når vi linker til vores stilarter, vil denne linje se sådan ud:
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Lad os se, hvor meget vores kode bliver reduceret efter disse ændringer, og hvordan den nu ser ud:
index.html
Hvis du klikker og følger dette link, vil du se indholdet af denne fil, specifikt de styles jeg tidligere har skrevet. På denne måde kan både vi og besøgende på vores hjemmeside se de styles, der er gemt på AWS, og måske ønsker de at låne dem fra os.
Det er også værd at bemærke, at vi kan uploade JavaScript-scripts til S3. Selvom dette ikke er best practice, fordi scripts ofte kræver redigering og arbejde med dem, er vi i dette tilfælde i gang med at lære, så lad os gøre det for at gøre vores kode endnu mere strømlinet!
Nedenfor er scriptet, vi vil uploade til vores offentlige bucket:
script.js
Nu skal vi uploade JavaScript-script-filen til vores offentlige bucket:
Nu skal vi bruge følgende syntaks for at tilføje scriptet til koden via linket:
<script src="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
Efter at have tilføjet scriptet fra AWS S3, vil vores kode til turtle se sådan ud:
index.html
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Lagring af kodefragmenter på AWS S3
Vi har oprettet noget HTML-kode, der lader os fodre skildpadden, og i denne kode brugte vi et billede, som vi uploadede til AWS S3 i en offentlig bucket. Du har måske bemærket, at det var ret besværligt at læse koden direkte derfra på grund af det store antal styles.
Dette fører os til idéen om, at vi også kan uploade bestemte kodefragmenter til AWS S3, ligesom vi gør med billeder. For eksempel ville det i vores tilfælde være meget praktisk at uploade CSS-styles til vores HTML-sider eller applikationer til AWS, hvilket hjælper os med at holde koden renere og mere organiseret.
Håndtering af disse styles vil være simpelt, fordi hvis vi har brug for at opdatere styles på tværs af alle forekomster, kan vi blot redigere et par linjer kode i S3-filen, hvilket anvender ændringerne på alle sider, der refererer til linket.
Lad os se på den style-fil, jeg vil uploade til lageret:
style.css
For at tilføje en fil med styles til AWS S3, skal vi først oprette filen og uploade den til vores offentlige bucket:
For at anvende disse CSS-stilarter i din HTML-kode, skal du blot bruge en enkel syntaks:
<link rel="stylesheet" href="link to your CSS styles here">
Når vi linker til vores stilarter, vil denne linje se sådan ud:
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Lad os se, hvor meget vores kode bliver reduceret efter disse ændringer, og hvordan den nu ser ud:
index.html
Hvis du klikker og følger dette link, vil du se indholdet af denne fil, specifikt de styles jeg tidligere har skrevet. På denne måde kan både vi og besøgende på vores hjemmeside se de styles, der er gemt på AWS, og måske ønsker de at låne dem fra os.
Det er også værd at bemærke, at vi kan uploade JavaScript-scripts til S3. Selvom dette ikke er best practice, fordi scripts ofte kræver redigering og arbejde med dem, er vi i dette tilfælde i gang med at lære, så lad os gøre det for at gøre vores kode endnu mere strømlinet!
Nedenfor er scriptet, vi vil uploade til vores offentlige bucket:
script.js
Nu skal vi uploade JavaScript-script-filen til vores offentlige bucket:
Nu skal vi bruge følgende syntaks for at tilføje scriptet til koden via linket:
<script src="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
Efter at have tilføjet scriptet fra AWS S3, vil vores kode til turtle se sådan ud:
index.html
Tak for dine kommentarer!
