Как делают веб-приложения

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

О чём материал

В главе 1 — клиент, сервер, обзор HTTP, JSON и REST. Здесь собрана карта сборки веб-приложения: интерфейс, сервер, база, перенос с localhost на prod и рост нагрузки.

Материал опирается на разделы

Play ITЗагрузка интерактивного демо…

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

API — набор адресов и правил обмена данными. В вебе чаще HTTP + JSON — глава 1, REST, GraphQL. Термины стека — итоги, терминология.

Планирование архитектуры

Перед установкой React или Django имеет смысл зафиксировать требования. Четыре стартовых вопроса:

Кто пользователь и какие действия выполняет

определяет список экранов и форм;
нужны ли роли (гость, администратор, модератор);
нужна ли авторизация и регистрация.

Нужна ли видимость в поисковиках и быстрый первый экран

для публичного каталога и статей важен SEO (Search Engine Optimization, продвижение в поиске);
для закрытого личного кабинета SEO обычно вторичен;
выбор между SPA и серверным рендером описан ниже и в архитектуре веб-приложений.

Какие данные хранятся и в каком объёме

настройки интерфейса — в браузере;
демо-прототип — файл JSON или SQLite;
заказы, пользователи, платежи — SQL.

Будут ли пики нагрузки и фоновые задачи

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

У новичка и у небольшого MVP обычно монолит — один репозиторий в Git, один процесс API, одна база. Микросервисы имеет смысл подключать после появления конкретного узкого места в монолите.

Интерфейс в браузере

Статический сайт

На сервере лежат готовые файлы HTML, CSS, JavaScript. Сервер отдаёт файлы как есть, без программной сборки страницы под каждый запрос. Подходит для визиток, документации, лендингов — статический сайт в главе 1, публикация через GitHub Pages.

Многостраничное приложение (MPA)

MPA (Multi-Page Application) — классическая схема. При каждом переходе браузер запрашивает новую HTML-страницу с сервера. JavaScript добавляет интерактивность поверх разметки.

валидация полей формы;
выпадающее меню;
запрос к API через fetch без перезагрузки отдельного блока.

Плюсы MPA

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

Минусы MPA

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

База — HTML, CSS, JavaScript.

Одностраничное приложение (SPA)

SPA (Single Page Application) — в браузер приходит одна HTML-оболочка (часто пустой <div id="root">). Дальше интерфейс рисует JavaScript: маршруты меняются без полной перезагрузки, данные подгружаются с API.

Плюсы SPA

быстрые переходы внутри приложения после первой загрузки;
удобные формы, таблицы, дашборды;
чёткое разделение ролей — сервер отдаёт данные, клиент рисует интерфейс.

Минусы SPA

первая загрузка тяжелее из-за JavaScript-бандла;
для SEO и быстрого первого экрана часто нужен SSR (Server-Side Rendering, рендер HTML на сервере) или SSG (Static Site Generation, сборка страниц при деплое).

Подробнее — SPA и SSR, особенности современных веб-приложений, как выбрать фронтенд-фреймворк.

Сборщик модулей (Vite, Webpack)

Современный фронтенд пишут модулями — файлами со import и export. Браузер понимает их не во всех сценариях. Сборщик (bundler) объединяет JavaScript, CSS и картинки в пакеты для разработки и для production.

Vite — dev-сервер с быстрой перезагрузкой; часто используют с React и Vue;
Webpack — зрелый сборщик в долгоживущих проектах;
Rollup — компактные бандлы для библиотек.

Теория — сборка и публикация. Команды npm, vite, eslint — справочник CLI JS-экосистемы. Структура проекта — 4.04 Проект и фреймворки.

Фронтенд-фреймворки

Ниже — популярные надстройки над JavaScript. Часто проект переводят на TypeScript для строгой типизации.

React

React — библиотека для построения интерфейса из компонентов (переиспользуемых блоков UI). Огромная экосистема, много вакансий.

Vue

