Уявіть, що ви запускаєте новий сервер, і вже за лічені хвилини він повністю налаштований та готовий до роботи — без жодного ручного втручання. Звучить неймовірно? Але це реальність завдяки інструменту cloud-init. Ця технологія дозволяє автоматично конфігурувати сервер одразу після запуску, передавши всі необхідні параметри через спеціальний конфігураційний файл. В результаті система сама встановить потрібні пакунки, налаштує веб-сервер, оновить систему і навіть запустить ваш додаток — і все це без участі адміністратора.

У сервісі RX-NAME можливості cloud-init доступні прямо в особистому кабінеті. Ви можете скористатися ними у кілька кліків, що робить розгортання серверів максимально швидким, надійним і зручним для розробників та бізнесу.

Приклади використання user-data

Багато ІТ-джерел наводять приклади, як передати конфігураційні дані (user-data) при запуску віртуальної машини для автоматичного налаштування сервера. Часто при цьому використовують скрипти, що встановлюють і налаштовують веб-сервер NGINX, інсталюють Node.js і запускають веб-додатки. Такий підхід дозволяє відразу задати всі необхідні налаштування безпеки, конфігурацію зворотного проксі-сервера, а також автоматичний старт додатка. Як результат, час виведення продукту на ринок суттєво скорочується.

Що таке cloud-init і чому це важливо?

Cloud-init – це універсальний інструмент для автоматичної ініціалізації хмарних серверів. Він дозволяє виконувати цілу низку задач:

• Встановлення пакетів та оновлень. За допомогою cloud-init сервер одразу отримує всі необхідні утиліти (наприклад, curl, git, apt-transport-https), щоб підготувати систему до подальшої роботи.
  
• Налаштування веб-сервера NGINX. Автоматично створюються файли конфігурації для безпечної роботи NGINX та правильного проксіювання запитів до додатка.
  
• Встановлення Node.js та залежностей. Скрипт перевіряє наявність потрібних версій Node.js і npm, за потреби оновлює їх і встановлює необхідні залежності для вашого проєкту.
  
• Автоматичний запуск додатка. За допомогою systemd можна додати unit-файл, який запускатиме ваш додаток як сервіс. Це забезпечує його постійну роботу та автоматичний перезапуск у разі збою.
  

Завдяки цим можливостям cloud-init усуває людський фактор, зменшує ймовірність помилок під час налаштування і значно прискорює розгортання серверів. Докладніше про функції та переваги cloud-init ви можете прочитати в нашому блозі (ми підготували окремий матеріал на цю тему).

Приклад скрипту cloud-init для встановлення Svelte-додатка

Розгляньмо реальний приклад: наведений нижче конфігураційний файл cloud-init виконує автоматичне розгортання та налаштування веб-сервера, Node.js і самого додатка на Svelte. Пройдемося крок за кроком, щоб зрозуміти, що відбувається у цьому сценарії:

1. Встановлення базових пакетів. У секції packages перелічено утиліти (curl, git, apt-transport-https), які потрібно інсталювати відразу на старті. Це гарантує наявність на сервері всіх інструментів для завантаження ключів, додавання репозиторіїв та клонування проєктів.
   
2. Створення конфігураційних файлів. За допомогою директиви write_files скрипт генерує одразу кілька конфігураційних файлів:
   
   • Сніпет HTTP-заголовків безпеки для NGINX: додається набір налаштувань, що захищає сервер від атак типу XSS, clickjacking тощо.
     
   • Конфігурація типового сайту: визначається проста сторінка за замовчуванням для перевірки роботи NGINX (без проксі).
     
   • Конфігурація зворотного проксі для Svelte-додатка: налаштовується сервер, який перенаправляє запити на додаток Svelte (що працює на порту 8080).
     
   • Тестова HTML-сторінка для NGINX: створюється проста сторінка, яка підтверджує коректну роботу веб-сервера.
     
   • Unit-файл systemd для Svelte: додається сервіс, що автоматично запускає Svelte-додаток і забезпечує його перезапуск у разі збою.
     
