Files
site-plata-upravleniya-rf/src/content/blog/12-backend-frondend-project.md
2025-06-08 20:07:38 +09:00

11 KiB
Raw Blame History

title, summary, date, draft, tags
title summary date draft tags
Django сервер и JS приложения В этой статье описан полный цыкл стать от настройки ВМ устновки серверных приложений и их настроек nov 18 2024 false
Python
venv
Django
TS

Backend-Fronend старт проекта

Стартовый установщик

Установка необходимых пакетов

sudo apt-get install -y zsh wget build-essential tree redis-server nginx \
zlib1g-dev libbz2-dev libreadline-dev llvm libncurses5-dev libncursesw5-dev \
xz-utils tk-dev liblzma-dev python3-dev python3-pip python3-venv python3-pil \
python3-lxml libxslt-dev python3-libxml2 libffi-dev libssl-dev python3-dev \
gnumeric libsqlite3-dev libpq-dev libxml2-dev libxslt1-dev libjpeg-dev \
libfreetype6-dev libcurl4-openssl-dev libgdbm-dev libc6-dev supervisor

Установка и настройка Oh-my-zsh

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
zsh
chsh -s $(which zsh)
# или для root пользователя
sudo chsh -s $(which zsh)

Установка и настройка neofetch

# Первый запуск для создания конфигурационного файла ~/.config/neofetch/config.conf
neofetch
# Добавляем вызов neofetch в файл конфигурации zsh
echo "neofetch" >> ~/.zshrc
# Редактируем конфигурацию
nano ~/.config/neofetch/config.conf

Настройка описана вот в этой статье

Редактируем сообщение приветствия

sudo nano /etc/motd

Настройка backend часть проект

При копировании обращайте внимание на <username> project

1. Скачиваем и устанавливаем Python:

wget https://www.python.org/ftp/python/3.11.10/Python-3.11.10.tgz ; \
tar xvf Python-3.11.* ; \
cd Python-3.11.10 ; \
mkdir ~/.python ; \
./configure --enable-optimizations --prefix=/home/<username>/.python ; \
make -j8 ; \
sudo make altinstall
###
sudo /home/<username>/.python/bin/python3.11 -m pip install -U pip

2. Создаем рабочий каталог:

mkdir /var/www/project
# даем права на группу root:users прописываем свои
sudo chown -R root:users /var/www/project1
sudo chmod 775 /var/www/project1
cd /var/www/project1

3. Настраиваем виртуальное окружение:

/home/<username>/.python/bin/python3 -m venv env
source env/bin/activate
pip install -U pip
git clone https://github.com/Project1.git
pip install -r requirements.txt

Настройка базы данных и запуск проекта

python.exe manage.py makemigrations accounts media main
python manage.py migrate
python manage.py createsuperuser
### Уже можем проверить старт приложения
python manage.py runserver 0.0.0.0:8000

Добавляем доступ к порт если есть firewall

sudo firewall-cmd --permanent --add-port=8000/tcp
sudo firewall-cmd --permanent --add-port=8001/tcp
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --reload

Устанавливаем и настраиваем gunicorn

Нужно создать 2 файла один в директории проекта, второй на уровне env, так же нужно установить сам gunicorn если его нет в списках requirements.txt

pip install gunicorn

Создаем конфигурационные файлы:

  1. /var/www/project1/gunicorn_config.py
command = '/var/www/env/bin/gunicorn'
pythonpath = '/var/www/project1'
bind = '127.0.0.1:8001'
workers = 5
user = '<username>'
limit_request_fields = 32000
limit_request_field_size = 0
raw_env = 'DJANGO_SETTINGS_MODULE=project1.settings'
  1. Скрипт запуска gunicorn_start.sh:
#!/bin/bash
source /var/www/env/bin/activate
source /var/www/env/bin/postactivate
exec gunicorn -c "/var/www/project1/gunicorn_config.py" project1.wsgi
  1. Настройка прав:
chmod +x gunicorn_start.sh

Настраиваем supervisior

Создаем файл конфигурации /etc/supervisior/conf.d/project1.conf

[program:project1_gunicorn]
command=/var/www/gunicorn_start.sh
user=<username>
process_name=%(program_name)s
numprocs=1
autostart=true
autorestart=true
redirect_stderr=true

Настройка nginx

Пример конфигурации /etc/nginx/sites-available/project1

