Показываю реальный кейс автоматизации сайта. Завернул в докер сайт на Next.js/MySQL с сервером на базе nginx и отдачей статики напрямую через этот nginx, минуя Next.js. СОДЕРЖАНИЕ: 00:00 Об исходном проекте и его проблемах. Постановка задачи. 05:10 Как я стягивал файлы и БД со старой VPS'ки. Утилиты zip, scp, mysqldump. 08:31 Локальный docker-compose.yml: как устроен? Проверяем Adminer. 12:43 Минимальные характеристики VPS и его настройка: ssh, authorized_keyz, rivate/public keys 15:44 Общая схема развёртывания проекта, страницы Github Actions 17:47 Разбираем Github Workflow prod.yml 21:40 Разбираем Dockerfile.prod 24:28 Разбираем docker-compose-prod.yml 25:52 Подробнее про настройку nginx на проде. Что за проблема возникла с отдачей картинок? 29:18 Частая проблема с nginx: ограничение максимального размера загружаемого файла 29:55 Nginx reverse proxy_pass: перенаправление запроса в Docker-контейнер. Docker resolver. 31:53 Решение проблемы с отдачей загружаемых картинок через Next.js - одаём напрямую через nginx 33:59 Почему я на проде не вытащил наружу админку Adminer MySQL? 34:25 Заключение ⚛️⚛️⚛️ Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me. Детали тут: https://makeweb.me/course-js-fullstack-developer Плейлист тут: https://www.youtube.com/playlist?list=PLvWwA9iDlhHAlfaUsPlITn4j-VeLZlcWt Телеграм для связи по курсу: @makewebchatme 🛍 🛍 🛍 Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru. Промо-код: 948E-53B9-CF98-8204 (вводится во время оплаты услуги). 💬 💬 💬 Присоединяйся к нашему Telegram-чату https://t.me/makewebme

Меняем отдачу статики фронта с дев-серверов на NGINX. СОДЕРЖАНИЕ: 00:00 === Вот список тех плейлистов с видео, на которые мы будем опираться: NestJS https://www.youtube.com/playlist?list=PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT React + CRA https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D Базовая верстка https://www.youtube.com/playlist?list=PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml Git https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6 DevTools Chrome https://www.youtube.com/playlist?list=PLvWwA9iDlhHA4kzfpRbu2cH-Z2ss6tB99 === GitHub-репозитории курса: https://github.com/makewebme/mw-mp-front https://github.com/makewebme/mw-mp-admin https://github.com/makewebme/mw-mp-seller https://github.com/makewebme/mw-mp-srv

Поднимаем админ-панель и разбираемся с Guard'ами. СОДЕРЖАНИЕ: 00:00 === Вот список тех плейлистов с видео, на которые мы будем опираться: NestJS https://www.youtube.com/playlist?list=PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT React + CRA https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D Базовая верстка https://www.youtube.com/playlist?list=PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml Git https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6 DevTools Chrome https://www.youtube.com/playlist?list=PLvWwA9iDlhHA4kzfpRbu2cH-Z2ss6tB99 === GitHub-репозитории курса: https://github.com/makewebme/mw-mp-front https://github.com/makewebme/mw-mp-admin https://github.com/makewebme/mw-mp-seller https://github.com/makewebme/mw-mp-srv

Реализуем JWT-авторизацию на бэкенде. СОДЕРЖАНИЕ: 00:00 === Вот список тех плейлистов с видео, на которые мы будем опираться: NestJS https://www.youtube.com/playlist?list=PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT React + CRA https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D Базовая верстка https://www.youtube.com/playlist?list=PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml Git https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6 DevTools Chrome https://www.youtube.com/playlist?list=PLvWwA9iDlhHA4kzfpRbu2cH-Z2ss6tB99 === GitHub-репозитории курса: https://github.com/makewebme/mw-mp-front https://github.com/makewebme/mw-mp-admin https://github.com/makewebme/mw-mp-seller https://github.com/makewebme/mw-mp-srv