3. Виконання команд (runcmd). У блоці runcmd перелічено команди, які послідовно налаштовують сервер. Основні етапи:
   
   • Перевірка наявності NGINX та Node.js: Скрипт спочатку з’ясовує, чи встановлено веб-сервер NGINX, Node.js і npm, та записує інформацію про їхні версії в лог-файл.
     
   • Додавання репозиторію та встановлення NGINX: Підключається офіційний репозиторій NGINX для отримання найновішої версії, після чого NGINX встановлюється і перевіряється його робота (виконується рестарт і тест сторінки).
     
   • Встановлення Node.js 20: Якщо Node.js відсутній або застарілий, виконується встановлення актуальної версії (Node.js v20) разом з npm.
     
   • Клонування та збірка Svelte-додатка: Завантажується приклад Svelte-проєкту з GitHub, встановлюються npm-залежності, а права на папку передаються користувачу www-data.
     
   • Запуск додатка через systemd: Створений сервіс Svelte запускається (після daemon-reload), і скрипт робить паузу, щоб додаток повністю запустився. Далі перевіряється його доступність на порту 8080.
     
   • Активація конфігурації проксі в NGINX: Увімкнувши конфігурацію svelte_app_proxy та вимкнувши типовий сайт, скрипт перезапускає NGINX. Перед цим виконується перевірка синтаксису налаштувань (nginx -t), щоб переконатися, що все вірно. На фінальному кроці — контрольний HTTP-запит до 127.0.0.1 (порт 80), який має успішно віддати контент Svelte-додатка через проксі.
     

Нижче наведено повний текст конфігураційного файлу (скрипта) cloud-config у форматі YAML:

#cloud-config packages: – curl – git – apt-transport-https write_files: # Сніпет заголовків безпеки для nginx – path: /etc/nginx/snippets/security-headers.conf permissions: ‘0644’ content: | add_header Strict-Transport-Security “max-age=31536000; includeSubDomains” always; add_header X-Content-Type-Options “nosniff” always; add_header X-Frame-Options “SAMEORIGIN” always; add_header X-XSS-Protection “1; mode=block” always; add_header Referrer-Policy “no-referrer” always; add_header Cache-Control “no-cache, no-store, max-age=0, must-revalidate” always; add_header Pragma “no-cache” always; # Конфігурація nginx для сторінки за замовчуванням (без проксіювання) – path: /etc/nginx/sites-available/default permissions: ‘0644’ content: | server { listen 80 default_server; listen [::]:80 default_server; server_name localhost; root /var/www/html; index index.html index.htm; location / { try_files $uri $uri/ =404; include /etc/nginx/snippets/security-headers.conf; } } # Конфігурація nginx для проксіювання запитів до Svelte-додатка – path: /etc/nginx/sites-available/svelte_app_proxy permissions: ‘0644’ content: | server { listen 80; server_name localhost; location / { proxy_pass http://127.0.0.1:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection ‘upgrade’; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; include /etc/nginx/snippets/security-headers.conf; } } # Проста сторінка за замовчуванням для перевірки роботи nginx – path: /var/www/html/index.html permissions: ‘0644’ content: |

Ласкаво просимо до NGINX!

NGINX працює коректно!