Vue — прогрессивный фреймворк с мягким входом и Composition API для организации логики.

Angular

Angular — полноценный фреймворк от Google.

модули и внедрение зависимостей (DI);
TypeScript по умолчанию;
RxJS для потоков событий.
о разделе Angular;
первая программа;
DI, RxJS и формы.

Обзор всех фронтенд-стеков — Frontend Frameworks. Один язык на клиенте и сервере — fullstack на JavaScript. Next.js добавляет SSR и маршрутизацию поверх React — meta-frameworks / Next.js.

Практика без установки — Lab / React, компоненты, fetch и axios.

Серверная часть и API

Бэкенд принимает HTTP-запросы, проверяет авторизацию, читает и пишет в базу, возвращает JSON или готовый HTML. Язык часто выбирают по команде, вакансиям или готовым библиотекам.

Полный справочник open-source фреймворков по языкам (Django, NestJS, Spring Boot, Gin, Laravel и др.) — Open-source веб-фреймворки.

Node.js и Express

Node.js — среда выполнения JavaScript на сервере (не в браузере). Express — популярный фреймворк для REST API и middleware-цепочек.

Python, Django и Flask

Django — фреймворк с ORM, админ-панелью, шаблонами и маршрутизацией в одном проекте. Удобен для сайтов с формами и внутренних систем.

Flask — минималистичный каркас для небольшого API или микросервиса — Flask.

Java, Spring и Spring Boot

Spring Framework — стандарт enterprise-бэкенда на JVM (внедрение зависимостей, MVC, доступ к данным, безопасность). Spring Boot упрощает старт — встроенный Tomcat и автоконфигурация.

C# и ASP.NET Core

ASP.NET Core — кроссплатформенный стек Microsoft для веб-API, MVC и middleware на .NET.

Другие языки

PHP — классический shared-хостинг, Laravel и Symfony;
Go — компилируемый язык, высокая производительность API;
Ruby on Rails — быстрый старт CRUD-приложений.

Полный каталог — том 5, языки.

Два способа отдать страницу пользователю

Серверные шаблоны

Django templates, Razor в ASP.NET, JSP в Java EE;
сервер собирает HTML и отправляет готовую страницу;
удобно для MPA и SEO "из коробки".

API и отдельный фронтенд

сервер отвечает JSON;
HTML и маршруты строит SPA в браузере;
типичная схема для React/Vue/Angular.

Связь с базой — через ORM или прямые SQL-запросы. Слои доступа к данным — 4.10, глава 1.

Хранение данных

В браузере — localStorage и sessionStorage

Web Storage — встроенное хранилище в браузере.

localStorage — данные живут, пока пользователь не очистит сайт вручную;
sessionStorage — данные исчезают при закрытии вкладки.

Подходят для настроек интерфейса

тёмная тема;
выбранный язык;
флаг "обучение пройдено";
черновик формы до отправки на сервер.

Ограничения

данные привязаны к одному браузеру на одном устройстве;
другой пользователь или другой компьютер их не увидят;
при очистке кэша браузера данные пропадут.

Пароли, токены доступа и персональные данные в localStorage опасны. При XSS вредоносный скрипт может их прочитать. Для сессий чаще используют cookie с флагом HttpOnly — аутентификация и сессии, таблица хранилищ в 1.23.

JSON-файл на сервере

Файл data.json с массивом записей удобен для демо, конфигурации и первого CRUD.

Ограничения

при одновременной записи двух запросов возможна гонка (один перезапишет другой);
нет транзакций (атомарного "всё или ничего");
поиск и фильтрация по большому файлу медленные.

Формат JSON — 3.04. Конфиги приложений — конфигурации и данные, JSON Schema и OpenAPI.

SQLite

SQLite — вся база в одном файле на диске. Не требует отдельного сервера СУБД. Хорош для локальной разработки и небольших приложений.

SQLite на практике;
один активный писатель за раз — при высокой конкуренции записи узкое место.

