ITED
bootcamp

Проектирование и деплой web сайта

Проектирование web-сайтов

План лекции

  • Клиент-серверная архитектура
  • Виды баз данных и альтернативы хранения
  • Виды клиентов: веб, мобильные приложения, умный дом, Arduino, Raspberry и др.
  • Создание сервера (пример Express)
  • Проброс сервера во внешнюю сеть: пять способов
  • Аренда VPS, SSL-сертификат, покупка домена
  • Командная работа в Git и рабочие пространства
2 / 33
Проектирование web-сайтов

Клиент-серверная архитектура

  • Сервер принимает запросы и отдаёт ответы по сети
  • Клиент инициирует запрос и отображает или обрабатывает результат
  • Один сервер может обслуживать много клиентов одновременно
  • Типичные протоколы: HTTP/HTTPS для веба, WebSocket для реального времени
3 / 33
Проектирование web-сайтов

Роли в клиент-серверной модели

  • Сервер хранит данные, выполняет бизнес-логику, отдаёт API или страницы
  • Клиент запрашивает ресурсы, рисует интерфейс, может кэшировать данные
  • Сервер часто развёрнут на постоянном IP или домене; клиент подключается откуда угодно
4 / 33
Проектирование web-сайтов

Виды баз данных

  • Реляционные (SQL): MySQL, PostgreSQL, SQLite - таблицы, связи, транзакции
  • Документные (NoSQL): MongoDB - хранение JSON-подобных документов
  • Ключ-значение: Redis - кэш и быстрый доступ по ключу
  • Выбор зависит от объёма данных, структуры и требований к согласованности
5 / 33
Проектирование web-сайтов

Альтернативы базам данных

  • Запись в файл: JSON, CSV, текстовые файлы - просто для прототипов и малых объёмов
  • Переменная состояния в памяти сервера - данные теряются при перезапуске, подходит для кэша и счётчиков
  • Файловое хранилище плюс периодическая синхронизация - компромисс между простотой и надёжностью
6 / 33
Проектирование web-сайтов

Когда достаточно файла или переменной

  • Файл: прототип, мало данных, один сервер, допустима потеря при сбое
  • Переменная в памяти: кэш, счётчики, временные данные между запросами
  • База данных: много данных, несколько процессов, нужны транзакции и надёжность
7 / 33
Проектирование web-сайтов

Виды клиентов в клиент-серверной архитектуре

  • Клиентом считается любое приложение или устройство, которое обращается к серверу
  • Разные клиенты используют один и тот же API сервера, но по-разному отображают данные
  • Ниже - основные типы клиентов, с которыми вы можете столкнуться при разработке
8 / 33
Проектирование web-сайтов

Клиент 1: HTML-страница

  • Чистый HTML (статические или серверно-генерируемые страницы) или SPA на React, Vue, Angular
  • Фреймворки генерируют HTML и взаимодействуют с API сервера через fetch или axios
  • Клиент может быть задеплоен отдельно (отдельный хостинг для фронта) или вместе с сервером
  • Чаще фронт и бэкенд разворачивают совместно на одном домене для простоты
9 / 33
Проектирование web-сайтов

Клиент 2: мобильное приложение

  • Нативные приложения (iOS, Android) или кроссплатформенные (React Native, Flutter)
  • Общаются с тем же сервером по HTTP/HTTPS или WebSocket
  • Требуют учёта мобильной сети, офлайн-режима и ограничений платформ
10 / 33
Проектирование web-сайтов

Клиент 3: устройства умного дома

  • Датчики, лампы, розетки, термостаты - подключаются к облаку или локальному серверу
  • Часто используют MQTT или REST API для отправки данных и получения команд
  • Сервер может быть ваш собственный (например на Raspberry Pi) или облачный
10 / 33
Проектирование web-сайтов

Клиент 4: Arduino, NodeMCU, Raspberry

  • Микроконтроллеры (Arduino, NodeMCU/ESP8266/ESP32) и одноплатные ПК (Raspberry Pi)
  • Могут отправлять HTTP-запросы на ваш сервер, работать как датчики или исполнительные устройства
  • Raspberry Pi способен сам выступать сервером для домашней сети или небольшого проекта
12 / 33
Проектирование web-сайтов

Клиент 5: другие клиенты

  • Десктоп-приложения (Electron, Tauri), чат-боты (Telegram, Slack), другие сервисы по API
  • Любая программа, умеющая делать HTTP-запросы к вашему серверу - уже клиент
  • Единый API на сервере позволяет подключать разные типы клиентов без переписывания бэкенда
13 / 33
Проектирование web-сайтов

Единый API для всех клиентов

  • Один набор маршрутов (REST или GraphQL) обслуживает веб, мобильное приложение и умный дом
  • Меняется только интерфейс клиента; логика и данные остаются на сервере
  • Так проще поддерживать и развивать проект при появлении новых типов клиентов
14 / 33
Проектирование web-сайтов

Способы создания сервера

  • Готовые фреймворки: Node.js (Express, Fastify), Python (Flask, Django), Go (Gin), PHP (Laravel) и др.
  • Express - один из самых популярных для Node.js: маршруты, middleware, статика, шаблоны
  • Сервер слушает порт (например 3000), обрабатывает GET/POST и отдаёт HTML, JSON или файлы
15 / 33
Проектирование web-сайтов

Пример: сервер на Express

  • Установка: npm init, npm install express
  • const express = require('express'); const app = express(); app.get('/', (req, res) => res.send('Hello'));
  • app.listen(3000) - сервер доступен на localhost:3000
  • Добавление маршрутов, app.use(express.json()), раздача статики express.static - основа типичного API
16 / 33
Проектирование web-сайтов

