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

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

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

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

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

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

API (Application Programming Interface) — набор адресов и правил, по которым клиент получает и отправляет данные. В вебе чаще всего это HTTP и JSON — подробнее в главе 1 и REST, GraphQL и gRPC.

Словарь перед выбором стека

Термин	Коротко
Фронтенд	Всё, что работает в браузере пользователя — разметка, стили, логика интерфейса
Бэкенд	Программа на сервере — API, проверка прав, работа с базой
Стек	Набор технологий в проекте (язык, фреймворк, СУБД, хостинг)
Монолит	Одно приложение и обычно одна кодовая база; все функции в одном деплое
MVP (Minimum Viable Product)	Минимальная рабочая версия продукта для проверки идеи
Деплой (deployment)	Выкладка собранной версии приложения на сервер, доступный пользователям
СУБД	Система управления базами данных — PostgreSQL, MySQL и др.
ORM	Библиотека, которая связывает таблицы БД с объектами в коде — 4.10 ORM

Роли в команде — 1.23 Фронтенд и бэкенд. Путь от URL до страницы на экране — 2.04 Сайты.

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

Перед установкой 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. Язык часто выбирают по команде, вакансиям или готовым библиотекам.

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 или одного контейнера. Знание nginx, Redis и второй реплики API пригодится на собеседованиях и при чтении архитектурных схем в команде — паттерны MSA.

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

Учебный монолит

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

один репозиторий;
один процесс деплоя;
подходит для первого CRUD — мини-проект в главе 1, Lab / curl.

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.

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

Зафиксирована схема — монолит с шаблонами или отдельный 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​

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

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

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

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

См. также

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

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

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