Как устроен интернет-продукт: сайт, сервер, база данных, домен (термины с нуля)

Чему вы научитесь

К концу урока вы сможете нарисовать простую схему интернет-продукта и объяснить назначение каждой части без профессионального жаргона. Вы поймёте, почему кнопка на странице не равна сохранённой заявке, почему секрет нельзя помещать в браузер и чем адрес сайта отличается от места, где он работает.

Мы продолжим учебный сайт велосипедной мастерской. Посетитель читает услуги и хочет оставить заявку на ремонт. На этом примере проследим весь путь: открытие страницы, ввод сведений, отправку, проверку, сохранение и ответ. Пока мы не строим сложную систему, а создаём карту, по которой позже будет легче ориентироваться.

Что нужно знать заранее

Прочитайте первый урок о вайбкодинге. Из него понадобятся три идеи: у проекта есть конкретный пользователь, первая версия имеет ограниченные возможности, а результат проверяется по наблюдаемым условиям. Если описание мастерской уже подготовлено, держите его рядом и дополняйте по ходу чтения.

Для задания достаточно листа бумаги или текстового редактора. Специальные программы и платные аккаунты не нужны. Наша цель — понять связи, а не запомнить названия всех технологий, которые встречаются в интернете.

Ключевые термины

Клиент в техническом смысле — программа, которая обращается за данными или действием. В нашем случае это браузер посетителя. Не путайте это значение со словом «клиент» как покупатель услуг мастерской: смысл определяется контекстом.

Сервер — программа, принимающая обращения от клиентов и возвращающая ответы; тем же словом иногда называют компьютер, на котором она работает. Запрос — обращение клиента, а ответ — результат обработки этого обращения.

Интерфейс — часть продукта, через которую человек взаимодействует с ним: текст, кнопки, поля и сообщения. База данных — организованное хранилище сведений, в котором их можно находить, добавлять и изменять по правилам.

Домен — читаемое имя сайта, например example.com. Хостинг — услуга или среда, где размещаются файлы и выполняется серверная программа. HTTPS — способ обмена данными между клиентом и сервером с шифрованием и проверкой подлинности сервера с помощью сертификата.

Эти определения пока намеренно короткие. Дальше каждое понятие получит конкретную роль в истории одной заявки, поэтому не нужно заучивать список отдельно от примера.

1. Что браузер делает после ввода адреса

Представьте, что вы хотите отправить письмо в мастерскую. Вам нужно название получателя, адрес доставки и способ передачи. В интернете также требуется связать удобное человеку имя с адресом компьютера, установить соединение и передать обращение. Однако эта аналогия не означает, что все данные путешествуют одним неделимым конвертом: технически обмен может состоять из многих сообщений.

Когда вы вводите домен, устройство обычно обращается к системе DNS. DNS — система, которая помогает находить сетевой адрес по доменному имени. Её можно сравнить с адресной книгой. Один и тот же домен может вести на инфраструктуру из нескольких компьютеров, поэтому формула «один домен равен одному компьютеру» слишком упрощает реальность.

После установления защищённого соединения браузер запрашивает страницу. Сервер возвращает документ и, при необходимости, указания загрузить дополнительные файлы: оформление, программную логику, изображения и шрифты. Браузер обрабатывает полученное и строит видимый интерфейс. Поэтому страница может появляться постепенно, а некоторые её части — загружаться позже.

Для обмена используется HTTP — набор правил, по которым клиент и сервер оформляют запросы и ответы. Буква S в HTTPS обозначает защищённый вариант такого обмена. В запросе есть адрес нужного ресурса и другие сведения, а в ответе — результат, дополнительные указания и код состояния. Код состояния помогает понять, что произошло: ресурс найден, доступ запрещён или сервер не смог обработать запрос.

Не нужно запоминать все коды сразу. Важно научиться различать отсутствие страницы и внутреннюю ошибку. Если адрес набран неверно, исправление базы данных обычно не поможет. Если страница открывается, а заявка не сохраняется, проблема находится в другом участке цепочки. Схема запроса позволяет задавать помощнику более точные вопросы.