Проброс сервера во внешнюю сеть

  • На личном ПК сервер по умолчанию доступен только в локальной сети
  • Чтобы к нему подключаться из интернета, нужен проброс или аренда сервера с белым IP
  • Рассмотрим пять способов проброса с личного ПК и один вариант без проброса - аренда VPS
17 / 33
Проектирование web-сайтов

Способ 1: Serveo или ngrok

  • Туннели: создают временный публичный URL, который проксирует трафик на ваш localhost
  • Serveo: ssh -R 80:localhost:3000 serveo.net (без установки, по SSH)
  • ngrok: скачать, запустить ngrok http 3000 - вы получите ссылку вида https://xxxx.ngrok.io
  • Удобно для демо и тестов; бесплатные планы часто дают случайный поддомен при каждом запуске
18 / 33
Проектирование web-сайтов

Способ 2: nginx или Apache с покупкой IP

  • У провайдера покупается статический (белый) IP-адрес; роутер настраивается на проброс порта 80/443 на ваш ПК
  • На ПК или отдельной машине ставится nginx или Apache как обратный прокси к вашему приложению
  • Доступ по IP: http://ваш-ip - подходит для небольшого проекта или домашнего сервера
19 / 33
Проектирование web-сайтов

Способ 3: сетевое оборудование с DNS (Keenetic)

  • Роутеры вроде Keenetic поддерживают систему доменных имён и динамический DNS
  • К роутеру привязывается доменное имя; при смене IP провайдером обновление происходит автоматически
  • Проброс портов настраивается на роутере; доступ к серверу уже по имени вида myhome.keenetic.pro
20 / 33
Проектирование web-сайтов

Способ 4: Cloudflare Tunnel

  • Cloudflare предлагает туннель с личного ПК во внешнюю сеть без открытия портов у провайдера
  • Устанавливается агент (cloudflared); туннель связывает ваш localhost с поддоменом на Cloudflare
  • Плюсы: не нужен белый IP, трафик идёт через Cloudflare (защита, кэш, HTTPS)
21 / 33
Проектирование web-сайтов

Способ 5: Telegram-бот (@node-telegram-bot-api)

  • Проброс с личного ПК во внешнюю сеть через Telegram: бот получает обновления от серверов Telegram
  • Библиотека npm @node-telegram-bot-api - ваш сервер подключается к API Telegram и реагирует на сообщения
  • Подходит для уведомлений, простых команд и доступа к данным через чат; не заменяет полноценный веб-доступ по URL
22 / 33
Проектирование web-сайтов

Аренда виртуальной машины (VPS)

  • Провайдер выдаёт виртуальный сервер с готовым внешним IP и доступом по SSH
  • Проброс во внешнюю сеть уже сделан за вас - не нужно настраивать роутер или туннели
  • Вы устанавливаете ОС, Node.js (или другой стек), запускаете приложение и при необходимости вешаете nginx как обратный прокси
23 / 33
Проектирование web-сайтов

Пример ресурса для аренды VPS

  • Один из вариантов - https://vds.selectel.ru/ (Selectel): выбор региона, ОС, тарифа
  • После создания сервера вы получаете IP и логин/пароль или ключ SSH для входа
  • Дальше - установка окружения, деплой кода (git clone, npm install, pm2 или systemd для автозапуска)
24 / 33
Проектирование web-сайтов

Установка SSL-сертификата

  • SSL (HTTPS) шифрует трафик и повышает доверие пользователей и поисковиков
  • Варианты: покупка платного сертификата у хостинга или регистратора
  • Бесплатно: Let's Encrypt - автоматическое получение и обновление сертификатов через certbot (Linux) или win-acme (Windows)
25 / 33
Проектирование web-сайтов

Let's Encrypt: certbot (Linux)

  • Официальный сайт: https://certbot.eff.org/ - выбор ОС и веб-сервера (nginx/Apache)
  • Certbot получает сертификат и настраивает автообновление (cron)
  • Сертификат действует 90 дней; обновление без остановки сайта при правильной настройке
26 / 33
Проектирование web-сайтов

win-acme (Windows)

  • Для Windows-серверов бесплатный SSL от Let's Encrypt через win-acme: https://www.win-acme.com/
  • Программа запрашивает сертификат и настраивает продление; можно использовать с IIS или другими серверами
  • Альтернатива платным сертификатам при размещении проекта на своей Windows-машине
27 / 33
Проектирование web-сайтов

Домен и VPS: настройка A-записи

  • В панели регистратора домена создаётся A-запись: имя (например @ или www) и IP вашего VPS
  • После распространения DNS (от минут до суток) сайт открывается по домену
  • Для HTTPS на VPS должен быть установлен и настроен сертификат (certbot подставляет путь к нему в nginx)
27 / 33
Проектирование web-сайтов

Автозапуск приложения на VPS

  • pm2 (Node.js): npm install -g pm2, pm2 start server.js, pm2 save, pm2 startup - процесс перезапускается при падении и после перезагрузки сервера
  • Linux: systemd - создаётся unit-файл, сервис включается через systemctl enable и start
  • Логи смотреть через pm2 logs или journalctl для отладки после деплоя
29 / 33
Проектирование web-сайтов

Резюме: от идеи до деплоя

  • Выбрать клиент-серверную схему, тип клиента и способ хранения данных
  • Реализовать сервер (например Express) и при необходимости фронт
  • Решить задачу доступа: туннель (ngrok, Cloudflare), проброс с роутера или VPS с готовым IP
  • Добавить домен и SSL для удобного и безопасного доступа
30 / 33
Проектирование web-сайтов

Командная работа в гите (демонстрация добавления соавторов в репозиторий).

31 / 33
Проектирование web-сайтов

Создание тем и распределение команд, рабочие пространства команд.

32 / 33
Проектирование web-сайтов

Вопросы и ответы

33 / 33