Stockage de fragments de code sur AWS S3
Glissez pour afficher le menu
Nous avons créé un code HTML qui nous permet de nourrir la tortue, et dans ce code, nous avons utilisé une image que nous avons téléchargée sur AWS S3 dans un bucket public. Cependant, vous avez peut-être remarqué que lire le code directement depuis cet emplacement était assez peu pratique en raison du grand nombre de styles.
Cela nous amène à l'idée que nous pouvons également téléverser certains fragments de code sur AWS S3, tout comme nous le faisons avec les images. Par exemple, dans notre cas, il serait vraiment pratique de téléverser les styles CSS de nos pages HTML ou applications sur AWS, ce qui nous aiderait à garder le code plus propre et mieux organisé.
La gestion de ces styles sera simple car si nous avons besoin de mettre à jour les styles sur toutes les instances, il suffit de modifier quelques lignes de code dans le fichier S3, ce qui appliquera les changements à toutes les pages qui référencent ce lien.
Regardons le fichier de style que je souhaite téléverser dans le stockage :
style.css
Pour ajouter un fichier avec des styles à AWS S3, il faut d'abord créer le fichier puis le téléverser dans notre bucket public :
Pour appliquer ces styles CSS dans votre code HTML, il suffit d'utiliser une syntaxe simple :
<link rel="stylesheet" href="link to your CSS styles here">
Dans le cas de la liaison à nos styles, cette ligne ressemblera à ceci :
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Voyons comment notre code sera réduit après ces modifications et à quoi il ressemblera désormais :
index.html
Si vous cliquez et suivez ce lien, vous verrez le contenu de ce fichier, en particulier les styles que j'ai écrits précédemment. De cette façon, nous ainsi que les visiteurs de notre site web pouvons consulter les styles stockés sur AWS et pourraient vouloir les emprunter.
Il convient également de noter que nous pouvons téléverser des scripts JavaScript sur S3. Bien que cela ne soit pas la meilleure pratique car les scripts nécessitent souvent des modifications et une manipulation, dans notre cas, il s'agit d'un apprentissage, donc allons-y pour simplifier davantage notre code !
Ci-dessous se trouve le script que nous allons téléverser dans notre bucket public :
script.js
Nous devons maintenant télécharger le fichier script JavaScript dans notre bucket public :
Nous devons maintenant utiliser la syntaxe suivante pour ajouter le script au code via le lien :
<script src="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
Après avoir ajouté le script depuis AWS S3, notre code pour la tortue ressemblera à ceci :
index.html
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Stockage de fragments de code sur AWS S3
Nous avons créé un code HTML qui nous permet de nourrir la tortue, et dans ce code, nous avons utilisé une image que nous avons téléchargée sur AWS S3 dans un bucket public. Cependant, vous avez peut-être remarqué que lire le code directement depuis cet emplacement était assez peu pratique en raison du grand nombre de styles.
Cela nous amène à l'idée que nous pouvons également téléverser certains fragments de code sur AWS S3, tout comme nous le faisons avec les images. Par exemple, dans notre cas, il serait vraiment pratique de téléverser les styles CSS de nos pages HTML ou applications sur AWS, ce qui nous aiderait à garder le code plus propre et mieux organisé.
La gestion de ces styles sera simple car si nous avons besoin de mettre à jour les styles sur toutes les instances, il suffit de modifier quelques lignes de code dans le fichier S3, ce qui appliquera les changements à toutes les pages qui référencent ce lien.
Regardons le fichier de style que je souhaite téléverser dans le stockage :
style.css
Pour ajouter un fichier avec des styles à AWS S3, il faut d'abord créer le fichier puis le téléverser dans notre bucket public :
Pour appliquer ces styles CSS dans votre code HTML, il suffit d'utiliser une syntaxe simple :
<link rel="stylesheet" href="link to your CSS styles here">
Dans le cas de la liaison à nos styles, cette ligne ressemblera à ceci :
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Voyons comment notre code sera réduit après ces modifications et à quoi il ressemblera désormais :
index.html
Si vous cliquez et suivez ce lien, vous verrez le contenu de ce fichier, en particulier les styles que j'ai écrits précédemment. De cette façon, nous ainsi que les visiteurs de notre site web pouvons consulter les styles stockés sur AWS et pourraient vouloir les emprunter.
Il convient également de noter que nous pouvons téléverser des scripts JavaScript sur S3. Bien que cela ne soit pas la meilleure pratique car les scripts nécessitent souvent des modifications et une manipulation, dans notre cas, il s'agit d'un apprentissage, donc allons-y pour simplifier davantage notre code !
Ci-dessous se trouve le script que nous allons téléverser dans notre bucket public :
script.js
Nous devons maintenant télécharger le fichier script JavaScript dans notre bucket public :
Nous devons maintenant utiliser la syntaxe suivante pour ajouter le script au code via le lien :
<script src="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
Après avoir ajouté le script depuis AWS S3, notre code pour la tortue ressemblera à ceci :
index.html
Merci pour vos commentaires !
