Браузер и сервер
Браузер
Программа на устройстве посетителя. Получает материалы сайта и показывает страницу.
Веб-сервер
Программа, которая принимает обращения браузера и отправляет ответы.
Сервером также называют компьютер, на котором работает эта программа.
Источник: MDN ↗Запрос и ответ
Запрос — сообщение с обращением к другой программе. Ответ — сообщение с результатом обработки.
Сервер может вернуть нужные данные или сообщить об ошибке.
Источник: MDN ↗Интернет передаёт данные
Интернет — множество соединённых сетей, по которым устройства обмениваются данными.
- Устройство
Подключается к сети.
- Промежуточные сети
Передают данные дальше.
- Сервер
Получает сообщение и отправляет ответ.
Сайты работают через интернет. Через него также работают почта и другие службы.
Источник: MDN ↗Части адреса сайта
https://iconart.ru/catalog/ — адрес страницы каталога.
ПротоколHTTPS — передача данных с защитой соединения.
Имя в зонеИмя сайта внутри зоны.
Доменная зонаОкончание имени: .ru. Другие зоны: .com, .org, .рф.
ПутьКакая страница нужна: /catalog/ — каталог; /contacts/ — контакты.
iconart.ru — доменное имя целиком: имя + зона. Пути /catalog/ и /contacts/ приведены для примера.
Источник: MDN ↗Домен и IP-адрес
Домен: iconart.ru
Понятное человеку имя. Его удобно запомнить и написать.
IP-адрес: 192.0.2.10
Учебный пример сетевого адреса. Нужен для доставки данных к компьютеру.
Домен и сервер — разные вещи. Имя может остаться прежним при переносе сайта.
Источник: MDN ↗DNS: получить адрес по имени
DNS — система, которая помогает находить сетевые адреса по доменным именам.
Если подходящий адрес уже сохранён, новый поиск может не понадобиться.
Источник: MDN ↗HTTP: запрос и ответ сервера
HTTP — правила запросов и ответов. HTTPS сохраняет эти правила, но шифрует передачу и защищает от подмены в пути — поэтому сайты переходят на HTTPS.
Запрос браузера
«Пришли страницу каталога».
Ответ сервера
- Код: 200 OK
- Сервер сообщает, что запрос выполнен успешно.
- Тело: HTML страницы
- Содержимое, которое браузер разбирает и показывает.
Код и содержимое — части одного ответа сервера. 200 для страницы не гарантирует успешную загрузку всех её картинок.
Источник: MDN ↗GET: браузер просит получить данные
При открытии ссылки браузер сам составляет запрос. Посетителю не нужно набирать GET вручную.
GET/catalog/
GET — какое действие
«Пришли то, что находится по этому адресу». Это метод HTTP — название действия в запросе.
/catalog/ — что получить
В этом запросе — страницу каталога. Другой адрес может указывать на фото, файл оформления или данные.
GET предназначен для чтения, а не для покупки или удаления. Один и тот же метод подходит для разных материалов: меняется запрашиваемый адрес.
Источник: MDN ↗Коды ответа: успех и переход
Код — три цифры в служебной части ответа. 2xx — успех, 3xx — переход или работа с сохранённой копией.
- 200OK
- Запрос выполнен. При GET в теле обычно есть запрошенный материал.
- 201Created
- Создан новый объект: например, новая заявка.
- 204No Content
- Действие выполнено; содержимого в теле ответа нет.
- 301Moved Permanently
- Адрес изменён постоянно. Сервер сообщает новый адрес.
- 302Found
- Временный переход на другой адрес.
- 304Not Modified
- Сохранённый материал не изменился. Браузер может использовать свою копию.
Ответ с кодом не всегда содержит страницу. Например, при 204 и 304 тела ответа нет.
Источник: MDN ↗Ошибки 4xx: адрес и доступ
4xx — запрос не выполнен из-за адреса, доступа или условий. Причина не обязательно в действиях посетителя.
- 400Bad Request
- Сервер не может разобрать некорректный запрос.
- 401Unauthorized
- Нет действительных данных доступа. Нужно войти или передать их.
- 403Forbidden
- Сервер запрещает доступ к ресурсу.
- 404Not Found
- Ресурс по этому адресу не найден.
- 405Method Not Allowed
- Этот метод HTTP не разрешён по данному адресу.
- 410Gone
- Ресурс намеренно удалён насовсем.
404 — не найдено; 410 — удалено насовсем. 401 — нужны данные доступа; 403 — доступ запрещён.
Источник: MDN ↗Ошибки 4xx: данные
Адрес правильный, но данные или частота обращений не подходят.
- 408Request Timeout
- Истекло время ожидания полного запроса.
- 409Conflict
- Конфликт с текущими данными: например, место уже занято.
- 413Content Too Large
- Слишком большой объём данных, например размер файла.
- 415Unsupported Media Type
- Неподдерживаемый формат отправленных данных.
- 422Unprocessable Content
- Формат понятен, но данные нарушают условия обработки.
- 429Too Many Requests
- Слишком много запросов. Нужно снизить их частоту.
Код указывает вид проблемы. Подробности выясняют по ответу и журналу сервера.
Источник: MDN ↗Ошибки 5xx: обработка на сервере
5xx — сервер не смог выполнить запрос. Ответ может отправить сам сайт или промежуточный сервер, через который идёт обращение.
- 500Internal Server Error
- Непредвиденная ошибка обработки на сервере.
- 501Not Implemented
- Сервер не поддерживает нужную для запроса возможность.
- 502Bad Gateway
- Промежуточный сервер получил неверный ответ от другого сервера.
- 503Service Unavailable
- Сервис временно недоступен: например, обслуживание или перегрузка.
- 504Gateway Timeout
- Промежуточный сервер не дождался ответа другого сервера.
Ошибка соединения или сертификата может возникнуть до HTTP-ответа. Тогда кода 200, 404 или 500 вообще не будет.
Источник: MDN ↗Путь от адреса до страницы
- Адрес
Выделяет имя и путь.
- Поиск адреса
При необходимости узнаёт IP через DNS.
- Запрос
Обращается к серверу за ресурсом.
- Ответ
Получает код и материалы либо сообщение об ошибке.
- Показ
Разбирает материалы и показывает страницу.
DNS помогает найти адрес. Саму страницу браузер запрашивает у сервера.
Источник: MDN ↗Браузер собирает страницу
Получить материалы, разобрать их и показать страницу — последовательные действия браузера.
- Получает материалы
HTML, CSS, JavaScript, изображения и другие нужные файлы.
- Разбирает материалы
Определяет элементы страницы, оформление и поведение.
- Показывает страницу
Выводит результат на экран и реагирует на действия посетителя.
Дополнительные файлы браузер запрашивает отдельно. Часть материалов может уже храниться на устройстве.
Источник: MDN ↗Из каких материалов собирается страница
Из HTML браузер узнаёт, какие ещё файлы нужны, и запрашивает их отдельно.
- HTML
- Текст и разметка: заголовки, абзацы, ссылки, формы.
- CSS
- Оформление: размеры, цвета, расположение, анимация.
- JavaScript
- Код для действий в браузере: перелистнуть слайд, рассчитать цену.
- Фото и графика
- Файлы фотографий, иллюстраций и значков.
Для каждого файла — свой ответ: страница может получить 200, а её картинка — 404.
Источник: MDN ↗Фронтенд: часть сайта в браузере
Фронтенд — часть сайта, которая загружается и работает в браузере: внешний вид и поведение страницы.
На устройстве посетителя
Раскрыть описание занятия.
Появились подробности.
Если нужные сведения уже получены, для такого действия новый запрос к серверу может не потребоваться.
Источник: MDN ↗Бэкенд: логика на сервере
Бэкенд — серверная часть сайта: обрабатывает обращения и выполняет правила его работы.
Серверная часть сайта · запись на занятие
- Получить действие
Посетитель просит записать его на занятие.
- Проверить условия
Можно ли принять такую запись?
- Сформировать ответ
Что сообщить посетителю?
Браузер видит только полученные сведения. Актуальные условия и возможность записи проверяет серверная часть.
Источник: MDN ↗Где хранятся материалы сайта
На сервере могут храниться и папки с файлами, и база данных. Это разные хранилища материалов сайта.
Файлы в папках на сервере
На диске сервера есть папки. Разработчик загружает в них HTML, CSS, JavaScript, фотографии и документы. Веб-сервер находит запрошенный файл и отправляет его браузеру.
Записи в базе данных
База хранит связанные сведения. Например, запись одного товара содержит его название, цену и адрес фотографии. Бэкенд находит нужный товар и читает эти сведения для ответа.
Например, фото товара лежит файлом в папке /uploads/ на сервере, а в базе сохранены цена товара и адрес этого фото.
Источник: MDN ↗Как сайт сохраняет данные
Фронтенд работает в браузере: принимает ввод, отправляет данные бэкенду и показывает результат. Конкретный пример — запись на занятие.
- Фронтенд
Собирает выбор и отправляет его данные бэкенду.
- Бэкенд
Проверяет условия записи.
- База данных
Сохраняет принятую запись.
- Бэкенд
Отправляет ответ о результате.
- Фронтенд
Получает ответ бэкенда и показывает подтверждение.
Браузер — программа для просмотра сайтов. Фронтенд — часть сайта, которая в ней работает. Это не два названия одного и того же.
Источник: MDN ↗Общие данные для посетителей
После сохранения записи следующие ответы сервера учитывают занятое место.
Было 2 свободных места. Занял одно.
Затем запросил расписание. Получит: свободно 1 место.
Серверная часть и общая база
Осталось 1 место. Сервер берёт эти данные для следующего ответа.
Открытая страница может показывать прежние 2 места. Чтобы увидеть 1, браузер должен снова запросить данные.
Источник: MDN ↗Что сотрудник делает в админке сайта
Админка — раздел сайта, в котором сотрудник после входа меняет содержание через редактор.
- Страница
- Сотрудник вводит заголовок и текст в редакторе, добавляет фото и нажимает «Опубликовать».
- Товар
- Сотрудник добавляет фото, цену и характеристики; сайт показывает карточку товара.
- Текст
- Сотрудник исправляет текст, цену или контакты; программа сохраняет изменения.
- Заявки
- Сотрудник открывает обращение клиента и отмечает, на каком этапе обработка.
Редактор позволяет менять содержание без ручного написания HTML. Программа сайта формирует HTML для браузера из сохранённых данных.
Источник: MDN ↗Какие программы нужны на сервере
Просто скопировать папку сайта на компьютер недостаточно: на нём должны быть запущены программы, которые обслуживают обращения браузера.
- Nginx или Apache
- Это веб-сервер: программа принимает HTTP-запросы и отправляет файлы либо передаёт запрос серверному коду сайта.
- PHP или Node.js
- Эти программы выполняют серверный код. Например, код WordPress выполняется с помощью PHP.
- База данных
- MySQL и PostgreSQL — программы для работы с базой. Они сохраняют записи и выдают сведения по обращению бэкенда.
Набор зависит от сайта. Например, для WordPress нужны веб-сервер, PHP и MySQL или MariaDB — программа для базы. Их устанавливает и настраивает администратор сервера.
Источник: документация ↗Что настраивают в панели сервера
Через панель сервера администратор настраивает программы, которые обеспечивают работу сайта.
- Запуск
- Администратор устанавливает и запускает нужные программы, например Nginx и PHP.
- Папка сайта
- Указывает папку с файлами, из которой веб-сервер должен отдавать сайт по его домену.
- База данных
- Создаёт базу и сообщает программе сайта, как к ней подключаться.
- HTTPS и копии
- Включает HTTPS и создаёт копии файлов и базы, из которых можно восстановить сайт.
Админка меняет страницы. Панель сервера настраивает работу программ. Часть настроек может делать компания, у которой размещён сайт.
Источник: MDN ↗Статический сайт — готовые страницы.
Представь два случая.
У выставки есть страницы «О выставке», «Программа» и «Как добраться». Их заранее подготовили и положили на сервер. Ты открываешь «Как добраться» — сервер присылает уже существующую страницу с адресом и картой.
Динамический сайт — страница получается в результате работы программы.
На сайте билетов ты выбираешь: откуда, куда и на какую дату ехать. Готовой страницы со всеми подходящими именно тебе рейсами заранее нет. Программа на сервере ищет подходящие варианты в данных и составляет результат твоего поиска.
Главное отличие
То есть отличие такое: в первом случае тебе выдают заранее подготовленный документ; во втором — программа составляет ответ на твой конкретный запрос.
Слово «статический» здесь относится к подготовке содержимого, а не к движению: готовая страница тоже может иметь анимацию и раскрывающееся меню.
Анимация на статическом сайте
Анимацию выполняет браузер. Она не зависит от того, готовый HTML прислал сервер или создал его по запросу.
- CSS
- Браузер читает CSS-файл и плавно меняет цвет, размер или положение элемента.
- JavaScript
- Браузер выполняет JavaScript: после нажатия посетителя раскрывает меню или меняет слайд.
- Запрос к серверу
- Фронтенд запрашивает свежие данные, например оставшиеся места на рейсе. Бэкенд читает базу и возвращает ответ.
Браузер может анимировать готовую страницу без нового HTTP-запроса. Динамический ответ нужен, когда программа на сервере готовит данные по запросу.
Источник: MDN ↗Локальный проект и публикация
Локально
Материалы и программы находятся на компьютере автора. Здесь удобно готовить и проверять изменения.
Опубликовано
Работающая версия размещена так, чтобы к ней могли обращаться нужные посетители по сетевому адресу.
Серверная программа может работать и на твоём компьютере. Слово «сервер» обозначает роль, а не обязательное место в дата-центре.
Источник: MDN ↗Как создают сайты
Есть разные способы создания сайта. Подробно разберём их на последующих уроках.
- Конструктор · Tilda
- Автор собирает страницы из блоков в редакторе Tilda. Создатели Tilda обслуживают этот редактор.
- CMS · WordPress
- CMS — готовая система управления содержимым с админкой. Разработчик настраивает внешний вид, страницы и функции.
- Фреймворк · Laravel
- Разработчик пишет страницы и функции сайта, используя готовый код Laravel для запросов и работы с базой.
- Самописный движок
- Разработчики сами пишут серверную программу и при необходимости админку под задачи заказчика.
Подходы сочетаются: свой движок можно написать с помощью фреймворка.
Источник: MDN ↗Общая схема работы сайта
Пример сайта с расписанием и записью на занятие.
Устройство посетителя
Интерфейс и код сайта, работающие в браузере.
Сторона сайта
Бэкенд: проверки и действия.
Хранит нужные сайту сведения.
Где проверяется возможность записи?
Где остаются данные после закрытия браузера?
Адрес и DNS помогают найти нужный сервер. Админка позволяет сотруднику управлять работой сайта.
Источник: MDN ↗