# Unit-файл systemd для запуску Svelte-додатка – path: /etc/systemd/system/svelte-app.service permissions: ‘0644’ content: | [Unit] Description=Svelte Application Service After=network.target [Service] WorkingDirectory=/var/www/svelte-app ExecStart=/usr/bin/npx sirv public –no-clear –dev –host 127.0.0.1 –port 8080 Restart=always User=www-data Environment=NODE_ENV=production [Install] WantedBy=multi-user.target runcmd: – | LOG_FILE=”/var/log/cloud-init-custom.log” echo “[$(date)] *** Запуск скрипта cloud-init ***” >> ${LOG_FILE} ########################################### ###### # 1. Проверка наличия nginx и Node.js/npm ########################################### ###### if command -v nginx >/dev/null 2>&1; then INSTALLED_NGINX=$(nginx -v 2>&1) echo “[$(date)] NGINX вже встановлений: ${INSTALLED_NGINX}” >> ${LOG_FILE} else echo “[$(date)] NGINX не знайдено” >> ${LOG_FILE} fi if command -v node >/dev/null 2>&1; then NODE_VER=$(node -v) echo “[$(date)] Node.js вже встановлений: ${NODE_VER}” >> ${LOG_FILE} else echo “[$(date)] Node.js не знайдено” >> ${LOG_FILE} fi if command -v npm >/dev/null 2>&1; then NPM_VER=$(npm -v) echo “[$(date)] npm вже встановлений: ${NPM_VER}” >> ${LOG_FILE} else echo “[$(date)] npm не знайдено” >> ${LOG_FILE} fi ########################################### ###### # 2. Установка официального репозитория и последней версии nginx ########################################### ###### echo “[$(date)] Додавання офіційного репозиторію NGINX” >> ${LOG_FILE} echo “deb http://nginx.org/packages/ubuntu/ ${UBUNTU_CODENAME:-jammy} nginx” | sudo tee /etc/apt/sources.list.d/nginx.list echo “deb-src http://nginx.org/packages/ubuntu/ ${UBUNTU_CODENAME:-jammy} nginx” | sudo tee -a /etc/apt/sources.list.d/nginx.list curl -fsSL https://nginx.org/keys/nginx_signing.key | sudo apt-key add – sudo apt-get update >> ${LOG_FILE} 2>&1 echo “[$(date)] Встановлення nginx з офіційного репозиторію” >> ${LOG_FILE} sudo apt-get install -y nginx >> ${LOG_FILE} 2>&1 NEW_INSTALLED_NGINX=$(nginx -v 2>&1) echo “[$(date)] Встановлена версія nginx: ${NEW_INSTALLED_NGINX}” >> ${LOG_FILE} ########################################### ###### # 3. Установка Node.js (и npm) версии 20 ########################################### ###### echo “[$(date)] Початок встановлення Node.js” >> ${LOG_FILE} if command -v node >/dev/null 2>&1; then CURRENT_NODE=$(node -v | sed ‘s/v//’) if [ “$(printf ‘%s\n’ “20.0.0” “$CURRENT_NODE” | sort -V | head -n1)” = “20.0.0” ]; then echo “[$(date)] Встановлено актуальну версію Node.js ($CURRENT_NODE)” >> ${LOG_FILE} else echo “[$(date)] Виявлено застарілу версію Node.js ($CURRENT_NODE). Оновлюємо до Node.js 20” >> ${LOG_FILE} curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash – >> ${LOG_FILE} 2>&1 sudo apt-get install -y nodejs >> ${LOG_FILE} 2>&1 echo “[$(date)] Node.js оновлено: $(node -v)” >> ${LOG_FILE} fi else echo “[$(date)] Node.js не знайдено. Встановлюємо Node.js 20” >> ${LOG_FILE} curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash – >> ${LOG_FILE} 2>&1 sudo apt-get install -y nodejs >> ${LOG_FILE} 2>&1 echo “[$(date)] Node.js встановлено: $(node -v)” >> ${LOG_FILE} fi # Проверка npm if command -v npm >/dev/null 2>&1; then echo “[$(date)] npm встановлено: $(npm -v)” >> ${LOG_FILE} else echo “[$(date)] npm не встановлено після встановлення Node.js” >> ${LOG_FILE} exit 1 fi ########################################### ###### # 4. Тестирование работы nginx с дефолтной конфигурацией ########################################### ###### echo “[$(date)] Перезапуск nginx для перевірки конфігурації за замовчуванням” >> ${LOG_FILE} sudo systemctl restart nginx if sudo systemctl is-active –quiet nginx; then echo “[$(date)] nginx успішно перезапущено” >> ${LOG_FILE} else echo “[$(date)] Помилка при перезапуску nginx” >> ${LOG_FILE} exit 1 fi DEFAULT_HTTP_CODE=$(curl -s -o /dev/null -w “%{http_code}” http://127.0.0.1) if [ “$DEFAULT_HTTP_CODE” -eq 200 ]; then echo “[$(date)] Тест сторінки nginx за замовчуванням пройдено, HTTP-статус: $DEFAULT_HTTP_CODE” >> ${LOG_FILE} else echo “[$(date)] Тест сторінки nginx за замовчуванням не пройдено, HTTP-статус: $DEFAULT_HTTP_CODE” >> ${LOG_FILE} exit 1 fi ########################################### ###### # 5. Установка проекта Svelte ########################################### ###### echo “[$(date)] Початок встановлення Svelte-додатка” >> ${LOG_FILE} SVELTE_DIR=”/var/www/svelte-app” if [ ! -d “${SVELTE_DIR}” ]; then echo “[$(date)] Клонування шаблону Svelte-додатка в ${SVELTE_DIR}” >> ${LOG_FILE} sudo git clone https://github.com/sveltejs/template ${SVELTE_DIR} >> ${LOG_FILE} 2>&1 sudo chown -R www-data:www-data ${SVELTE_DIR} else echo “[$(date)] Каталог Svelte-додатка вже існує” >> ${LOG_FILE} fi cd ${SVELTE_DIR} if [ -f package.json ]; then echo “[$(date)] Встановлення npm-залежностей для Svelte-додатка” >> ${LOG_FILE} npm install >> ${LOG_FILE} 2>&1 else echo “[$(date)] package.json не знайдено в ${SVELTE_DIR}” >> ${LOG_FILE} exit 1 fi ########################################### ###### # 6. Запуск Svelte-приложения через systemd и проверка ########################################### ###### echo “[$(date)] Перезавантаження демона systemd” >> ${LOG_FILE} sudo systemctl daemon-reload echo “[$(date)] Активація та запуск служби svelte-app.service” >> ${LOG_FILE} sudo systemctl enable svelte-app.service >> ${LOG_FILE} 2>&1 sudo systemctl start svelte-app.service sleep 5 if sudo systemctl is-active –quiet svelte-app.service; then echo “[$(date)] Svelte-додаток успішно запущено через systemd” >> ${LOG_FILE} else echo “[$(date)] Помилка при запуску Svelte-додатка через systemd” >> ${LOG_FILE} exit 1 fi SVELTE_HTTP_CODE=$(curl -s -o /dev/null -w “%{http_code}” http://127.0.0.1:8080) if [ “$SVELTE_HTTP_CODE” -eq 200 ]; then echo “[$(date)] Тест Svelte-додатка пройдено, HTTP-статус: $SVELTE_HTTP_CODE” >> ${LOG_FILE} else echo “[$(date)] Тест Svelte-додатка не пройдено, HTTP-статус: $SVELTE_HTTP_CODE” >> ${LOG_FILE} exit 1 fi ########################################### ###### # 7. Активация конфигурации nginx для Svelte ########################################### ###### echo “[$(date)] Тест Svelte-додатка успішний. Оновлюємо конфігурацію nginx.” >> ${LOG_FILE} if sudo nginx -t >> ${LOG_FILE} 2>&1; then echo “[$(date)] Тест конфігурації nginx пройдено” >> ${LOG_FILE} else echo “[$(date)] Помилка в конфігурації nginx. Вихід.” >> ${LOG_FILE} exit 1 fi # Создаём директорию для включённых конфигураций, если её нет sudo mkdir -p /etc/nginx/sites-enabled sudo ln -sf /etc/nginx/sites-available/svelte_app_proxy /etc/nginx/sites-enabled/svelte_app_proxy >> ${LOG_FILE} 2>&1 sudo rm -f /etc/nginx/sites-enabled/default >> ${LOG_FILE} 2>&1 # Проверка наличия include для sites-enabled в /etc/nginx/nginx.conf if ! grep -q “include /etc/nginx/sites-enabled/*;” /etc/nginx/nginx.conf; then echo “[$(date)] Додавання include /etc/nginx/sites-enabled/*; до /etc/nginx/nginx.conf” >> ${LOG_FILE} # Вставляем строку после include /etc/nginx/conf.d/*.conf; sudo sed -i ‘/include \/etc\/nginx\/conf.d\/\*.conf;/a \include /etc/nginx/sites-enabled/*;’ /etc/nginx/nginx.conf fi # Удаляем основной файл настроек сайта: sudo rm -f /etc/nginx/conf.d/default.conf >> ${LOG_FILE} 2>&1 sudo systemctl restart nginx if sudo systemctl is-active –quiet nginx; then echo “[$(date)] nginx перезапущено після активації конфігурації Svelte” >> ${LOG_FILE} else echo “[$(date)] Помилка при перезапуску nginx після активації конфігурації” >> ${LOG_FILE} exit 1 fi PROXY_HTTP_CODE=$(curl -s -o /dev/null -w “%{http_code}” http://127.0.0.1) if [ “$PROXY_HTTP_CODE” -eq 200 ]; then echo “[$(date)] Тест проксіювання Svelte через nginx пройдено, HTTP-статус: $PROXY_HTTP_CODE” >> ${LOG_FILE} else echo “[$(date)] Тест проксіювання Svelte через nginx не пройдено, HTTP-статус: $PROXY_HTTP_CODE” >> ${LOG_FILE} exit 1 fi echo “[$(date)] *** Встановлення та налаштування Svelte-додатка завершено ***” >> ${LOG_FILE} final_message: “Cloud-init завершено. Перевірте лог /var/log/cloud-init-custom.log для подробиць.”

