Свой приватный Интернет-клуб (на платформе Vas3k.Club) #1

ЧАСТЬ 1

Итак, вы хотите поднять в Интернете свой частный Клуб / Форум / Тиндер, чтобы общаться там с друзьями, коллегами и прочими интересными личностями.

В предвзятой и нечестной борьбе выбор платформы для портала пал на vas3k.club. Исходники этого, несомненно грандиозного и волшебного, проектища лежат тут: https://github.com/vas3k/vas3k.club

Задача

Кастомизировать платформу Vas3k'а под свои нужды.
Запустить клуб локально и научиться его отлаживать.
Задеплоить клуб на сервер и запустить его в продакшен.

Исходные данные (что нужно иметь)

Хостинг:

30Гб свободного места.
Минимум 4гб оперативной памяти на сервере.
Рутовый доступ к консоли.

Купленное доменное имя с возможностью задания DNS записей.

SSL-сертификаты. Для простоты, можно подороже, Wildcard-сертификат на весь домен.

Аккаунт в Телеграм.
Хороший компутер, который потянет Docker.

Лучше с SSD.
Оперативки побольше.
VSCode для кодирования.

Аккаунт в GitHub, понимание принципов его работы.
Побольше энтузиазма ~~и прямые руки~~.

Создание проекта

1 В Телеграмме присоединяемся к чатам: Вастрик.Dev и Вастрик.Форк. Там помогают с проблемами. Зарегистрировать свой проект в табличке.

2 Создать форк Vas3k.Клуба у себя в репозитариях GitHub: https://github.com/vas3k/vas3k.club

3 Рекомендую сразу создать 3 ветки:

master // по умолчанию master-ветка.
Dev // для разработки.
Deploy // для автоматизированного деплоя на сервер.

4 По умолчанию, все GitHub actions для форков отключены. Это нормально, отредактируем по мере развития проекта.

5 Создать токен в Github для пулл-реквестов, исправления GitHub actions, доступа к секретам и публикации своих образов Клуба.

