Memorizzazione di Frammenti di Codice su AWS S3
Scorri per mostrare il menu
Abbiamo creato del codice HTML che ci permette di dare da mangiare alla tartaruga, e in questo codice abbiamo utilizzato un'immagine che abbiamo caricato su AWS S3 in un bucket pubblico. Tuttavia, potresti aver notato che leggere il codice direttamente da lì era abbastanza scomodo a causa della grande quantità di stili.
Questo ci porta all'idea che possiamo anche caricare determinati frammenti di codice su AWS S3, proprio come facciamo con le immagini. Ad esempio, nel nostro caso, sarebbe davvero comodo caricare gli stili CSS delle nostre pagine HTML o applicazioni su AWS, aiutandoci a mantenere il codice più pulito e organizzato.
La gestione di questi stili sarà semplice perché, se dovessimo aggiornare gli stili su tutte le istanze, basterà modificare poche righe di codice nel file S3, e ciò applicherà le modifiche a tutte le pagine che fanno riferimento al link.
Vediamo il file di stile che voglio caricare nello storage:
style.css
Per aggiungere un file con stili su AWS S3, è necessario prima creare il file e caricarlo nel nostro public bucket:
Per applicare questi stili CSS nel tuo codice HTML, è sufficiente utilizzare una sintassi semplice:
<link rel="stylesheet" href="link to your CSS styles here">
Nel caso di collegamento ai nostri stili, questa riga apparirà così:
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Vediamo quanto il nostro codice sarà ridotto dopo queste modifiche e come apparirà ora:
index.html
Se clicchi e segui questo link, vedrai il contenuto di questo file, in particolare gli stili che ho scritto in precedenza. In questo modo, sia noi che i visitatori del nostro sito web possiamo visualizzare gli stili archiviati su AWS e potrebbero volerli prendere in prestito da noi.
Vale anche la pena notare che possiamo caricare script JavaScript su S3. Anche se questa non è la pratica migliore perché gli script spesso richiedono modifiche e lavorarci sopra, nel nostro caso stiamo imparando, quindi procediamo per semplificare ulteriormente il nostro codice!
Di seguito è riportato lo script che caricheremo nel nostro bucket pubblico:
script.js
Ora, dobbiamo caricare il file JavaScript script nel nostro bucket pubblico:
Ora, dobbiamo utilizzare la seguente sintassi per aggiungere lo script al codice tramite il link:
<script src="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
Dopo aver aggiunto lo script da AWS S3, il nostro codice per la turtle apparirà così:
index.html
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