Оптимизируем типизацию стора. Разбираемся глубже в Редаксе и миддлваре redux-thunk. Разбираем принцип работы JWT-токенов. Начинаем пилить авторизацию пользователей. СОДЕРЖАНИЕ: 00:00 Делаем деталку товара 03:31 Немного оптимизируем типизацию Redux. Чистим сборку с помощью import type. 12:31 Разбираем схему работы Redux без middleware thunk и с ним 16:56 Авторизаця по JWT: что такое и как работает 20:43 Разбираем компонент формы логина 25:17 Разбираем компонент формы регистрации 27:07 Пробуем регистрироваться и логиниться 27:36 Регистрация и логин на бэкенде 31:56 Зачем нам нужен HttpException и как его расширять для своих целей 35:38 Фиксим неправильно работающий логаут === Вот список тех плейлистов с видео, на которые мы будем опираться: NestJS https://www.youtube.com/playlist?list=PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT React + CRA https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D Базовая верстка https://www.youtube.com/playlist?list=PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml Git https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6 DevTools Chrome https://www.youtube.com/playlist?list=PLvWwA9iDlhHA4kzfpRbu2cH-Z2ss6tB99 === GitHub-репозитории курса: https://github.com/makewebme/mw-mp-front https://github.com/makewebme/mw-mp-admin https://github.com/makewebme/mw-mp-seller https://github.com/makewebme/mw-mp-srv

Подключаем фронт к бэку, запрашиваем товары и делаем универсальный хелпер запроса. СОДЕРЖАНИЕ: 00:00 Меняем порты бэка и фронта 01:28 Забираем список продуктов с бэкенда 03:35 Решаем проблемы с CORS 06:48 Выводим продукты с бэка в UI 08:44 Отдаём статику с бэка (картинки) 14:36 Разбираем хелпер-метод универсального запроса 22:20 Решаем проблемы с TS-типизацией === Вот список тех плейлистов с видео, на которые мы будем опираться: NestJS https://www.youtube.com/playlist?list=PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT React + CRA https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D Базовая верстка https://www.youtube.com/playlist?list=PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml Git https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6 DevTools Chrome https://www.youtube.com/playlist?list=PLvWwA9iDlhHA4kzfpRbu2cH-Z2ss6tB99 === GitHub-репозитории курса: https://github.com/makewebme/mw-mp-front https://github.com/makewebme/mw-mp-admin https://github.com/makewebme/mw-mp-seller https://github.com/makewebme/mw-mp-srv

Работаем над хедером, избранным и деталкой товара Приобрести ПОЛНЫЙ ДОСТУП к курсу: https://makeweb.me/course-js-fullstack-developer Телеграм для связи по курсу: http://t.me/makewebchatme Плейлист со всеми видео курса: https://www.youtube.com/playlist?list=PLvWwA9iDlhHAlfaUsPlITn4j-VeLZlcWt В этом уроке далаем функционал добавления товара в избранное, страницу избранного и деталку товара. СОДЕРЖАНИЕ: 00:00 Рассматриваем верстку и логику работы хедера приложения 06:28 Объяснение работы Dropdown Menu 12:52 Фича UserData с использованием createReducer 15:40 Как наш стор выглядит в Redux DevTools 17:00 Функционал добавления в избранное. Смотрим процессы в Redux DevTools. 34:20 Страница детального просмотра товара === Вот список тех плейлистов с видео, на которые мы будем опираться: NestJS https://www.youtube.com/playlist?list=PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT React + CRA https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D Базовая верстка https://www.youtube.com/playlist?list=PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml Git https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6 DevTools Chrome https://www.youtube.com/playlist?list=PLvWwA9iDlhHA4kzfpRbu2cH-Z2ss6tB99 === GitHub-репозитории курса: https://github.com/makewebme/mw-mp-front https://github.com/makewebme/mw-mp-admin https://github.com/makewebme/mw-mp-seller https://github.com/makewebme/mw-mp-srv

