Зберігання Фрагментів Коду на AWS S3
Ми створили HTML-код, який дозволяє нам годувати черепаху, і в цьому коді використали зображення, яке ми завантажили на AWS S3 у публічний бакет. Проте ви могли помітити, що читати код безпосередньо звідти було досить незручно через велику кількість стилів.
Це підводить нас до ідеї, що ми також можемо завантажувати окремі фрагменти коду на AWS S3, так само як і зображення. Наприклад, у нашому випадку було б дуже зручно завантажувати CSS-стилі для наших HTML-сторінок або застосунків на AWS, що допоможе нам підтримувати код чистішим і більш організованим.
Керування цими стилями буде простим, оскільки якщо потрібно оновити стилі на всіх сторінках, достатньо відредагувати кілька рядків коду у файлі S3, і зміни застосуються до всіх сторінок, які посилаються на це посилання.
Розглянемо файл стилів, який я хочу завантажити у сховище:
style.css
Щоб додати файл зі стилями до AWS S3, спочатку потрібно створити файл і завантажити його у публічний бакет:
Щоб застосувати ці 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
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
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.55Зберігання Фрагментів Коду на AWS S3
Свайпніть щоб показати меню
Ми створили HTML-код, який дозволяє нам годувати черепаху, і в цьому коді використали зображення, яке ми завантажили на AWS S3 у публічний бакет. Проте ви могли помітити, що читати код безпосередньо звідти було досить незручно через велику кількість стилів.
Це підводить нас до ідеї, що ми також можемо завантажувати окремі фрагменти коду на AWS S3, так само як і зображення. Наприклад, у нашому випадку було б дуже зручно завантажувати CSS-стилі для наших HTML-сторінок або застосунків на AWS, що допоможе нам підтримувати код чистішим і більш організованим.
Керування цими стилями буде простим, оскільки якщо потрібно оновити стилі на всіх сторінках, достатньо відредагувати кілька рядків коду у файлі S3, і зміни застосуються до всіх сторінок, які посилаються на це посилання.
Розглянемо файл стилів, який я хочу завантажити у сховище:
style.css
Щоб додати файл зі стилями до AWS S3, спочатку потрібно створити файл і завантажити його у публічний бакет:
Щоб застосувати ці 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
Дякуємо за ваш відгук!