Svelte vs Nuxt vs Next: порівняння фреймворків

При виборі фреймворку для фронтенд-розробки багато програмістів розглядають варіанти Svelte, Nuxt або Next. Кожен із цих інструментів має свої сильні сторони та обмеження.

Svelte

Переваги:

• Компілюється у чистий JavaScript без використання віртуального DOM, що дозволяє створювати надзвичайно легкі та швидкі застосунки.
  
• Мінімальний обсяг коду і висока читабельність, що спрощує розробку та підтримку.
  
• Простий поріг входження завдяки інтуїтивно зрозумілому синтаксису.
  

Недоліки:

• Порівняно невелика екосистема та кількість готових рішень (у порівнянні з більш популярними фреймворками).
  
• Обмежена кількість навчальних матеріалів і прикладів для вирішення складних задач (у порівнянні з Nuxt і Next).
  

Nuxt

Переваги:

• Створений на базі Vue.js, що робить його привабливим для розробників, знайомих з екосистемою Vue.
  
• Має вбудовані можливості для серверного рендерингу (SSR) та генерації статичних сайтів.
  
• Велику і активну спільноту, а також розвинену екосистему плагінів і модулів.
  

Недоліки:

• Додаткова складність конфігурації та оптимізації у порівнянні з Svelte.
  