Этот ролик про Docker простыми словами. СОДЕРЖАНИЕ: 00:00:00 Введение. План действий. 00:01:18 Что такое Docker, зачем нужен и чем отличается от виртуальной машины 00:05:05 Разбираем GUI Docker Desktop. Чем контейнер отличается от образа (image)? Что такое volume? 00:09:24 Настройки докера в GUI 00:10:25 Пробуем запустить первый контейнер из интерфейса. Наблюдаем за файловой системой контейнера. 00:14:01 Пробуем удалять контейнер 00:15:37 Пробуем запускать контейнер из консоли. CLI-команды docker: pull, image, run, ps, --detach (запуск в фоне). 00:19:31 Входим в контейнер из консоли - docker exec. Играемся с файловой системой из консоли. 00:22:50 Создаём Dockerfile и контейнеризуем простейшее NodeJS-приложение. Базовый образ, зависимости и их установка. 00:26:44 Команда docker build. Установка рабочей директории WORKDIR. Копирование файлов COPY. Запуск приложения через CMD. EXPOSE для расшаривания порта. 00:30:45 Тег образа при билде. Успешный запуск контейнера из Докерфайла. 00:31:57 Особенности работы с проектом, который находится под Git. Файл .dockerignore. 00:34:00 Кэширование шагов билда (build cache). Чистка кэша докера - docker build prune. 00:39:08 После билда нужно пересоздавать контейнер 00:40:18 Как менять код проекта и сразу видеть изменения? Монтирование локальной файловой системы внутрь контейнера - mount bind 00:43:51 nodemon для live reload NodeJS-проекта. 00:46:07 Чиним расшаривание портов (флаг -p) 00:48:22 Создаём именованный вольюм (mount volume). Пример с созданием в вольюме тестового файла. 00:56:43 Самое ценное свойство вольюма - персистентность 00:57:47 Разворачиваем проект на VPS в ручном режиме 00:59:04 Вход в Docker Hub и консоли - docker login. Пушим туда свой образ. 01:00:55 Стягиваем образ на VPS и запускаем. Пробуем запросы к приложению, запущенному на VPS. 01:06:30 Заключение *** Спринтбокс — сверхмощные VDS на суперскоростях! https://sprintbox.ru/c5233 Промокод на кешбэк 50%: MAKEWEBME ⚛️⚛️⚛️ Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me. Детали тут: https://makeweb.me/course-js-fullstack-developer Плейлист тут: https://www.youtube.com/playlist?list=PLvWwA9iDlhHAlfaUsPlITn4j-VeLZlcWt Телеграм для связи по курсу: @makewebchatme 💬 💬 💬 Присоединяйся к нашему Telegram-чату https://t.me/makewebme ====== erid: 2SDnje1Mj4k

Это видео представляет собой подробную инструкцию по тому, как выполнять базовые операции с виртуальным приватным/выделенным сервером (Virtual Private/Dedicated Server, VPS/VDS). Рассказано про то, как создать VPS, про базовые команды консоли и установку типового ПО на сервер. 🛍 🛍 🛍 Спринтбокс — сверхмощные VDS на суперскоростях! https://sprintbox.ru/c5233 Промокод на кешбэк 50%: MAKEWEBME 🛍 🛍 🛍 СОДЕРЖАНИЕ: 00:00:00 Введение в тему. Отличие виртуального хостинга и VPS. 00:02:22 Создание VPS из панели хостинга 00:04:00 Что такое SSH-подключение? Генерация и использование SSH-ключа. 00:10:35 Выбор тарифа и создание машины. Подключение по VNC. 00:14:46 Разбираем команды: pwd, cd, ls, rm, touch, mkdir (файлы, папки, пути). Корень диска и относительные пути. 00:19:34 Разбираем команды: grep, lsof, kill, sudo (фильтрация строк, процессы, порты, пользователи). 00:22:45 Редактируем authorized_keys. Создание alias и добавление в bash_profile. 00:24:45 Ещё практика с операциями над файлами/папками и относительными путями 00:28:15 Разбираем команды: chmod (права доступа), менеджеры пакетов. 00:30:25 Разбираем команды: echo, ping, history, passwd, which 00:32:15 Команды вывода текстовых файлов: cat, less, tail, head 00:33:20 Разбираем команды: whoami, uname, find 00:34:12 О системе DNS (Domain Name System). Регистрация доменов в панели регистратора. 00:39:35 Файервол ufw 00:42:01 systemctl - управление процессами в системе 00:43:36 Устанавливаем и разбираем базовый конфиг nginx 00:50:14 Устанавливаем СУБД PostgreSQL 00:52:12 Устанавливаем PHP8 00:53:29 Устанавливаем фреймворк Laravel. Попутно ставим composer и недостающие PHP-расширения. 00:57:20 Настраиваем конфиг nginx для работы сайта на Laravel (сокеты, PHP-FPM). Решаем проблемы с правами доступа. 01:00:57 Вовлекаем БД PostgreSQL в работу нашего Laravel-сайта. Утилита Artisan из комплекта Laravel. 01:07:27 Подводим предварительный итог 01:09:05 Общими мазками про Docker и его необходимость для более-менее серьёзных проектов ⚛️⚛️⚛️ Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me. Детали тут: https://makeweb.me/course-js-fullstack-developer Плейлист тут: https://www.youtube.com/playlist?list=PLvWwA9iDlhHAlfaUsPlITn4j-VeLZlcWt Телеграм для связи по курсу: @makewebchatme 💬 💬 💬 Присоединяйся к нашему Telegram-чату https://t.me/makewebme ERID: 2SDnjeQyRi8