2. Структура, оформление и поведение страницы

Браузер получает разные виды инструкций. HTML описывает структуру и смысл содержимого: заголовок, абзац, список, ссылка, форма. CSS задаёт оформление: размеры, отступы, цвета и расположение. JavaScript добавляет программное поведение: например, обновляет список услуг после выбора категории или проверяет заполнение поля перед отправкой.

Удобная аналогия — помещение мастерской. HTML определяет, где стойка приёма и какие таблички существуют. CSS отвечает за оформление и расположение этих элементов. JavaScript описывает некоторые действия: например, что показывать после выбора услуги. Аналогия помогает начать, но помните: настоящая страница не состоит из трёх изолированных миров, эти части работают совместно.

Рассмотрим минимальный HTML-файл. Код ниже нужно сохранить в файле index.html и открыть его браузером. Он показывает заголовок и список; не принимает заявки и не обращается к базе. Это полезно назвать прямо, чтобы не приписывать странице возможностей, которых в ней нет.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Учебная мастерская</title>
  </head>
  <body>
    <main>
      <h1>Ремонт велосипедов</h1>
      <p>Учебная страница: услуги и порядок обращения.</p>
      <ul>
        <li>Настройка переключения передач</li>
        <li>Проверка тормозов</li>
      </ul>
    </main>
  </body>
</html>

Обратите внимание на связь кода и результата. Текст внутри заголовка становится заголовком страницы, элементы списка — отдельными пунктами. Измените название одной услуги, сохраните файл и обновите вкладку. Так вы увидите, что браузер показывает результат обработки файла, а не редактирует сам источник.

Локальный файл — файл на вашем устройстве. Если он открыт только с вашего диска, другой человек не получит к нему доступ просто потому, что вы скопировали адрес вкладки. Для общего доступа файлы нужно разместить в доступной сети среде. Эту работу называют публикацией или развёртыванием; к ней вернёмся в отдельном уроке.

3. Зачем нужен сервер, если страница уже работает

Страница может выполнять часть действий самостоятельно. Например, раскрыть ответ на вопрос или изменить цвет кнопки. Но если нужно принять заявку, доступную владельцу с другого устройства, одной памяти вкладки недостаточно. Нужна общая точка, которая принимает обращение, проверяет его и сохраняет сведения.

Сервер можно сравнить с сотрудником приёмки. Посетитель сообщает желаемую услугу, сотрудник проверяет, что запрос понятен, и заносит его в журнал. Стойка с красивой формой сама по себе не выполняет эту работу. В интерфейсе можно показать сообщение об успехе даже без реального сохранения, поэтому успех должен подтверждаться результатом серверной обработки.

Для общения интерфейс и сервер договариваются о формате данных и адресах действий. Такой набор правил называют API — программным интерфейсом взаимодействия. В нашем случае может существовать адрес для отправки заявки и отдельный адрес для получения списка услуг. API не обязательно является сторонним платным сервисом: это может быть часть вашего собственного проекта.

Когда посетитель отправляет форму, браузер передаёт выбранную услугу и согласованные контактные сведения. Сервер проверяет обязательные поля, допустимые значения и ограничения размера. Затем он сохраняет запись и возвращает ответ. Только после подтверждённого сохранения интерфейс должен сообщить, что заявка принята. При ошибке нужно показать понятное сообщение и не создавать ложного впечатления успеха.

Особенно важно понимать границу доверия. Пользователь управляет своим браузером и может изменить отправляемые данные. Проверка «поле обязательно» на странице удобна, но её можно обойти. Поэтому сервер повторяет важные проверки самостоятельно. Он не должен принимать цену ремонта, право администратора или факт оплаты только потому, что эти значения прислал интерфейс.

4. Где живут данные и почему это влияет на поведение

