Найперший урок курсу — з нього починається все інше
У тебе є що показати: «паспорт твого компʼютера» або принаймні ти сам. Але поки файли лежать у папці на твоєму компʼютері, відкрити їх може лише той, хто сидить за цим компʼютером. Друг з іншого міста чи вчитель зі свого телефона не побачать нічого.
Розвʼязання — сервер: компʼютер, який увімкнений завжди й має постійну адресу, тож покладені на нього файли доступні цілодобово з будь-якої точки світу. Акаунт на такій машині тобі вже видали.
Це не навчальна іграшка: так само влаштований будь-який справжній сайт чи застосунок — від невеликого стартапу до великих сервісів, якими ти користуєшся щодня. Хтось підключається до сервера, кладе туди файли, стежить, чи все працює. Сьогодні ти вперше робиш це сам.
За цей урок ти зайдеш на сервер, зробиш просту сторінку й відкриєш її з інтернету. Наприкінці за твоєю адресою відкриватиметься сторінка про «паспорт твого компʼютера» або про тебе, і побачити її зможе будь-хто, кому ти даси посилання.
index.html і переносити її на сервер спеціальною програмою;| Етап | Що робимо |
|---|---|
| Вхід і пароль | вхід у термінал сервера і зміна пароля |
| Орієнтування | три команди, які показують, хто ти й де ти, — і чотири теки |
| Що видно з інтернету | тільки одна тека, і твоя адреса |
| Сторінка-візитка | перша index.html своїми руками |
| Заливка й здача | файл на сервер спеціальною програмою — і здача відповідей |
Одна команда відкриває командний рядок чужої машини
Керувати сервером через браузер не вийде: браузер уміє лише показувати сторінки. Для команд є термінал — вікно, у яке ти вводиш рядок тексту, натискаєш Enter, і машина його виконує. Відповідь приходить теж текстом.
Термінал у тебе вже є. На Windows відкрий PowerShell або застосунок «Термінал»,
на macOS і Linux — «Термінал». Спосіб дотягнутися до сервера через мережу
називають SSH — це захищене підключення до термінала чужої машини, у якому все,
що ти набираєш, разом із паролем, у дорозі зашифроване. Команда: слово
ssh, далі твій логін, знак @ й адреса сервера. Логін
виглядає як прізвище, ініціал і клас, наприклад petrenko.o.8a:
Символи < і > у зразку не набирай —
вони лише позначають місце, куди підставити свій логін.
yes, натисни Enter — і більше
про це не спитають. Далі зʼявиться запит пароля.Чому під час введення пароля екран лишається порожнім
Сервер попросить пароль. Набирай виданий тобі пароль — і на екрані не зʼявиться нічого: ні символів, ні зірочок. Так зроблено навмисно, задля безпеки: якщо символи не видно, їх не підгледить ні сусід, ні камера за спиною. Просто друкуй спокійно й натисни Enter у кінці.
Ти вводиш пароль у вікні SSH, але на екрані не зʼявляється жодного символу — навіть зірочок. Що це означає?
Якщо після Enter зʼявився напис Permission denied, пароль або
логін набрано з помилкою — сервер просто попросить пароль ще раз. Найчастіша
причина — зайвий пробіл або невірна розкладка клавіатури.
Виданий пароль знаєш не лише ти, тому перше після входу — замінити його на
власний командою passwd (від password, «пароль»):
Команда спитає поточний (виданий) пароль, потім двічі новий — другий раз, щоб переконатися, що ти не помилився під час набирання наосліп. Усе вводиться так само невидимо. Добрий пароль — довгий і не очевидний: кілька неповʼязаних слів разом запамʼятати легше, ніж набір символів, а вгадати — важче.
Дві короткі команди, щоб зрозуміти, куди ти потрапив
На сервері одночасно працюють десятки учнів, у кожного свій акаунт і своя
тека. Команда whoami (від who am I, «хто я») одним
рядком показує, під ким саме ти зайшов.
Вивід — твій логін. Запамʼятай його точно: він знадобиться і в адресі сайту,
і при підключенні по SFTP. Одразу після входу сервер ставить тебе в домашню
теку — особистий простір твого акаунта. Команда pwd
(print working directory) друкує повний шлях до неї.
Цей шлях скорочено позначають знаком ~, тому ~/www
означає теку www у твоїй домівці. Усе, що ти робитимеш далі,
лежатиме тут.
Третя команда орієнтування — і чотири готові теки
Домашня тека не порожня: у ній заздалегідь створено чотири теки під різні
потреби. Команда ls (від list, «перелічити») показує,
що лежить у теці, де ти стоїш.
Ці чотири теки вже готові до роботи — створювати чи видаляти їх не треба, права на них теж уже виставлені. Кожна відповідає за своє:
| Тека | Для чого |
|---|---|
www | сторінки, які має бачити інтернет |
upload | завантажені файли (сюди ж — відповіді до уроку) |
data | робочі дані проєкту |
notes | особисті нотатки |
Найважливіша різниця між ними — не призначення, а видимість: одну теку видно з інтернету, решту три — ні. Саме через це так важливо не переплутати, куди класти файл.
Чому важливо, у яку саме теку класти сторінку
Коли хтось відкриває твою адресу, запит приймає програма-вебсервер під назвою
nginx. Вона стоїть на сервері постійно й на кожен запит віддає файл — але лише з
однієї теки, www. Решту домашньої теки назовні вона не показує.
Три інші теки (upload, data, notes) для
nginx закриті: хоч би що в них лежало, з інтернету воно недоступне. Сам ти з
термінала й по SFTP працюєш з усіма чотирма, а відвідувач сайту бачить тільки
вміст www.
Звідси головне правило: усе публічне кладеш у www; усе, що має
лишитися твоїм, — у будь-яку з інших трьох тек. Сторінку-візитку, отже, треба
класти саме в www, інакше вона не відкриється.
Твій акаунт має чотири теки: www, upload,
data, notes. Ти хочеш, щоб сторінку-візитку бачив
увесь інтернет. У яку теку її класти?
За яким посиланням відкриється те, що лежить у www
У твоєї теки www є постійна адреса в інтернеті. У ній
/s/ — спільний початок для всіх учнів, а твій логін у кінці каже
серверу, чия саме тека потрібна:
Коли ти відкриєш цю адресу, nginx зайде у твою теку www і віддасть
звідти головну сторінку. Поки у www нічого немає, віддавати нема
чого — тому зараз за адресою сторінки ще не буде. Зʼявиться вона одразу, щойно
ти покладеш туди файл.
Ти хочеш дати вчителю посилання на свою майбутню сторінку, а твій логін —
petrenko.o.8a. Яка адреса приведе саме до неї?
Сторінка — це текстовий файл, який ти пишеш прямо зі зразка
Сторінка, яку показує браузер, — це звичайний текстовий файл. Створи на своєму компʼютері новий файл — підійде Блокнот на Windows, TextEdit на macOS або будь-який редактор коду — і набери в ньому цей зразок, замінивши підказки своїм текстом:
Слова в кутових дужках — це теги: <h1> — заголовок,
<p> — абзац, <title> — назва вкладки браузера.
Заміни «Тут заголовок» на своє імʼя або назву проєкту, а абзаци — на кілька речень
про «паспорт твого компʼютера» або про себе: хто ти, що робиш, що плануєш далі.
Рядок <meta charset="utf-8"> лишай як є — без нього
українські літери можуть показатися набором знаків.
Файл обовʼязково назви index.html. Головну сторінку теки сервер
віддає саме з файлу з такою назвою — це домовленість, однакова на всіх
вебсерверах світу.
Ти залив у www файл mypage.html із текстом про
себе, відкрив адресу свого сайту — а браузер не показує твою сторінку. Чому?
Найчастіша помилка новачка — файл із подвійним розширенням
Написати сторінку мало — її треба зберегти під правильною назвою, і саме тут
спотикається більшість початківців. Блокнот на Windows за замовчуванням додає до
назви приховане .txt, і замість index.html виходить
index.html.txt. Такий файл браузер показує не як сторінку, а як її
код рядками.
Щоб цього не сталося, у вікні збереження знайди поле «Тип файлу» й вибери
«Усі файли» замість «Текстові документи», а тоді впиши назву разом із
розширенням: index.html. На macOS у TextEdit спершу переклади
документ у звичайний текст, а вже потім зберігай.
Index.html, INDEX.HTML і index.html —
це три різні файли, і вебсервер шукає лише останній. На Windows ця різниця
непомітна, тому помилку часто привозять уже на сервер.Яким способом файл із твого компʼютера потрапляє в теку www
Сторінка готова в тебе на компʼютері — тепер її треба перенести на сервер. Друкувати весь файл у терміналі незручно, тому для файлів є простіший спосіб: спеціальна програма з двома вікнами, у якій файли просто перетягують мишею.
Переносити файли цей сервер дозволяє тільки по SFTP. Це той самий захищений канал, що й SSH: підключаєшся тим самим логіном і паролем від сервера, і все зашифровано. Схожий на вигляд старий протокол FTP цей сервер не приймає взагалі.
Постав програму-клієнт: на Windows зручний WinSCP, також підійде FileZilla; на macOS і Linux — FileZilla. Відкрий її й створи нове підключення:
sftp://91.219.61.4). Якщо помилково лишити звичайний FTP, сервер
відхилить зʼєднання, і файл нікуди не поїде.Ти налаштував у програмі підключення по FTP до 91.219.61.4,
але сервер щоразу відхиляє зʼєднання. Що зробити?
Файл на сервері — і сторінка в інтернеті
Коли підключення вдалося, вікно програми ділиться навпіл: ліворуч — твій компʼютер, праворуч — сервер. Перетягування зліва направо означає «скопіювати на сервер»; файл при цьому не зникає з твого компʼютера.
Праворуч, на боці сервера, ти побачиш знайомі теки: data,
notes, upload, www. Зайди подвійним кліком
у www, знайди ліворуч свій index.html і перетягни його в
праву панель.
Файл скопіюється за секунду й зʼявиться у списку праворуч. Тепер набери в
адресному рядку браузера https://studyua.91.219.61.4.nip.io/s/<логін>/
зі своїм логіном — має відкритися твоя сторінка. Відтепер її бачить будь-хто,
кому ти даси це посилання.
404 Not Found означає, що nginx не знайшов у www
файлу index.html: найчастіше файл названо інакше (перевір, чи немає
.txt у кінці) або лежить не в тій теці. Якщо ж відкрився старий
вміст, натисни Ctrl+F5, щоб перезавантажити сторінку заново.Дванадцять кроків по черзі. Галочки зберігаються — сторінку можна закрити й повернутися.
Пʼять ситуацій. Обери варіант — сторінка одразу покаже правильну відповідь і пояснення, а твій вибір запамʼятає для здачі.
Щоб зайти в термінал сервера зі свого компʼютера, ти набираєш команду. Яка з них правильна для твого акаунта?
Тобі видали тимчасовий пароль. Перше, що варто зробити після входу, — це…
Ти хочеш сховати чернетки, які нікому не треба показувати. У яку теку їх покласти, щоб їх не було видно з інтернету?
Сторінка відкривається за адресою твоєї теки, без назви файлу в кінці. Який файл сервер віддасть за цією адресою?
Файл index.html готовий на твоєму компʼютері. Як він потрапить
у теку www на сервері?
Останній крок — і як він перетворює твої кліки на оцінку
Поки ти читав урок і проходив «Перевір себе», сторінка запамʼятовувала кожен твій вибір і кожну поставлену галочку практики. Лишилося передати це на сервер одним файлом, щоб сервер прочитав його і виставив бал.
Спочатку сторінка має знати, хто ти. Угорі є список «Хто ти?» — знайди в ньому себе й обери. Якщо тебе там немає, впиши свій логін вручну. Вибір збережеться, і сторінка припише твої відповіді саме тобі.
Далі ланцюг такий:
lesson-01.json;~/upload/answers/.Теки answers усередині upload ще немає — її треба
створити один раз. У FileZilla на боці сервера зайди в upload,
клацни правою кнопкою на порожньому місці, вибери Create directory й
назви теку answers. Це та сама навичка SFTP, що й із
index.html, тільки замість заливки файлу — створення теки.
Коли lesson-01.json лежить у ~/upload/answers/,
твоя частина зроблена. Далі за розкладом сервер сам прочитає файл, звірить твої
теоретичні відповіді з правильними, додасть результат практики й виставить бал
від 1 до 12. Він зʼявиться в панелі викладача поряд з автоперевіркою — окремо
натискати нічого не треба.
index.html — лежати у www. Спершу доведи роботу до
робочого сайту, а тоді експортуй і заливай відповіді.Перевірка сама зазирне на сервер, відкриє твою адресу й перевірить файл відповідей. Спроби не обмежені.
index.html лежить саме у www;lesson-01.json залито в upload/answers.Симптом ліворуч — причина й лікування праворуч
| Симптом | Причина й лікування |
|---|---|
| Пароль не вводиться: на екрані нічого не зʼявляється | так і має бути — символи наосліп; набери пароль до кінця й натисни Enter |
Permission denied при вході | переплутано логін або пароль; звір логін і набери пароль ще раз |
| Сторінка відкривається як код, а не як сторінка | файл названо index.html.txt; збережи саме як index.html, тип «Усі файли» |
За адресою 404 Not Found | файл не index.html або лежить не у www; звір назву й теку |
| За адресою стара версія сторінки | браузер показує з памʼяті; онови сторінку, Ctrl+F5 |
| SFTP-клієнт не підключається | обрано FTP замість SFTP; постав протокол SFTP і порт 22 |
| Українські літери — незрозумілі знаки | у <head> немає <meta charset="utf-8">; додай цей рядок і залий файл ще раз |
| Бал не зʼявився після здачі | lesson-01.json не в upload/answers або тека названа інакше; створи answers і залий файл ще раз |
Це те, що бачить учитель, коли виставляє оцінку.
| Складник | Вага | Результат |
|---|
Index.HTML — сервер такої сторінки не знаходить;www\index.html;cd www набрано не зі своєї домашньої теки замість
cd ~/www;~/upload — його не перенесли
в ~/www;<meta charset="UTF-8">,
і замість українських літер видно набір символів;~/www.