Lagring av kodfragment på AWS S3
Svep för att visa menyn
Vi skapade lite HTML-kod som låter oss mata sköldpaddan, och i denna kod använde vi en bild som vi laddade upp till AWS S3 i en publik bucket. Du kanske dock märkte att det var ganska besvärligt att läsa koden direkt därifrån på grund av det stora antalet stilar.
Detta leder oss till idén att vi även kan ladda upp vissa kodfragment till AWS S3, precis som vi gör med bilder. Till exempel, i vårt fall, skulle det vara väldigt smidigt att ladda upp CSS-stilar för våra HTML-sidor eller applikationer till AWS, vilket hjälper oss att hålla koden renare och mer organiserad.
Att hantera dessa stilar kommer vara enkelt eftersom om vi behöver uppdatera stilarna över alla instanser, kan vi bara redigera några rader kod i S3-filen, vilket tillämpas på alla sidor som refererar till länken.
Låt oss titta på stilfilen jag vill ladda upp till lagringen:
style.css
För att lägga till en fil med stilar i AWS S3 behöver vi först skapa filen och ladda upp den till vår offentliga bucket:
För att använda dessa CSS-stilar i din HTML-kod behöver du bara använda en enkel syntax:
<link rel="stylesheet" href="link to your CSS styles here">
När du länkar till våra stilar kommer denna rad att se ut så här:
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Låt oss se hur mycket vår kod kommer att minskas efter dessa ändringar och hur den ser ut nu:
index.html
Om du klickar och följer denna länk, kommer du att se innehållet i denna fil, specifikt de stilar jag skrev tidigare. På detta sätt kan både vi och besökare på vår webbplats se de stilar som lagras på AWS och kanske vilja låna dem från oss.
Det är också värt att notera att vi kan ladda upp JavaScript-skript till S3. Även om detta inte är bästa praxis eftersom skript ofta behöver redigeras och arbetas med, så lär vi oss i vårt fall, så låt oss göra det för att ytterligare effektivisera vår kod!
Nedan är skriptet vi kommer att ladda upp till vår publika bucket:
script.js
Nu behöver vi ladda upp JavaScript-skript-filen till vår publika bucket:
Nu behöver vi använda följande syntax för att lägga till skriptet i koden via länken:
<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 att ha lagt till scriptet från AWS S3 kommer vår kod för turtle att se ut så här:
index.html
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Lagring av kodfragment på AWS S3
Vi skapade lite HTML-kod som låter oss mata sköldpaddan, och i denna kod använde vi en bild som vi laddade upp till AWS S3 i en publik bucket. Du kanske dock märkte att det var ganska besvärligt att läsa koden direkt därifrån på grund av det stora antalet stilar.
Detta leder oss till idén att vi även kan ladda upp vissa kodfragment till AWS S3, precis som vi gör med bilder. Till exempel, i vårt fall, skulle det vara väldigt smidigt att ladda upp CSS-stilar för våra HTML-sidor eller applikationer till AWS, vilket hjälper oss att hålla koden renare och mer organiserad.
Att hantera dessa stilar kommer vara enkelt eftersom om vi behöver uppdatera stilarna över alla instanser, kan vi bara redigera några rader kod i S3-filen, vilket tillämpas på alla sidor som refererar till länken.
Låt oss titta på stilfilen jag vill ladda upp till lagringen:
style.css
För att lägga till en fil med stilar i AWS S3 behöver vi först skapa filen och ladda upp den till vår offentliga bucket:
För att använda dessa CSS-stilar i din HTML-kod behöver du bara använda en enkel syntax:
<link rel="stylesheet" href="link to your CSS styles here">
När du länkar till våra stilar kommer denna rad att se ut så här:
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Låt oss se hur mycket vår kod kommer att minskas efter dessa ändringar och hur den ser ut nu:
index.html
Om du klickar och följer denna länk, kommer du att se innehållet i denna fil, specifikt de stilar jag skrev tidigare. På detta sätt kan både vi och besökare på vår webbplats se de stilar som lagras på AWS och kanske vilja låna dem från oss.
Det är också värt att notera att vi kan ladda upp JavaScript-skript till S3. Även om detta inte är bästa praxis eftersom skript ofta behöver redigeras och arbetas med, så lär vi oss i vårt fall, så låt oss göra det för att ytterligare effektivisera vår kod!
Nedan är skriptet vi kommer att ladda upp till vår publika bucket:
script.js
Nu behöver vi ladda upp JavaScript-skript-filen till vår publika bucket:
Nu behöver vi använda följande syntax för att lägga till skriptet i koden via länken:
<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 att ha lagt till scriptet från AWS S3 kommer vår kod för turtle att se ut så här:
index.html
Tack för dina kommentarer!
