Stockage de Fragments de Code sur AWS S3
Nous avons créé du code HTML qui permet de nourrir la tortue, et dans ce code, nous avons utilisé une image que nous avons téléversé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 une mise à jour des styles sur toutes les instances est nécessaire, il suffira de modifier quelques lignes de code dans le fichier S3, ce qui appliquera les changements à toutes les pages qui référencent ce lien.
Examinons le fichier de styles que je souhaite téléverser dans le stockage :
style.css
Pour ajouter un fichier de styles à AWS S3, il est d'abord nécessaire de créer le fichier puis de le téléverser dans le 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 sera la suivante :
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Examinons la réduction de notre code après ces modifications et son apparence actuelle :
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 manière, 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 poursuivons afin de 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éverser le fichier JavaScript script 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 sera le suivant :
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
Can you explain how to make a file public in an AWS S3 bucket?
What are the benefits of separating CSS and JavaScript into different files?
Is it safe to link scripts and styles directly from AWS S3 in production?
Awesome!
Completion rate improved to 4.55Stockage de Fragments de Code sur AWS S3
Glissez pour afficher le menu
Nous avons créé du code HTML qui permet de nourrir la tortue, et dans ce code, nous avons utilisé une image que nous avons téléversé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 une mise à jour des styles sur toutes les instances est nécessaire, il suffira de modifier quelques lignes de code dans le fichier S3, ce qui appliquera les changements à toutes les pages qui référencent ce lien.
Examinons le fichier de styles que je souhaite téléverser dans le stockage :
style.css
Pour ajouter un fichier de styles à AWS S3, il est d'abord nécessaire de créer le fichier puis de le téléverser dans le 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 sera la suivante :
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Examinons la réduction de notre code après ces modifications et son apparence actuelle :
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 manière, 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 poursuivons afin de 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éverser le fichier JavaScript script 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 sera le suivant :
index.html
Merci pour vos commentaires !
