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

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

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

```sh
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
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`
```sh
# Первый запуск для создания конфигурационного файла ~/.config/neofetch/config.conf
neofetch
# Добавляем вызов neofetch в файл конфигурации zsh
echo "neofetch" >> ~/.zshrc
# Редактируем конфигурацию
nano ~/.config/neofetch/config.conf
```
[Настройка описана вот в этой статье](https://xn----7sbabksvrfvnenyr4r.xn--p1ai/blog/09-graylog/#:~:text=cmd%20%2D%2Dreload-,%D0%9D%D0%B0%D1%81%D1%82%D0%BE%D0%B9%D0%BA%D0%B0%20neofetch,-%23%20%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B9%20%D0%B7%D0%B0%D0%BF%D1%83%D1%81%D0%BA%20%D0%B4%D0%BB%D1%8F)
### Редактируем сообщение приветствия
```sh
sudo nano /etc/motd
```
## Настройка backend часть проект

При  копировании обращайте внимание на `<username>` `project`
### 1. Скачиваем и устанавливаем Python:
```sh
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. Создаем рабочий каталог:
```sh 
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. Настраиваем виртуальное окружение:
```sh
/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
```
### Настройка базы данных и запуск проекта
```shell
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`
```sh
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`
```sh
pip install gunicorn
```
#### Создаем конфигурационные файлы:
1. `/var/www/project1/gunicorn_config.py`
```python
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'
```
2. Скрипт запуска `gunicorn_start.sh`:
```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
```
3. Настройка прав:
```sh
chmod +x gunicorn_start.sh
```
### Настраиваем `supervisior`
Создаем файл конфигурации `/etc/supervisior/conf.d/project1.conf`
```sh
[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`
```sh
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;
}
```
Активируем конфигурацию:
```sh
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](https://certbot.eff.org/instructions?ws=nginx&os=pip))
```sh
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. Скачиваем проект:
```sh
git clone https://github.com/Project2.git
cd project2
```
2. Устанавливаем `npm`
```sh
sudo apt install -y npm
```
3. Устанавливаем библиотеки из проекта
```sh
npm install
```
4. Стартуем проект в режиме разработчика
```sh
npm run dev
```
### Возвращаемся к добавления порта в `firewall`
```sh
sudo firewall-cmd --permanent --add-port=8002/tcp
sudo firewall-cmd --reload
```
### Создаем новый файл конфигурации для nginx
 `/etc/nginx/sites-available/project2`
```sh
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;
}

```
### Активируем конфигурацию:
```sh
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 
```sh
sudo npm i pm2 -g
```
Создаем файл конфигурации вместе с проектом 
```js
module.exports = {
  apps: [
    {
      name: 'project2',
      port: '8002',
      exec_mode: 'cluster',
      instances: 'max',
      script: './project2/.output/server/index.mjs'
    }
  ]
}
```
### Включаем автозагрузку проекта
```sh
pm2 startup
```