Реляционная СУБД (основное хранилище)

Для заказов, пользователей, платежей и любых данных, которые нельзя потерять, берут SQL-базу

СУБД даёт

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

Обзор SQL — 3.07. Администрирование — 3.08. Практикум — PostgreSQL. Основы моделирования — 3.05 Основы БД.

Redis и NoSQL для ускорения

Redis — хранилище в оперативной памяти. Используют как

кэш часто читаемых данных (профиль, справочник);
хранилище сессий;
счётчик rate limit (ограничение числа запросов с одного IP).

MongoDB, Elasticsearch и другие NoSQL применяют, когда реляционная модель неудобна — документы, полнотекстовый поиск, гибкая схема.

Основные данные остаются в SQL. Redis хранит копии для быстрого доступа; при очистке кэша приложение снова читает из основной базы — кэш вне СУБД, Redis Stack, ограничения ORM.

Очереди сообщений

Иногда пользователю нужен быстрый ответ "заявка принята", а тяжёлую работу выполняют позже в фоне.

RabbitMQ

классический брокер сообщений;
задачи в очереди — отправка email, ресайз картинки, выгрузка отчёта;
теория в 2.09;
углубление в 8.05;
справочник RabbitMQ.

Apache Kafka

поток событий — лог действий, интеграция между сервисами, аналитика;
теория в 2.09;
углубление в 8.05;
справочник Kafka.

Пошаговая сборка Producer → Topic → Consumer → PostgreSQL — практикум Kafka и Java. Асинхронная коммуникация в MSA — 8.05 / асинхронная.

От localhost до боевого сервера

Разработка почти всегда идёт на localhost (127.0.0.1) — приложение слушает порт на вашем компьютере, например http://localhost:3000. Запуск и перезапуск приложений — как поднять dev-сервер.

Код переносят через Git. На сервере обновляют настройки окружения (адреса, ключи, строка подключения к БД). Исходники с бизнес-логикой остаются теми же.

Что меняется при переносе

Адрес API

локально — http://localhost:3000;
на сервере — https://api.example.com.

База данных

локально — Docker с PostgreSQL или SQLite — Docker для API и БД;
на сервере — managed PostgreSQL в облаке или своя установка СУБД.

Секреты

локально — файл .env в .gitignore;
на сервере — переменные среды, HashiCorp Vault;
безопасность .env.

CORS

локально часто помогает proxy dev-сервера Vite;
на сервере API явно разрешает нужные origin — CORS.

Статика фронтенда

локально — Vite dev server;
на сервере — nginx, CDN или объектное хранилище — как работают сайты, HTTPS.

Жёстко прописанный localhost в коде — частая ошибка новичка. Адреса выносят в переменные окружения — см. главу 1, .env.

Перенос данных между средами

Схема таблиц — миграции (Alembic для Python, Flyway для Java, EF Migrations для .NET) или SQL-дамп структуры.
Содержимое — pg_dump и pg_restore, экспорт CSV, одноразовый скрипт.
Проверка — smoke-тест API на staging (предбоевой стенд) до переключения DNS на production.

Деплой и пайплайн — 8.04 DevOps, основы инфраструктуры, GitHub Actions. Чек-лист перед первым деплоем — глава 1.

Масштабирование и отказоустойчивость

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

Вертикальное масштабирование — увеличить CPU и RAM на той же виртуальной машине.
Горизонтальное масштабирование — запустить несколько копий API за балансировщиком нагрузки (распределяет запросы по здоровым узлам).
Репликация БД — запись на primary, чтение с read-replica (копии для SELECT).
Контейнеры — одинаковый образ Docker на каждом узле; оркестратор (Kubernetes) поднимает нужное число реплик.
Очереди — сглаживают пики записи и выносят тяжёлую работу из HTTP-запроса.

Материалы по темам

Для pet-проекта хватает одного VPS или одного контейнера.

Три типовые схемы

Первый монолит