server {
    server_name example.com;
    # Оптимизация SSL
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers "ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384";
    # HTTP заголовки для безопасности
    add_header X-Content-Type-Options nosniff;
    add_header X-Frame-Options DENY;
    add_header X-XSS-Protection "1; mode=block";
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
    # Основной корневой каталог
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;
    # Прокси для backend
    location / {
        proxy_pass http://127.0.0.1:8001;
        proxy_set_header X-Forwarded-Host $server_name;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        add_header P3P 'CP="ALL DSP COR PSAa PSDa OUR NOR ONL UNI COM NAV"';
        # Убедитесь, что вам действительно нужно разрешить доступ с любого домена
        add_header Access-Control-Allow-Origin *;
    }
    # Обработка медиа файлов
    location /media/ {
        alias /var/www/project1/media/;
        expires max;
        access_log on;
    }
    # Логи
    error_log /var/log/nginx/backend-error.log;
    access_log /var/log/nginx/backend-access.log;
    # Максимальный размер загружаемого файла
    client_max_body_size 100M;
    # Защита от медленных атак (slowloris)
    client_body_timeout 10s;
    client_header_timeout 10s;
    #send_timeout 10s;
    keepalive_timeout 65;
}
# Редирект с HTTP на HTTPS
server {
    listen 80;
    listen [::]:80;
    server_name example.com;
    return 301 https://$host$request_uri;
}

Активируем конфигурацию:

sudo ln -s /etc/nginx/sites-available/project1 /etc/nginx/sites-enabled/
sudo nginx -t && sudo service nginx restart

Установка SSL с certbot

Для корректной работы нужно установить сертификат LetsEncrypt ssl, установка будет с помощью certbot [Инструкция с официального сайта](Инструкции Certbot | Certbot)

sudo apt update
sudo apt install python3 python3-venv libaugeas0
sudo /home/<username>/.python/bin/python3 -m venv /opt/certbot/
sudo /opt/certbot/bin/pip install --upgrade pip
sudo /opt/certbot/bin/pip install certbot certbot-nginx
sudo ln -s /opt/certbot/bin/certbot /usr/bin/certbot
sudo certbot --nginx

Добавляем авто перевыпуск сертификата

echo "0 0,12 * * * root /opt/certbot/bin/python -c 'import random; import time; time.sleep(random.random() * 3600)' && sudo certbot renew -q" | sudo tee -a /etc/crontab > /dev/null

Настройка frontend часть проект

  1. Скачиваем проект:
git clone https://github.com/Project2.git
cd project2
  1. Устанавливаем npm
sudo apt install -y npm
  1. Устанавливаем библиотеки из проекта
npm install
  1. Стартуем проект в режиме разработчика
npm run dev

Возвращаемся к добавления порта в firewall

sudo firewall-cmd --permanent --add-port=8002/tcp
sudo firewall-cmd --reload

Создаем новый файл конфигурации для nginx

/etc/nginx/sites-available/project2

server {
    listen 443;
    server_name example2.com;
    charset utf-8;

    # Оптимизация SSL
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers "ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384";

    # HTTP headers для безопасности
    add_header X-Content-Type-Options nosniff;
    add_header X-Frame-Options DENY;
    add_header X-XSS-Protection "1; mode=block";
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

    }
    # Обработка запросов
    location / {
        proxy_pass http://127.0.0.1:8002;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;

        # Защита от медленных атак (slowloris)
        client_body_timeout 10s;
        #client_header_timeout 10s;
        send_timeout 10s;
    }
    
    # Логи
    error_log  /var/log/nginx/frontend-error.log;
    access_log /var/log/nginx/frontend-access.log;

    # Максимальный размер загружаемого файла (например, 100MB)
    client_max_body_size 100M;

    # Защита от слишком долгих соединений
    keepalive_timeout 65;
}

# Редирект с HTTP на HTTPS
server {
    listen 80;
    server_name example2.com;
    return 301 https://$host$request_uri;
}

Активируем конфигурацию:

sudo ln -s /etc/nginx/sites-available/project /etc/nginx/sites-enabled/
sudo nginx -t && sudo service nginx restart
# или используем nginx -s reload
sudo nginx -t && sudo nginx -s reload
# Добавляем сертификат на новый домен
sudo certbot --nginx

Устанавливаем приложения для управления проектом pm2

sudo npm i pm2 -g

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

module.exports = {
  apps: [
    {
      name: 'project2',
      port: '8002',
      exec_mode: 'cluster',
      instances: 'max',
      script: './project2/.output/server/index.mjs'
    }
  ]
}

Включаем автозагрузку проекта

pm2 startup