Данные могут находиться в разных местах. В переменной программы они обычно живут, пока работает соответствующая часть страницы. В браузерном хранилище они могут сохраняться между посещениями на одном устройстве. В базе сервера они доступны согласно правилам приложения и могут использоваться с разных устройств.

Для примера сравните отметку «урок прочитан» и заявку на ремонт. Личную отметку иногда удобно хранить только в браузере: её потеря неприятна, но не нарушает работу мастерской. Заявка должна быть доступна ответственному сотруднику и не исчезать при закрытии вкладки посетителя. Поэтому её место — в защищённом серверном хранилище.

База данных похожа на организованный журнал, а не на случайную стопку записок. У заявки есть определённые поля: идентификатор, услуга, состояние и время создания. Идентификатор — значение, позволяющее отличить одну запись от другой. Две заявки могут иметь одинаковую услугу и похожее описание, но разные идентификаторы.

Хранение требует правил. Кто может видеть заявку? Кто может изменить состояние? Какие сведения действительно нужны? Как долго они сохраняются? Эти вопросы нельзя решить одним выбором популярной базы. Технология предоставляет возможности, а смысл и ограничения определяет проект.

Не собирайте сведения «на всякий случай». Для учебного упражнения используйте вымышленные записи без реальных контактов. Для настоящего проекта заранее уточняйте необходимость полей, основания обработки и требования к защите. Подробно разберём это в занятии о безопасности и правовых вопросах, но принцип минимизации данных полезен уже сейчас.

Резервная копия — отдельная сохранённая копия данных, предназначенная для восстановления после потери или повреждения. Наличие базы не означает, что резервирование уже настроено. И наличие копии не доказывает, что восстановление работает: этот процесс тоже требуется проверять.

5. Домен, хостинг и защищённое соединение

Домен и хостинг решают разные задачи. Домен помогает человеку найти сайт по удобному имени. Хостинг предоставляет место для файлов и выполнения программы. Можно изменить хостинг, сохранив домен, или разместить проект по техническому адресу без собственного доменного имени. Поэтому покупка домена сама по себе не создаёт работающий сайт.

При настройке домена указывают записи DNS — правила, связывающие имя с инфраструктурой. Изменение таких записей может становиться видимым не одновременно во всех местах, поскольку часть ответов временно сохраняется. Это временное сохранение называют кэшированием. Кэш ускоряет повторные обращения, но иногда объясняет, почему два устройства какое-то время видят разные результаты.

HTTPS защищает передачу между браузером и сервером и помогает удостовериться, что соединение установлено с сервером для нужного имени. При этом значок защищённого соединения не доказывает честность владельца сайта, качество программы или безопасность базы. Мошенническая страница тоже может использовать HTTPS. Проверка адреса и смысла действий остаётся необходимой.

Сертификат — цифровой документ, участвующий в подтверждении подлинности сервера. Обычно хостинг помогает получать и обновлять сертификат, но условия конкретного сервиса нужно проверять. Не обещайте клиенту вечную работоспособность домена и сертификата без понимания, кто следит за их состоянием и оплачивает необходимые услуги.

При выборе среды размещения сначала перечислите требования проекта. Нужны ли только публичные страницы? Нужна ли серверная программа? Требуется ли база? Где должны обрабатываться данные? Затем сравнивайте предложения. Самый дешёвый тариф может подходить для визитки и не подходить для системы записи; это не делает его плохим, просто задачи различаются.

Разбор на примере

Посетитель открывает сайт мастерской. Браузер находит нужный сервер через доменное имя и получает страницу услуг. Пока человек читает описание, база заявок может вообще не участвовать в работе. Затем он выбирает настройку тормозов и открывает форму обращения.

После отправки браузер передаёт запрос серверу. Сервер проверяет, существует ли выбранная услуга, заполнено ли описание и не превышен ли допустимый размер сообщения. Если данные подходят, он сохраняет заявку с собственным идентификатором и состоянием «получена». Затем возвращает подтверждение, а интерфейс показывает его посетителю.