Браузер → Django или Express → PostgreSQL

один репозиторий;
один процесс деплоя;
подходит для первого CRUD — HTTP и API, curl / 1133.

SPA и REST API

Браузер (React и Vite) → nginx → API (Node, Java или C#) → PostgreSQL
                                           ↓
                                        Redis

фронтенд и бэкенд могут вести разные разработчики;
контракт API описывают в OpenAPI — JSON Schema и OpenAPI;
проектирование API.

Продакшен при росте нагрузки

Клиент → балансировщик → несколько API в контейнерах
                              ↓
              PostgreSQL (primary и replica)
                              ↓
                   Redis, RabbitMQ или Kafka

Практика двух связанных сервисов — REST и WebSocket. Интеграции в целом — 2.09.

Буква	Технология	Роль
M	MongoDB	Документная база; записи похожи на JSON и объекты JS
E	Express	Минималистичный фреймворк HTTP API на Node.js — 263
R	React	Интерфейс в браузере (SPA)
N	Node.js	Выполнение JavaScript на сервере

Буква	Технология	Роль
L	Linux	Операционная система сервера
A	Apache	Веб-сервер; отдаёт PHP и статические файлы
M	MySQL	Реляционная база данных
P	PHP	Серверная логика и шаблоны страниц

CMS и конструкторы

CMS (Content Management System, система управления контентом) — готовая платформа с админкой, темами и плагинами. Не нужно писать весь сайт с нуля.

Подход	Примеры	Когда подходит
WordPress	блог, визитка, WooCommerce	Заказчик сам правит тексты
Headless CMS	Strapi, Directus	Контент в CMS, фронт на React
Конструктор	Tilda, Readymag	Быстрый лендинг без программирования
Своё приложение	Django, MERN	Уникальная логика, свой API

WordPress хранит страницы в MySQL и отдаёт HTML через PHP-тему. Разработчик настраивает тему и плагины; глубокая доработка снова требует PHP, CSS и JavaScript.

Типичный путь для бизнеса — быстрый старт на CMS, затем переписывание узких мест своим кодом. Выбор пути — глава 6.

HTTP и API в проекте

Практическая работа с протоколом: отладка запросов, авторизация, контракт API и локальный стек. Обзор терминов — глава 1; углубление — 2.09.

Play ITЗагрузка интерактивного демо…

URL, query и body

https://app.example.com:443/api/tasks?page=1&sort=title#section
└─┬─┘   └──────┬──────┘ └┬┘ └─────┬─────┘ └──────┬──────┘ └──┬──┘
scheme      host       port    path         query       fragment

Query — в URL: GET /api/tasks?done=false&limit=10. Body — в POST/PUT, часто JSON. Фильтры списка — query; создание записи — body POST.

Порядок работы с API

Прочитать документацию (OpenAPI, README).
Проверить запрос в curl или Postman — Lab / 1133.
Написать клиент (fetch, axios) — глава 5.
Обработать 4xx/5xx и валидацию.
Отладить в DevTools.

Walkthrough — CRUD задач (curl)

curl -s http://localhost:3000/api/tasks
curl -s http://localhost:3000/api/tasks/1
curl -s -X POST http://localhost:3000/api/tasks \
  -H "Content-Type: application/json" \
  -d '{"title":"Купить хлеб","done":false}'
curl -s -X PATCH http://localhost:3000/api/tasks/1 \
  -H "Content-Type: application/json" \
  -d '{"done":true}'
curl -s -X DELETE http://localhost:3000/api/tasks/1

Ожидания: 200/201 на успех, 404 без id, 204 на удаление без тела.

Авторизация

Сессия — POST /login, сервер отдаёт Set-Cookie, браузер шлёт Cookie на каждый запрос. JWT — токен в Authorization: Bearer …; сервер проверяет подпись без поиска сессии в БД. Подробнее — аутентификация.

Middleware и ошибки

Middleware — цепочка до handler: CORS, auth, парсинг JSON. Единый формат ошибки помогает фронту:

{"error": "validation_failed", "message": "title is required", "fields": {"title": "must not be empty"}}

Типичные ошибки бэкенда.

OpenAPI, Content-Type, загрузка файлов

OpenAPI — описание endpoints для /docs и согласования с фронтом — JSON Schema и OpenAPI.

Content-Type — формат тела (application/json, multipart/form-data для файлов). Accept — что клиент готов принять.

Rate limit — ответ 429 Too Many Requests при превышении лимита. Idempotency-Key — защита от двойного POST при платежах — HTTP-методы.

CORS и preflight

Для «непростых» запросов браузер сначала шлёт OPTIONS (preflight). Сервер отвечает разрешёнными origin и методами — CORS / 411. В dev часто используют proxy bundler'а (Vite, Webpack).

Кэш, WebSocket, SPA

Cache-Control и ETag — кэш статики; API с персональными данными — no-store. WebSocket — постоянное соединение для чата и live-обновлений — 2.09.

Подход	Где рендерится HTML
SPA	в браузере (React в `#root`)
SSR	на сервере каждый запрос
SSG	при сборке

Локальный стек и деплой

Чек-лист перед prod: HTTPS, секреты не в Git, CORS только для нужных origin, обработка 4xx/5xx на фронте, логи без паролей, тесты в CI — DevOps.

Чек-лист выбора стека

Зафиксирована схема — монолит с шаблонами или отдельный SPA и API.
Источник правды для бизнес-данных — таблицы в SQL.
Секреты и URL API лежат в окружении, в Git их нет.
Решено, нужны ли уже сейчас Redis и очередь, или достаточно одной БД.
Есть план переноса — миграции, staging, HTTPS.
Понятно, куда смотреть при росте — балансировка, контейнеры, реплики.

Вопросы по HTTP и API — чек-лист раздела. Краткое резюме — итоги.

Куда читать дальше

Протокол и отладка

Языки и фреймворки

Данные

Инфраструктура

О чём материал​

Планирование архитектуры​

Интерфейс в браузере​

Статический сайт​

Многостраничное приложение (MPA)​

Одностраничное приложение (SPA)​

Сборщик модулей (Vite, Webpack)​

Фронтенд-фреймворки​

React​

Vue​

Angular​

Серверная часть и API​

Node.js и Express​

Python, Django и Flask​

Java, Spring и Spring Boot​

C# и ASP.NET Core​

Другие языки​

Два способа отдать страницу пользователю​

Хранение данных​

В браузере — localStorage и sessionStorage​

JSON-файл на сервере​

SQLite​

Реляционная СУБД (основное хранилище)​

Redis и NoSQL для ускорения​

Очереди сообщений​

От localhost до боевого сервера​

Что меняется при переносе​

Перенос данных между средами​

Масштабирование и отказоустойчивость​

Три типовые схемы​

Первый монолит​

SPA и REST API​

Продакшен при росте нагрузки​

Популярные стеки — MERN, LAMP и аналоги​

MERN — JavaScript на клиенте и сервере​

LAMP — классика shared-хостинга​

Django, Rails, Spring​

Серверные шаблоны и SPA​

CMS и конструкторы​

HTTP и API в проекте​

URL, query и body​

Порядок работы с API​

Walkthrough — CRUD задач (curl)​

Авторизация​

Middleware и ошибки​

OpenAPI, Content-Type, загрузка файлов​

CORS и preflight​

Кэш, WebSocket, SPA​

Локальный стек и деплой​

Чек-лист выбора стека​

Куда читать дальше​

Связанные темы

См. также

📄️Что такое веб-разработка

📄️Веб-разработка — итоги

📄️Веб-разработка — чек-лист

📄️HTML, CSS и JavaScript — три слоя веб-страницы

📄️От идеи до работающего сайта

📄️Основы веб-дизайна для разработчика

📄️Open-source веб-фреймворки