Для создания токена в GitHub нужно перейти в настройки (https://github.com/settings/profile)
В меню слева перейти в Developer Settings, потом выбрать Personal Access Token.
Создать новый токен для своего репозитория:

Указать название.
Отметить галочками:

Всю секцию repo
Секцию workflow
Секции write:packages и delete:packages

Должно получиться как-то так

6 Локально установить Docker.

7 Локально клонировать свой форк проекта в релевантную директорию:

git clone https://<token>@github.com/<username>/<repo_name>.git

Первый локальный запуск

После подготовки необходимого окружения, можно попробовать выполнить первый локальный запуск проекта. Для этого нужно в директории, куда склонирован репозитарий форка выполнить команду, при условии, что успешно установлен Docker:

docker-compose up

Дождаться загрузки необходимых образов и запуска всех сервисов. В конце концов, должно в консоли должно отобразиться что-то вроде:

Поздравляю! Вы запустили свой клуб локально по адресу http://127.0.0.1:8000/ в Development режиме. Если в консоли выполнить команду "docker ps", то должны быть запущены следующие сервисы:

Django-приложение клуба "club_app"
Redis
Postgres
Webpack
Планировщик задач (Queue)

Если вам не терпится протестировать возможности клуба, то вот полезные ссылки:

/godmode/dev_login/ - создает аккаунт Администратора и осуществляет автоматический вход;
/godmode/random_login/ - создает тестового пользователя и также автоматически осуществляет вход.

На данном этапе также можно попробовать поменять что-либо в исходниках фронтона или бэкенда - изменения должны быть автоматически синхронизированы в запущенных сервисах.

В случае, если все сломалось, а в исходниках значимых изменений не было, то поможет команда:

docker-compose up --build

Первичная настройка сервера

Самый простой способ - это развернуть VPS с Ubuntu и установить там Docker.

Вы должны уметь подключаться через ssh к своему серверу.

Необходимо иметь права Root.

Инструкция по установке Docker вручную: https://docs.docker.com/engine/install/ubuntu/
Необходимо купить доменное имя для своего Клуба и иметь возможность настраивать DNS записи.

Полезные команды Docker

Вот список полезных команд Docker, которые надо знать для администрирования своим клубом. Все команды легко гуглятся.

Показать запущенные сервисы:

docker ps

Показать все сохраненные образы:

docker image ls

Создание сети Docker (по которой будут взаимодействовать сервисы):

docker network create -d bridge <network name>

Удаление сети Docker

docker network rm
docker network prune

Удаление контейнеров, образов, контейнеров и хранилищ (и кучу места):

docker-compose down
docker rm -f $(docker ps -a -q)
docker volume rm $(docker volume ls -q)
docker system prune -a

Подключиться к консоли сервиса:

docker exec -it <container> bin/sh # Права Root
Docker exec -u <userid> -it <container> bin/sh # права userid

Вспомогательные сервисы

На данном этапе на сервере мы настроем и поднимем следующие базовые сервисы:

Обратный прокси. Будем использовать Nginx-proxy
Pepic: см. https://github.com/vas3k/pepic
ogimg: см. https://github.com/nDmitry/ogimgd
[Опционально] Свой почтовый сервер: см. https://github.com/TopTuK/docker-mailserver

Все действия выполняются на сервере.

Обратный прокси (Reverse proxy)

Я использую Nginx-proxy потому, что это просто и удобно. И вам советую. Требуется в корне домашней директории создать директорию. Пускай название будет "rproxy".

mkdir rproxy
cd rproxy
# Создаем директорию с сертификатами
mkdir certs
# Создаем директорию для хранения конфигурационных файлов nginx
mkdir vhost.d
# Создаем файл docker-compose.yml
touch docker-compose.yml

В директории "certs" нужно создать два файла с публичным и приватными ключами SSL сертификата, имена которых соответствует вашему домену. В моем случае, домен Клуба "pmi.moscow".

# Приватный ключ
touch pmi.moscow.key
# Публичный ключ
touch pmi.moscow.crt

Как отредактировать файлы на сервере каждый решает сам, но я этот делал путем Ctrl-C -> Ctrl-V через nano.

Пример содержания "pmi.moscow.key"

-----BEGIN RSA PRIVATE KEY-----
<% Тут содержимое приватного ключа % >
-----END RSA PRIVATE KEY-----

Пример содержания "pmi.moscow.crt"

Редактируем файл "docker-compose.yml" сервиса обратного прокси

Вот пример содержимого конфигурационного файла yml:

version: '2'

services:
  nginx-proxy:
    image: nginxproxy/nginx-proxy
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./certs:/etc/nginx/certs
      - ./vhost.d:/etc/nginx/vhost.d:ro
      - /var/run/docker.sock:/tmp/docker.sock:ro
      
networks:
  default:
    external:
      name: pmi_network

мы еще вернемся к редактированию этого файла и файлов конфигурации nginx в процессе работы над Клубом. Пока стоит понять, что такое обратный прокси и зачем нужен: https://en.wikipedia.org/wiki/Reverse_proxy. Если кратко, то это сервис который маршрутизирует запросы к конечным Docker-сервисам при обращении через HTTP.

Как видно из файла конфигурации, то сервис с названием "nginx-proxy" подключается к сети с названием "pmi_network".

Покажи свой Pepic (настраиваем и запускаем Pepic)

Вот что пишет Vas3k о проекте Pepic (см. https://github.com/vas3k/pepic):

Pepic is a small app that helps me to upload, store, convert and serve pictures or videos on your server.

Т.е. это сервис, который позволяет хранить, загружать и передавать картинки и видео. Этот сервис должен хоститься на своем домене или саб-домене.

В моем случае, сервис Pepic доступен по адресу https://media.pmi.moscow.

Не забудьте прописать DNS запись на ваш сервис Pepic! media.pmi.moscow -> IP.add.re.ss

Создадим рядом с директорией "rproxy" директорию для сервиса Pepic и клонируем туда репозитарий. Сразу скопируем файл "docker-compose.yml":

cd ~
git clone https://github.com/vas3k/pepic.git
cd ~/pepic
cp docker-compose.example.yml docker-compose.yml
mkdir uploads # Директория для загрузки изображений и видео

Отредактируем конфигурационный файл "docker-compose.yml":

version: "3.8"
services:
  app:
    build: .
    environment:
      - BASE_URL= # URL сервиса. Пример: https://media.pmi.moscow/
      - STORAGE_DIR=/uploads
      - SECRET_CODE= # СЕКРЕТНЫЙ КОД
      - IMAGE_ORIGINAL_LENGTH=1400
      - MAX_UPLOAD_SIZE=100M
      - VIRTUAL_HOST= # ХОСТ PEPIC. Пример: media.pmi.moscow
      - VIRTUAL_PORT=8118
    volumes:
      - ./uploads:/uploads
    expose:
      - "8118"
    user: "1001"
    restart: unless-stopped

networks:
  default:
    name: pmi_network

Важно:

BASE_URL должен содержать "/" в конце.
Нужно задать и запомнить SECRET_CODE
Задать VIRTUAL_HOST - это домен, где должен быть доступен Pepic. Используется для автоматической конфигурации обратного прокси.
Задать VIRTUAL_PORT надо на тот порт, который указан в секции "expose". Лучше оставить все как есть.
Задать user: "1001", чтобы доступ к изображениям было не только у Root.
Задать секцию с настройкой сети, чтобы все сервисы крутились в одной сети.

Создаем конфигурационные файлы Nginx для обратного прокси сервиса Pepic

В директории "~/rproxy/vhost.d" нужно создать файлы:

Файл: "<% Хост pepic %>". Пример: media.pmi.moscow

cd ~/rproxy/vhost.d
touch media.pmi.moscow

Файл: "<% Хост pepic %>_location". Пример: media.pmi.moscow_location

cd ~/rproxy/vhost.d
touch media.pmi.moscow_location

Содержимое файла <% хост Pepic %>. В моем случае, media.pmi.moscow

charset utf-8;
client_max_body_size 100M;
uwsgi_buffers 128 16k;
real_ip_header X-Real-IP;

Содержимое файла <% хост Pepic %>_location. В моем случае, media.pmi.moscow_location

add_header "Access-Control-Allow-Origin" "*";
add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS";
add_header "Access-Control-Allow-Headers" "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";
add_header "Access-Control-Expose-Headers" "Content-Length,Content-Range";

proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_redirect off;
proxy_buffering off;

expires 30d;

Поднимаем OGIMGD

Пока все круто! Вы молодец! Время поднять сервис ogimd: https://github.com/nDmitry/ogimgd

Social previews generator as a microservice. Can be used to generate images for og:image meta-tag

Сервис также должен хоститься на своем домене, как и Pepic. Поэтому:

Не забудьте настроить DNS запись!

Создадим в директории рядом с "rproxy" директорию для сервиса ogimd. Клонируем туда ogimgd:

cd ~
git clone https://github.com/nDmitry/ogimgd.git
cd ogimgd

Сервис ogimgd в моем случае развернут по адресу: https://og.pmi.moscow. Конфигурацию сделайте аналогичной, отредактируйте файл "docker-compose.yml":

version: "3.8"

services:
  app:
    build: .
    environment:
      - PORT=8201
      - VIRTUAL_HOST= # Хост для сервиса ogimd. Пример: og.pmi.moscow
      - VIRTUAL_PORT=8201 # Порт такой же как в секции ports
    ports:
      - 8201:8201
    user: "1001"
    restart: unless-stopped

networks:
  default:
    name: pmi_network

Все параметры уже встречались нам ранее, так что настройка аналогичная.

Настраиваем конфигурационные файлы Nginx обратного прокси для сервиса ogimgd

В директории "~/rproxy/vhost.d" нужно создать файлы:

Файл: "<% Хост ogimgd %>". Пример: og.pmi.moscow

cd ~/rproxy/vhost.d
touch og.pmi.moscow

Файл: "<% Хост ogimgd %>_location". Пример: og.pmi.moscow_location

cd ~/rproxy/vhost.d
touch og.pmi.moscow_location

Содержимое файла <% хост ogimgd %>. В моем случае, og.pmi.moscow

charset utf-8;
client_max_body_size 100M;
uwsgi_buffers 128 16k;
real_ip_header X-Real-IP;

Содержимое файла <% хост ogimgd %>_location. В моем случае, og.pmi.moscow_location

add_header "Access-Control-Allow-Origin" "*";
add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS";
add_header "Access-Control-Allow-Headers" "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";
add_header "Access-Control-Expose-Headers" "Content-Length,Content-Range";

proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_redirect off;
proxy_buffering off;

expires 30d;

[Опционально] Поднимаем свой Mail сервер

Данный этап является опциональным и релевантен только в случае, если вы хотите поднять свой собственный почтовый сервис.

Многие пропускают данный этап и используют сервис MailGun: https://www.mailgun.com. Я же сделал свой форк Docker-mailserver'a.

Подробная статья как запускать свой почтовый сервис ЗДЕСЬ.

Запускаем вспомогательные сервисы

Где мы находимся:

Раздобыли все необходимое для собственного Клуба.
Склонировали и запустили Клуб локально.
Развернули конфигурации базовых сервисов на сервере.

Настало время поднять базовые сервисы на сервере и проверить, что они работают.

На сервере у нас есть следующие директории срвисов с файлами конфигурации:

Обратный прокси: "rproxy"
Pepic: "pepic"
ogimgd: "ogimgd"
[Опционально] Почтовый сервис: "docker-mailserver"

Запускаем!

Запускаем обратный прокси:

cd ~/rproxy
docker-compose up -d

Запускаем Pepic:

cd ~/pepic
docker-compose up -d

Запускаем ogimgd:

cd ~/ogimgd
docker-compose up -d

Запускаем почтовый сервис:

cd ~/docker-mailserver
./bin/production.sh up -d

После ожидания запуска всех сервисов проверим, что все успешно запущено. Выполним команду:

docker ps

В консоли должно быть что-то наподобие:

В браузере при переходе в Pepic, Ogimgd и mailserver должны открываться все странички без каких-либо ошибок. Поздравляю и продолжаем в следующей статье!

Следующие части

Часть 2: https://teletype.in/@toptuk/pmiclub2