Теперь рассмотрим сбой связи. Посетитель нажал кнопку, но ответа не получил. Нельзя автоматически считать, что заявка не создана: сервер мог сохранить её до обрыва соединения. В более развитой системе предусматривают защиту от повторной отправки одного действия. Пока достаточно понять саму проблему и не проектировать интерфейс так, будто сеть всегда работает идеально.

Владелец открывает список заявок с другого устройства. Сервер должен проверить его право доступа, а уже затем вернуть данные. Скрытая кнопка «Администрирование» не является защитой: человек может обратиться к адресу напрямую. Важно проверять разрешение там, где выдаются сведения, а не только там, где рисуется ссылка.

Готовые промпты для ИИ

Первый запрос помогает превратить идею в схему. Подставьте реальные возможности первой версии, а не желаемые функции будущего продукта.

Объясни архитектуру моего учебного проекта без лишних технологий.
Проект: сайт велосипедной мастерской.
Первая версия: список услуг и форма обращения.
Раздели действия между браузером, сервером и базой данных.
Для каждого действия укажи входные данные, проверку и результат.
Отдельно объясни, что нельзя доверять данным из браузера.
Не выбирай платные сервисы и не пиши код до согласования схемы.

Второй запрос используйте для проверки понимания. Сначала самостоятельно напишите схему, затем сравните замечания помощника с материалом урока.

Проверь моё объяснение пути заявки: [вставьте свою схему].
Найди места, где я путаю интерфейс, сервер и хранение.
Для каждой ошибки дай короткую аналогию и исправленное объяснение.
Не добавляй личный кабинет, оплату и другие новые функции.
В конце предложи три ситуации отказа, которые стоит предусмотреть.

Типичные ошибки новичков

• Считать, что сообщение на экране означает сохранение. Интерфейс может показать любой текст. Связывайте успех с подтверждённым ответом сервера и проверяйте появление записи в хранилище.
• Хранить секрет в файле страницы. Всё, что отправлено браузеру, потенциально доступно посетителю. Ключи к закрытым сервисам должны оставаться на сервере, а публичные ключи нужно отличать от секретных по документации поставщика.
• Проверять права только скрытием кнопки. Скрытый интерфейс не препятствует прямому запросу. Разрешение проверяется перед чтением или изменением защищённых данных.
• Путать домен с программой. Имя помогает найти сайт, но не содержит его логику. При проблеме проверяйте отдельно адресацию, доступность хостинга и работу приложения.
• Доверять только счастливому сценарию. Пустое поле, неверная услуга, повторное нажатие и потеря связи — обычные условия. Добавьте их в план проверки ещё до написания формы.

Практическое задание

За сорок пять — семьдесят минут нарисуйте схему обращения в мастерскую. Используйте четыре прямоугольника: посетитель, браузер, сервер и база. Подпишите стрелки: что передаётся, что проверяется и какой ответ возвращается. Отдельно нарисуйте владельца, который получает список заявок после проверки доступа.

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

Работа готова, если вы можете объяснить путь одной заявки за несколько минут, не используя фразу «оно само сохраняется». У каждой важной проверки есть место выполнения. Вы различаете сведения, которые видны всем, и сведения, доступные только владельцу. Дополнительно откройте минимальный HTML-файл из урока и убедитесь, что изменение текста файла меняет страницу после обновления.

Самопроверка

Краткий итог

Интернет-продукт можно понимать как цепочку обращений и проверок. Браузер показывает интерфейс, сервер выполняет доверенные действия, база хранит сведения, домен помогает найти нужную инфраструктуру, а HTTPS защищает передачу. Не каждой задаче нужны все части, но роли выбранных частей должны быть ясны.

В следующем уроке выберем инструменты для работы с этой системой. Вы увидите, чем разговорный ИИ-помощник отличается от редактора проекта и почему полезно начинать с доступного набора, а не собирать коллекцию сервисов.