Верстаем общий layout и компоненты. Настраиваем и разбираемся с Redux Toolkit Приобрести ПОЛНЫЙ ДОСТУП к курсу: https://makeweb.me/course-js-fullstack-developer Телеграм для связи по курсу: http://t.me/makewebchatme Плейлист со всеми видео курса: https://www.youtube.com/playlist?list=PLvWwA9iDlhHAlfaUsPlITn4j-VeLZlcWt СОДЕРЖАНИЕ: 00:00 Футер, хедер и основная область, общий layout 02:57 Про цвета, React.Fragment, глобальные стили приложения 08:15 Разбираем добавленные карточки товаров на главной 09:57 Общий паттерн с методом map() и пробросом пропсов внутрь глупого компонента 14:25 Разбор блока ProductCard. На каком уровне (принцип) размещать картинки, типы и т.д. 22:12 Разбор компонента Button. Более детальное пояснение работы Styled Components на примере. 32:32 Добавляем стор (store) Redux Toolkit. Что такое и как работает: стор, редьюсеры, экшены и др. 41:48 Устройство toolkit-слайса (slice) features/App 48:48 Завершение === Вот список тех плейлистов с видео, на которые мы будем опираться: NestJS https://www.youtube.com/playlist?list=PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT React + CRA https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D Базовая верстка https://www.youtube.com/playlist?list=PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml Git https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6 DevTools Chrome https://www.youtube.com/playlist?list=PLvWwA9iDlhHA4kzfpRbu2cH-Z2ss6tB99 === GitHub-репозитории курса: https://github.com/makewebme/mw-mp-front https://github.com/makewebme/mw-mp-admin https://github.com/makewebme/mw-mp-seller https://github.com/makewebme/mw-mp-srv

В этом ролике рассказываю про то, как с помощью GitHub Actions быстро организовать автоматический деплой (развёртывание) проекта в простейшем варианте, без Docker-контейнеров. 00:00 Вступление и описание задачи, схема работы 01:15 Поднимаем локально проект на NextJS 02:50 Создаём репозиторий и пушим его в GitHub 04:57 Создаём GitHub YML Workflow-файл. Как он работает? 08:04 Добавляем GitHub Actions Secrets 11:40 Логинимся на VPSку первый раз и добавляем ключ в authorized_keys 12:38 Проверяем файервол Ubuntu 16:36 Ставим nvm и node на сервер 18:10 Стягиваем репозиторий на VPS, ставим зависимости, билдим и запускаем NextJS 21:54 Проверяем работу автодеплоя при пуше в ветку main 23:45 Заключение ⚛️⚛️⚛️ Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me. Детали тут: https://makeweb.me/course-js-fullstack-developer Плейлист тут: https://www.youtube.com/playlist?list=PLvWwA9iDlhHAlfaUsPlITn4j-VeLZlcWt Телеграм для связи по курсу: @makewebchatme 🛍 🛍 🛍 Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru. Промо-код: 948E-53B9-CF98-8204 (вводится во время оплаты услуги). 💬 💬 💬 Присоединяйся к нашему Telegram-чату https://t.me/makewebme

В этом видео, в общих чертах, для новичков, разъясняется схема работы любого сайта в интернете от момента ввода адреса в строку браузера и до отображаения готовой страницы. СОДЕРЖАНИЕ: 00:00 Система DNS 04:00 Где располагаются файлы сайтов? Общая схема работы PHP-движка WordPress. 09:19 Типы ресурсов сайта и их подгрузка. HTML, CSS, JS и другие. 18:20 Ресурсы не всегда "мэтчатся" на структуру папок файловой системы 20:00 Другие типы ресурсов сайта. AJAX, WebSocket, Fetch/XHR, API. 21:20 Процесс рендеринга страницы и его этапы: DOM, Style, Layout, Layer, Paint и др. 27:53 Заключение ⚛️⚛️⚛️ Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me. Детали тут: https://makeweb.me/course-js-fullstack-developer Телеграм для связи по курсу: @makewebchatme 🛍 🛍 🛍 Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru. Промо-код: 948E-53B9-CF98-8204 (вводится во время оплаты услуги). 💬 💬 💬 Присоединяйся к нашему Telegram-чату https://t.me/makewebme