• Може вимагати більше ресурсів для розробки та підтримки.
  

Next

Переваги:

• Побудований на React, що гарантує широку підтримку і наявність безлічі готових компонентів.
  
• Відмінна інтеграція з серверним рендерингом та статичною генерацією сторінок.
  
• Широка екосистема і успішне застосування у великих проєктах.
  

Недоліки:

• Може бути занадто «важким» для невеликих проєктів, де простота і швидкість розвитку важливіші за масштабованість.
  
• Більш складні налаштування та конфігурація у порівнянні з Svelte.
  

Висновки

Автоматизоване налаштування серверів за допомогою cloud-init дозволяє значно скоротити час розгортання і конфігурації інфраструктури. За його допомогою можна не тільки встановити всі необхідні пакети та налаштувати веб-сервер NGINX, але й автоматично розгорнути додаток на сучасному фреймворку Svelte. Такий підхід мінімізує ручне втручання, знижує ймовірність помилок і гарантує високу надійність роботи серверів.

Порівнюючи Svelte з такими популярними рішеннями, як Nuxt та Next, можна відзначити, що Svelte виграє за рахунок простоти, меншого обсягу згенерованого коду та високої продуктивності. Втім, для більших проєктів вибір часто схиляється до Nuxt або Next завдяки їхній розвиненій екосистемі та додатковим можливостям.

Завдяки інтеграції cloud-init в особистому кабінеті сервісу RX-NAME, ви отримуєте потужний інструмент для автоматизації, який допоможе вам швидко і безпечно запускати свої проєкти. Спробуйте цей підхід і переконайтеся самі, як він спрощує процес розробки та розгортання. Для отримання більш детальної інформації про можливості cloud-init та інші автоматизовані рішення – завітайте до нашого блогу.