Веб-сайты и веб-приложения — итоги
Кратко — что стоит унести из раздела "Веб-сайты и веб-приложения". Если пункт кажется туманным — откройте указанную главу или оглавление.
FAQ — Часто задаваемые вопросы
Типичные проблемы при работе с сайтами и веб-приложениями. Ниже также — формулировки, как в поиске Google; краткий ответ и ссылка на главу. Формулировки для самопроверки — в чек-листе.
Вопрос. Изменил HTML на сервере, а в браузере старая версия — кэш?
Ответ. Браузер, CDN и прокси могут отдавать кэш. Жёсткое обновление (Ctrl+F5), режим инкognito, очистка кэша или версия в URL (?v=2). Подробнее здесь — как работает сайт, CDN.
Вопрос. Сайт на localhost открывается, на хостинге — белый экран.
Ответ. Разные окружения: версия PHP/Node, пути, права на файлы, .env, база. Смотрите логи сервера и DevTools → Console/Network. Подробнее здесь — веб-серверы, клиент-сервер.
Вопрос. Картинки и стили "сломались" после переноса сайта в подпапку.
Ответ. Часто относительные пути (/css/style.css vs css/style.css) и base URL. Проверьте Network в DevTools — код 404. Подробнее здесь — структура сайта, как работает сайт.
Вопрос. Форма отправляется, но данные не доходят — где искать?
Ответ. Цепочка форма → HTTP-метод → backend → БД. Смотрите вкладку Network: статус 404/500, CORS, пустой ответ. Подробнее здесь — бэкенд, как работает сайт.
Вопрос. "CORS error" в консоли — сайт "сломан" для всех?
Ответ. Браузер блокирует JS-запрос с другого origin без заголовков CORS на сервере. API должно явно разрешить домен фронта. Подробнее здесь — безопасность, бэкенд.
Вопрос. Логин проходит, но после обновления страницы снова "войти".
Ответ. Сессия или cookie не сохраняются — Secure, SameSite, другой домен, http вместо https. Проверьте Application → Cookies в DevTools. Подробнее здесь — cookies и хранилища, бэкенд.
Вопрос. SPA: в адресной строке URL меняется, а сервер при прямой ссылке отдаёт 404.
Ответ. Маршрутизация на клиенте; сервер должен отдавать index.html для всех путей (fallback). Настройте nginx/Apache rewrite. Пошаговый конфиг nginx — Nginx — конфиги под задачу. Подробнее здесь — SPA, веб-серверы.
Вопрос. Сайт "мигает" белым при каждом переходе — это нормально для React?
Ответ. Типично для CSR без SSR — HTML приходит пустым, потом JS рисует UI. SSR/SSG или прелоадер улучшают первый кадр. Подробнее здесь — SPA, SSR.
Вопрос. Google не индексирует мой SPA — "страниц нет".
Ответ. Поисковику нужен рендерируемый HTML — SSR, SSG или prerender. Чистый CSR без pre-render хуже для SEO. Подробнее здесь — SSR, архитектура.
Вопрос. На телефоне сайт "уехал" вбок, на ПК нормально.
Ответ. Нет viewport и адаптивной вёрстки — фиксированная ширина ломается на узком экране. Медиа-запросы и flex/grid. Подробнее здесь — структура и UX, веб-дизайн.
Вопрос. WordPress после обновления плагина — "критическая ошибка".
Ответ. Отключите плагины через FTP/SSH (переименуйте папку), включайте по одному. Делайте бэкап до обновления. Подробнее здесь — CMS и конструкторы.
Вопрос. Tilda/Wix: оплатил домен, а сайт открывается только по адресу конструктора.
Ответ. Нужно привязать DNS (A/CNAME) к платформе и дождаться распространения (до 24–48 ч). Подробнее здесь — Tilda, как работает сайт, DNS.
Вопрос. npm run dev работает, npm run build падает с ошибкой.
Ответ. Production-сборка строже: tree-shaking, минификация, другие env-переменные. Читайте stack trace; часто опечатка в import или process.env. Подробнее здесь — инструменты разработки, SPA.
Вопрос. DevTools показывает 404 на favicon.ico — критично?
Ответ. Сайт работает; иконка вкладки просто не задана. Положите favicon.ico в корень или укажите <link rel="icon">. Подробнее здесь — DevTools, структура.
Вопрос. "Mixed content" — страница https, а скрипт грузится по http.
Ответ. Браузер блокирует незащищённые ресурсы на HTTPS-странице. Замените ссылки на https:// или относительные. Подробнее здесь — HTTPS и TLS, безопасность.
Вопрос. Сайт тормозит — Lighthouse ругается на " Largest Contentful Paint ".
Ответ. Оптимизируйте главное изображение, шрифты, блокирующий JS, включите кэш и CDN. Подробнее здесь — метрики скорости, CDN.
Вопрос. Вставил скрипт с чужого CDN — сайт взломали через подмену файла.
Ответ. Используйте SRI (integrity), свой хостинг статики или проверенный CDN. Supply-chain атака на популярные библиотеки реальна. Подробнее здесь — безопасность.
Вопрос. Пользователь жалуется "кнопка не работает", у меня всё ок.
Ответ. Другой браузер, блокировщик рекламы, старая версия, медленная сеть. Воспроизведите в DevTools с throttling; проверьте Console на ошибки JS. Подробнее здесь — DevTools, движки браузеров.
Вопрос. ERR_CONNECTION_REFUSED — сервер "лежит"?
Ответ. На IP:порт никто не слушает — сервис не запущен, firewall, неверный порт в URL. Подробнее здесь — ошибки браузера, веб-серверы.
Вопрос. Apache и Nginx на одном сервере — зачем оба?
Ответ. Часто Nginx — reverse proxy и SSL, Apache или app-сервер — backend (PHP, Tomcat). Или только один стек — зависит от архитектуры. Примеры proxy и TLS — Nginx — конфиги под задачу. Подробнее здесь — веб-серверы.
Вопрос. REST API возвращает 200, но JSON "пустой" — баг фронта или бэка?
Ответ. Смотрите тело ответа в Network — возможно, пустой массив от сервера или фронт парсит не то поле. Подробнее здесь — бэкенд, DevTools.
Вопрос. Webhook "не срабатывает" — URL правильный.
Ответ. Сервер отправителя должен достучаться до вашего HTTPS из интернета; localhost не подойдёт без туннеля (ngrok). Проверьте логи и подпись webhook. Подробнее здесь — real-time и webhook, бэкенд.
Вопрос. Cookie-баннер "принять всё" — можно игнорировать при разработке?
Ответ. Для локальной отладки — да; в проде согласие и категории cookies связаны с GDPR и 152-ФЗ. Тестируйте сценарии "отказ от аналитики". Подробнее здесь — cookies, персонализация.
Вопрос. PWA "Установить приложение" не появляется на iPhone.
Ответ. Safari поддерживает PWA иначе, чем Chrome — manifest, icons, service worker, HTTPS. Часть функций только через "На экран Домой". Подробнее здесь — PWA.
Вопрос. GitHub Pages: репозиторий есть, сайт по username.github.io — 404.
Ответ. Проверьте ветку Pages, папку /docs или root, имя репозитория username.github.io, Actions workflow. Подробнее здесь — размещение на GitHub Pages, инструменты.
Вопрос. "Сайт работает у меня, заказчик из другого города видит старую версию".
Ответ. CDN или DNS ещё отдают старый кэш с edge-узла. Purge CDN, проверьте TTL DNS. Подробнее здесь — CDN, как работает сайт.
Вопрос. Хочу "просто HTML без сервера" — форма с email отправится?
Ответ. Чистый статический HTML не обрабатывает POST без backend или стороннего сервиса форм (Formspree и т.п.). Подробнее здесь — типы сайтов, бэкенд.
Вопрос. Как создать сайт с нуля бесплатно — с чего начать?
Ответ. Путь новичка: HTML/CSS → GitHub Pages или Tilda → при необходимости backend. Бесплатно — статика и конструкторы с ограничениями. Подробнее здесь — как работает сайт, CMS и конструкторы.
Вопрос. HTML CSS JavaScript — что за что отвечает на сайте?
Ответ. HTML — структура. CSS — вид. JavaScript — поведение и запросы к API. Подробнее здесь — структура сайта, как работает сайт.
Вопрос. Чем сайт отличается от веб-приложения?
Ответ. Сайт чаще показывает контент (статьи, визитка). Веб-приложение — интерактив (почта, банк, Trello) с состоянием и API. Граница размыта. Подробнее здесь — типы сайтов, SPA.
Вопрос. Что происходит, когда вводишь URL и нажимаешь Enter?
Ответ. DNS → TCP/TLS → HTTP-запрос → HTML → CSS/JS → рендер. Подробнее здесь — как работает сайт, HTTPS.
Вопрос. Nginx или Apache — что выбрать для своего сервера?
Ответ. Nginx — reverse proxy, статика, высокая нагрузка. Apache — .htaccess, shared-хостинг. Часто Nginx спереди, app сзади. Справочник — Nginx; готовые конфиги — Nginx — конфиги под задачу. Подробнее здесь — веб-серверы.
Вопрос. Хостинг и домен — в чём разница и что купить первым?
Ответ. Домен — имя (site.ru). Хостинг — сервер с файлами и IP. DNS связывает их A-записью. Подробнее здесь — как работает сайт, DNS.
Вопрос. WordPress или Tilda — что выбрать для первого сайта?
Ответ. Tilda — быстро, без кода, ограниченный экспорт. WordPress — гибкость, свой хостинг, плагины. Подробнее здесь — CMS и конструкторы, Tilda.
Вопрос. SPA React Vue — что это и зачем фронтенд-фреймворк?
Ответ. Single Page Application — одна HTML-страница, маршруты и UI на JS. Удобно для дашбордов; SEO сложнее без SSR. Подробнее здесь — SPA.
Вопрос. SSR и CSR — разница для SEO и скорости?
Ответ. CSR — HTML в браузере (React). SSR — HTML с сервера (Next.js). SSR лучше для первого экрана и поисковиков. Подробнее здесь — SSR, SPA.
Вопрос. REST API — что это простыми словами для сайта?
Ответ. Набор HTTP-методов (GET, POST…) к URL /api/users — фронт и мобилка получают JSON с сервера. Подробнее здесь — бэкенд.
Вопрос. Cookies на сайте — зачем "принять все" и что хранится?
Ответ. Cookies — небольшие данные в браузере: сессия, корзина, аналитика. Третьи стороны — отдельная политика GDPR. Подробнее здесь — cookies и хранилища.
Вопрос. SSL-сертификат Let's Encrypt — как получить HTTPS бесплатно?
Ответ. Certbot или панель хостинга выпускает cert на 90 дней с автопродлением. Нужен доступ к домену и серверу. Подробнее здесь — HTTPS и TLS, как работает сайт.
Вопрос. Как ускорить сайт — чек-лист для новичка?
Ответ. Сжать изображения, CDN, минификация CSS/JS, lazy load, кэш. Мерить Lighthouse и Core Web Vitals. Подробнее здесь — метрики скорости, CDN.
Вопрос. Core Web Vitals LCP FID CLS — что это?
Ответ. Метрики Google: скорость главного контента, отклик, стабильность вёрстки. Влияют на UX и SEO. Подробнее здесь — метрики скорости.
Вопрос. Git для сайта — зачем версионировать HTML?
Ответ. История изменений, откат, совместная работа, деплой через GitHub Actions. Подробнее здесь — DevTools и инструменты, размещение на GitHub Pages.
Вопрос. Ошибка 404 и 500 на сайте — что означают?
Ответ. 404 — страница не найдена. 500 — сбой на сервере (код, БД). Смотрите логи и Network в DevTools. Подробнее здесь — ошибки браузера, веб-серверы.
Вопрос. Frontend и backend — кто за что отвечает?
Ответ. Frontend — браузер, UI, JS. Backend — сервер, БД, бизнес-логика, API. Подробнее здесь — структура сайта, бэкенд.
Вопрос. GraphQL или REST — что выбрать для API?
Ответ. REST — проще, стандарт HTTP. GraphQL — один endpoint, клиент запрашивает нужные поля. Подробнее здесь — бэкенд.
Вопрос. Адаптивная вёрстка mobile first — как сделать сайт под телефон?
Ответ. Meta viewport, flex/grid, медиа-запросы @media, тест в DevTools Device Mode. Подробнее здесь — структура и UX, веб-дизайн.
Вопрос. localStorage и sessionStorage — где хранить данные в браузере?
Ответ. localStorage — до явного удаления. sessionStorage — до закрытия вкладки. Не для секретов без шифрования. Подробнее здесь — cookies и хранилища.
Вопрос. XSS и CSRF — базовая защита сайта?
Ответ. Экранировать вывод, CSP, HttpOnly cookies, CSRF-токены в формах. Подробнее здесь — безопасность.
Вопрос. XAMPP OpenServer — локальный сервер для PHP на Windows?
Ответ. Пакет Apache + PHP + MySQL на localhost для разработки без облака. Аналог — npm run dev для Node. Подробнее здесь — веб-серверы, CMS.
Вопрос. Техническое SEO — robots.txt и sitemap.xml зачем?
Ответ. robots.txt — подсказка краулерам. sitemap.xml — список URL для индексации. Не заменяют качественный контент. Подробнее здесь — типы сайтов, SSR.
Вопрос. CI/CD для сайта — автоматический деплой при git push?
Ответ. Pipeline собирает, тестирует и выкладывает на сервер (GitHub Actions, GitLab CI). Меньше ручного FTP. Подробнее здесь — инструменты, бэкенд.
Что запомнить
Основные категории компонентов:
- Клиентская часть (HTML, CSS, JavaScript)
- Серверная часть (бэкенд, базы данных, API)
- Веб-серверы (Apache, Nginx, IIS)
Структура сайта:
- Фронтенд — HTML, CSS, JavaScript
- Бэкенд — сервер, база данных, API
- Конфигурационные файлы
- Статические ресурсы (изображения, шрифты)
Веб-серверы:
- Apache — универсальный сервер
- Nginx — высокая производительность
- IIS — интеграция с Windows
- Tomcat — Java-приложения
Инструменты разработки:
- Консоль разработчика (DevTools)
- Системы контроля версий (Git)
- Локальные серверы (XAMPP,
npm run dev) - CMS (WordPress) и облачные конструкторы (Tilda, Wix)
Три правила работы с сайтами:
- Чётко разделяйте клиентскую и серверную части.
- Используйте современные инструменты разработки и CI.
- Регулярно проверяйте производительность и безопасность.
Три фундаментальных момента:
- Сайты работают по принципу клиент-серверного взаимодействия через HTTP/HTTPS.
- Производительность зависит от сети, сервера, клиентского кода и кэша.
- Архитектура (MPA, SPA, SSR, SSG) выбирается под задачу, а не "по моде".
Современный веб представляет собой сложную распределённую систему, где взаимодействие между пользователем и цифровым ресурсом происходит через стандартизированные протоколы и интерфейсы. Понимание этой системы требует анализа как клиентской, так и серверной сторон, а также инфраструктурных компонентов, обеспечивающих их связь.
Клиентская часть (фронтенд) реализуется в среде веб-браузера и состоит из трёх базовых технологий — HTML задаёт структуру и семантику контента, CSS определяет его внешний вид и компоновку, JavaScript наделяет интерфейс динамическим поведением и интерактивностью. Современные фронтенд-фреймворки (React, Vue, Angular) превращают браузер в полноценную платформу для выполнения сложной логики, управления состоянием и маршрутизации, что является основой веб-приложений.
Серверная часть (бэкенд) отвечает за хранение данных, выполнение бизнес-логики и безопасность. Она реализуется на различных языках программирования (C#, Java, Python, Node.js) и взаимодействует с клиентом через стандартизированные API (REST, GraphQL). Базы данных (реляционные и документные) служат постоянным хранилищем информации, а веб-серверы (Nginx, Apache, IIS) выступают в роли шлюзов, принимающих запросы, обрабатывающих статический контент и проксирующих динамические вызовы к прикладному коду.
Архитектурные модели сайтов эволюционировали от простых статических страниц к сложным гибридным системам. Статические сайты, генерируемые заранее, обеспечивают максимальную скорость и безопасность. Динамические сайты создают HTML на лету, что позволяет персонализировать контент. Веб-приложения (SPA) переносят логику рендеринга на клиент, обеспечивая плавный и отзывчивый пользовательский опыт, подобный нативным приложениям. Гибридные подходы (SSR, SSG, ISR) комбинируют преимущества этих моделей, позволяя достичь оптимального баланса между скоростью, SEO и интерактивностью.
Инструменты разработки играют ключевую роль в жизненном цикле сайта. Консоль разработчика (DevTools) предоставляет доступ к внутренним структурам браузера, позволяя отлаживать код, анализировать производительность и исследовать сетевой трафик. Системы контроля версий (Git) обеспечивают управление изменениями в кодовой базе и совместную работу команды. Локальные серверы (XAMPP, dotnet run, npm run dev) воспроизводят production-среду на машине разработчика. Системы управления контентом (CMS), такие как WordPress, и облачные конструкторы (Tilda, Wix) упрощают создание сайтов для пользователей без технических навыков.
Безопасность и производительность являются неотъемлемыми аспектами проектирования. Безопасность обеспечивается на всех уровнях — через политики CORS и CSP, защиту от XSS и CSRF, правильную настройку аутентификации и авторизации. Производительность измеряется конкретными метриками (Core Web Vitals) и оптимизируется через кэширование, минификацию, code splitting и эффективное использование сетевых ресурсов.
Таким образом, успешное создание и эксплуатация веб-ресурса требует комплексного подхода, охватывающего архитектуру, разработку, тестирование, развёртывание и непрерывный мониторинг. Каждый компонент системы — от строки HTML до конфигурации веб-сервера — вносит свой вклад в конечный пользовательский опыт.
Куда идти дальше
| Тема | Раздел |
|---|---|
| "Веб-браузеры" | "Веб-браузеры" |
| "Организация домашней сети" | "Организация домашней сети" |
| "Сеть и интернет — о разделе" | "Сеть и интернет — о разделе" |
| "NAT и проброс портов" | "NAT и проброс портов" |
Проверьте себя: Чек-лист самопроверки.
Базовый разбор HTTP и HTTPS находится в отдельной статье — HTTP как основа веб-интеграций.