Переводим роутинг к нашим Docker-контейнерам на веб-сервер NGINX. Пока всё ещё работаем на локальной машине. СОДЕРЖАНИЕ: 00:00 === Вот список тех плейлистов с видео, на которые мы будем опираться: NestJS https://www.youtube.com/playlist?list=PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT React + CRA https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D Базовая верстка https://www.youtube.com/playlist?list=PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml Git https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6 DevTools Chrome https://www.youtube.com/playlist?list=PLvWwA9iDlhHA4kzfpRbu2cH-Z2ss6tB99 === GitHub-репозитории курса: https://github.com/makewebme/mw-mp-front https://github.com/makewebme/mw-mp-admin https://github.com/makewebme/mw-mp-seller https://github.com/makewebme/mw-mp-srv

Оборачиваем в Docker-контейнеры бэкенд- и фронтенд приложения. Пока что только локально. Приобрести ПОЛНЫЙ ДОСТУП к курсу: https://makeweb.me/course-js-fullstack-developer Телеграм для связи по курсу: http://t.me/makewebchatme Плейлист со всеми видео курса: https://www.youtube.com/playlist?list=PLvWwA9iDlhHAlfaUsPlITn4j-VeLZlcWt СОДЕРЖАНИЕ: 00:00 Начинаем оборачивать front, admin, seller и srv в Docker-контейнеры. 02:01 Подбираем Docker-образы для наших контейнеров. Собираем внутри docker-compose.yml сервис для srv. 05:30 Разбираемся, почему srv не работает. 08:24 Как зайти внутрь запущенного контейнера? 09:55 Использование внешнего Dockerfile вместе с docker-compose. 11:15 No left space on device: как очистить дисковое пространство? docker system prune 12:04 Чуть подробнее о механизме работы Docker (слои). 13:55 Пробуем сменить образ, чтобы решить проблему. 15:39 Как увеличить дисковое пространство, доступное Docker'у. 16:50 Проблема Invalid ELF Header - как решить? 18:04 Устанавливаем верный хост для подключения бэка к Postgres и Redis. 20:23 Тестируем работу бэк-контейнера. Создание .env.production специально для бэкенд-контейнера. 22:27 Контейнеризируем проекты front и admin. Не забываем про файл .dockerignore. .env.production для front. 22:00 Настраиваем /etc/hosts для перенаправления на localhost. 28:51 Пробуем обращаться к контейнеру по фактическому IP-адресу. 31:11 Оборачиваем admin в контейнер (по аналогии с front). 34:25 Проблема с отдачей статики через dev-сервер. Немного о схеме будущей работы. 35:35 Обзор того, что Докер создал для нашего проекта (имена и назначение). 39:00 Меняем название сети на более читаемое. Меняем название сервисов (опять же, для читабельности). === Вот список тех плейлистов с видео, на которые мы будем опираться: NestJS https://www.youtube.com/playlist?list=PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT React + CRA https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D Базовая верстка https://www.youtube.com/playlist?list=PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml Git https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6 DevTools Chrome https://www.youtube.com/playlist?list=PLvWwA9iDlhHA4kzfpRbu2cH-Z2ss6tB99 === GitHub-репозитории курса: https://github.com/makewebme/mw-mp-front https://github.com/makewebme/mw-mp-admin https://github.com/makewebme/mw-mp-seller https://github.com/makewebme/mw-mp-srv

Разбираем работу хука useAsync для упрощения запросов в вашем React-приложении. https://github.com/makewebme/react-hooks/tree/master/useAsync ⚛️⚛️⚛️ Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me. Детали тут: https://makeweb.me/course-js-fullstack-developer Телеграм для связи по курсу: @makewebchatme 🛍 🛍 🛍 Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru. Промо-код: 948E-53B9-CF98-8204 (вводится во время оплаты услуги). 💬 💬 💬 Присоединяйся к нашему Telegram-чату https://t.me/makewebme