Зберігання фрагментів коду на AWS S3

У попередньому розділі ми написали HTML код, який дозволяє нам годувати черепаху, і в цьому коді ми використовували зображення, яке ми завантажили на AWS S3 в публічний бакет. Але ви могли помітити, що читати код звідти було досить незручно через велику кількість стилів.

Я підводжу до того, що ми також можемо завантажувати певні фрагменти коду на AWS S3, так само як і зображення. Наприклад, у нашому випадку було б зручно завантажити CSS стилі для наших HTML сторінок або додатків на AWS, щоб зберегти місце в коді.

Примітка

Ці стилі буде досить легко керувати, тому що якщо нам потрібно змінити стилі всюди, де вони використовуються, ми просто змінюємо кілька рядків коду у файлі на S3, таким чином змінюючи стилі на всіх сторінках, де ми посилалися на посилання. Дуже зручно!

Давайте подивимося на файл стилів, який я хочу завантажити в сховище:

Примітка

Ці стилі знаходяться у вкладці index.css. Переконайтеся, що вибрали правильну вкладку.

Щоб додати файл зі стилями на AWS S3, нам спочатку потрібно створити цей файл і завантажити його в наш публічний бакет:

Тепер, щоб використовувати ці CSS стилі в HTML коді, нам потрібно використовувати дуже простий синтаксис:

У випадку посилання на наші стилі, цей рядок виглядатиме так:

Давайте подивимося, наскільки наш код буде скорочено після наших змін і як він виглядатиме зараз:

Якщо ви натиснете і перейдете за цим посиланням, ви побачите вміст цього файлу, а саме стилі, які я написав раніше. Таким чином, як ми, так і користувачі нашого сайту можуть побачити, які стилі зберігаються на AWS і можуть захотіти їх запозичити у нас.

Також варто зазначити, що ми можемо також завантажувати JavaScript скрипти на S3. Це не найкраща практика, оскільки скрипти часто потребують редагування та роботи з ними, але в нашому випадку ми вчимося, тому давайте зробимо це і ще більше оптимізуємо наш код!

Нижче наведено скрипт, який ми будемо завантажувати в наш публічний бакет:

Тепер нам потрібно завантажити файл JavaScript скрипту в наш публічний бакет:

А тепер нам потрібно використати наступний синтаксис, щоб додати скрипт до коду через посилання:

Після додавання скрипту з AWS S3, наш код для черепахи виглядатиме так:

Примітка

До речі, ви можете ще раз переглянути скрипт безпосередньо за посиланням.

Код виглядає добре, чи не так?

У наступних розділах ми дізнаємося, як розміщувати цілі HTML-сторінки та створювати багатосторінкові веб-сайти за допомогою AWS S3, тож залишайтеся з нами!