Назад к проектам

Казанский храм - Официальный сайт Production - Онлайн

Запущен: Январь 2026 Production Обновлено: Январь 2026

Профессиональный информационный портал на Flask с единой архитектурой страниц, адаптивным дизайном и полным CI/CD циклом production-развертывания. Работает на VPS с Nginx и Gunicorn.

Python 3.11 Flask 3.1 Jinja2 HTML5/CSS3 JavaScript Nginx Gunicorn Ubuntu Server Systemd GitHub Actions CI/CD

Основные функции и архитектурные решения

Скриншоты проекта

Главная страница сайта храма

Главная страница с фото храма и навигацией

Мобильная версия сайта

Адаптивная мобильная версия (mobile-first)

Страница святынь храма

Раздел "Святыни" с описанием икон и мощей

Архитектура системы и структура проекта

Структура проекта

  • app.py — Основное Flask приложение с маршрутизацией и контроллерами
  • requirements.txt — Зависимости Python (Flask, gunicorn, другие библиотеки)
  • .github/workflows/deploy.yml — CI/CD пайплайн GitHub Actions для автоматического деплоя
  • templates/about.html — Единый шаблон Jinja2 для всех информационных разделов
  • static/css/style.css — Адаптивные стили (1600+ строк с комментариями)
  • static/images/ — Оптимизированные медиафайлы храма с разными разрешениями
  • temple-site.service — Конфигурация Systemd сервиса для автозапуска

Frontend & Дизайн

  • HTML5 + Jinja2 шаблоны — Семантическая разметка для SEO и доступности
  • CSS3 с Flexbox/Grid — Современная адаптивная верстка без фреймворков
  • Vanilla JavaScript — Галереи и интерактивные элементы без внешних зависимостей
  • 3 брейкпоинта — Mobile (до 768px), Tablet (769-1024px), Desktop (от 1025px)
  • Оптимизация изображений — Автоматическое сжатие и адаптивные размеры для быстрой загрузки

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

  • Ubuntu Server 20.04 LTS — Production VPS на reg.ru с долгосрочной поддержкой
  • GitHub Actions CI/CD — Автоматическое тестирование и деплой при каждом коммите
  • Nginx 1.18+ — Веб-сервер и reverse proxy для статики и динамического контента
  • Gunicorn 23.0.0 — WSGI сервер для production окружения Flask приложения
  • Systemd — Управление сервисом с автозапуском, мониторингом и логами
  • UFW брандмауэр — Настройка безопасности сервера с минимальными открытыми портами
Системная архитектура (production):

Client → Nginx (порт 80/443) → Gunicorn WSGI → Flask Application
│
├── Static Files (HTML, CSS, JavaScript, иконки)
└── Media Files (Фотографии храма, иконы, документы)

CI/CD Pipeline Workflow:
1. Push в main ветку → GitHub Actions запускается
2. SSH подключение к production серверу → Обновление кода из Git
3. Установка зависимостей Python → Проверка конфигурации
4. Перезапуск Gunicorn через Systemd → Проверка доступности
5. Отправка статуса деплоя → Мониторинг работы приложения

Ключевые технические решения и решенные задачи

Задача 1: Единая архитектура страниц на Flask + Jinja2

Проблема: Необходимо было создать 8+ информационных разделов с единым дизайном без дублирования кода и с возможностью легкого добавления новых разделов.

Решение:

  • Единый шаблон about.html: Все разделы используют один основной шаблон с динамическим контентом
  • Jinja2 условные блоки: Отображение контента в зависимости от текущего раздела через {% if section == 'about' %}
  • Flask маршрутизация: Простые и понятные эндпоинты для каждого раздела (/about, /clergy, /schedule, /contacts, etc.)
  • Результат: Легкое добавление новых разделов, единый код для всего сайта, простое обслуживание

Задача 2: Создание 100% адаптивного дизайна

Проблема: Сайт должен одинаково хорошо отображаться на всех устройствах от смартфонов (320px) до десктопов (1920px+).

Решение:

  • Mobile-first подход: Верстка начиналась с мобильной версии с постепенным улучшением для больших экранов
  • 3 четких брейкпоинта: Отдельные стили для мобильных (до 768px), планшетов (769-1024px) и десктопов (от 1025px)
  • Flexbox и CSS Grid: Современные технологии CSS для создания гибкой и адаптивной верстки
  • Оптимизация изображений: Автоматическое сжатие и адаптивные теги picture/source для разных разрешений

Задача 3: Production-развертывание с полным CI/CD циклом

Проблема: Ручное обновление кода на сервере занимало 15-20 минут, было подвержено ошибкам и требовало постоянного внимания.

Решение:

  • GitHub Actions workflow: Автоматический деплой при каждом коммите в main ветку репозитория
  • Безопасное SSH-подключение: Использование SSH-ключей через GitHub Secrets для безопасного доступа к серверу
  • Systemd сервис: Настройка автозапуска, мониторинга и автоматического перезапуска при сбоях
  • Архитектура Nginx + Gunicorn: Nginx для отдачи статики и SSL терминации, Gunicorn как WSGI сервер для Flask
  • Результат: Время деплоя сократилось до 2-3 минут с полной автоматизацией и надежностью

Задача 4: Обеспечение безопасности и отказоустойчивости

Проблема: Требовалась стабильная работа сайта 24/7 с защитой от возможных атак и быстрым восстановлением после сбоев.

Решение:

  • Выделенный VPS: Изолированное окружение на Ubuntu Server с полным контролем
  • Настройка UFW брандмауэра: Разрешение только необходимых портов (SSH:22, HTTP:80, HTTPS:443)
  • Systemd настройки безопасности: Restart=always, RestartSec=10, PrivateTmp=true, ProtectSystem=strict
  • Резервное копирование: Автоматическое создание бэкапов через GitHub Actions workflow
  • Мониторинг логов: Использование journalctl для отслеживания ошибок и производительности

Информационные разделы сайта

Ссылки на проект

Production сайт (Онлайн) Исходный код на GitHub Полная документация CI/CD Workflows

Технические детали проекта

Дата запуска в production: Январь 2026

Аптайм: 99.9% (мониторинг через systemd и журналы Nginx)

Время загрузки страницы: < 2 секунды (оптимизированные изображения и статика)

Размер кодовой базы: ~2.5 MB (включая оптимизированные изображения)

Частота обновлений: Автоматический деплой при каждом коммите в main ветку

Технологии: Python 3.11, Flask 3.1, Jinja2, Nginx, Gunicorn, Systemd, GitHub Actions

Браузерная поддержка: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+