Зберігання фрагментів коду на AWS S3
Свайпніть щоб показати меню
Ми створили HTML-код, який дозволяє нам нагодувати черепаху, і в цьому коді використали зображення, яке ми завантажили на AWS S3 у публічний бакет. Проте ви могли помітити, що читати код безпосередньо звідти було досить незручно через велику кількість стилів.
Це підводить нас до ідеї, що ми також можемо завантажувати окремі фрагменти коду на AWS S3, так само як і зображення. Наприклад, у нашому випадку було б дуже зручно завантажити CSS-стилі для наших HTML-сторінок або застосунків на AWS, що допоможе нам зробити код чистішим і більш організованим.
Керування цими стилями буде простим, оскільки якщо нам потрібно оновити стилі на всіх сторінках, достатньо відредагувати кілька рядків коду у файлі на S3, і зміни застосуються до всіх сторінок, які посилаються на це посилання.
Розглянемо файл стилів, який я хочу завантажити у сховище:
style.css
Щоб додати файл зі стилями до AWS S3, спочатку потрібно створити файл і завантажити його у public bucket:
Щоб застосувати ці CSS стилі у вашому HTML коді, потрібно використати простий синтаксис:
<link rel="stylesheet" href="link to your CSS styles here">
У випадку підключення наших стилів цей рядок виглядатиме так:
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Розглянемо, наскільки скоротиться наш код після цих змін і як він виглядатиме зараз:
index.html
Якщо ви натиснете та перейдете за цим посиланням, ви побачите вміст цього файлу, а саме стилі, які я написав раніше. Таким чином, як ми, так і відвідувачі нашого сайту можуть переглядати стилі, збережені на AWS, і можливо, захочуть скористатися ними.
Варто також зазначити, що ми можемо завантажувати JavaScript-скрипти на S3. Хоча це не найкраща практика, оскільки скрипти часто потребують редагування та роботи з ними, у нашому випадку ми навчаємося, тому давайте зробимо це для подальшої оптимізації нашого коду!
Нижче наведено скрипт, який ми завантажимо до нашого публічного бакету:
script.js
Тепер потрібно завантажити файл JavaScript-скрипта до нашого публічного бакета:
Тепер потрібно використати наступний синтаксис, щоб додати скрипт до коду через посилання:
<script src="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
Після додавання скрипта з AWS S3 наш код для turtle виглядатиме так:
index.html
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Зберігання фрагментів коду на AWS S3
Ми створили HTML-код, який дозволяє нам нагодувати черепаху, і в цьому коді використали зображення, яке ми завантажили на AWS S3 у публічний бакет. Проте ви могли помітити, що читати код безпосередньо звідти було досить незручно через велику кількість стилів.
Це підводить нас до ідеї, що ми також можемо завантажувати окремі фрагменти коду на AWS S3, так само як і зображення. Наприклад, у нашому випадку було б дуже зручно завантажити CSS-стилі для наших HTML-сторінок або застосунків на AWS, що допоможе нам зробити код чистішим і більш організованим.
Керування цими стилями буде простим, оскільки якщо нам потрібно оновити стилі на всіх сторінках, достатньо відредагувати кілька рядків коду у файлі на S3, і зміни застосуються до всіх сторінок, які посилаються на це посилання.
Розглянемо файл стилів, який я хочу завантажити у сховище:
style.css
Щоб додати файл зі стилями до AWS S3, спочатку потрібно створити файл і завантажити його у public bucket:
Щоб застосувати ці CSS стилі у вашому HTML коді, потрібно використати простий синтаксис:
<link rel="stylesheet" href="link to your CSS styles here">
У випадку підключення наших стилів цей рядок виглядатиме так:
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Розглянемо, наскільки скоротиться наш код після цих змін і як він виглядатиме зараз:
index.html
Якщо ви натиснете та перейдете за цим посиланням, ви побачите вміст цього файлу, а саме стилі, які я написав раніше. Таким чином, як ми, так і відвідувачі нашого сайту можуть переглядати стилі, збережені на AWS, і можливо, захочуть скористатися ними.
Варто також зазначити, що ми можемо завантажувати JavaScript-скрипти на S3. Хоча це не найкраща практика, оскільки скрипти часто потребують редагування та роботи з ними, у нашому випадку ми навчаємося, тому давайте зробимо це для подальшої оптимізації нашого коду!
Нижче наведено скрипт, який ми завантажимо до нашого публічного бакету:
script.js
Тепер потрібно завантажити файл JavaScript-скрипта до нашого публічного бакета:
Тепер потрібно використати наступний синтаксис, щоб додати скрипт до коду через посилання:
<script src="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
Після додавання скрипта з AWS S3 наш код для turtle виглядатиме так:
index.html
Дякуємо за ваш відгук!
