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

324 lines
11 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
title: 'Django сервер и JS приложения'
summary: 'В этой статье описан полный цыкл стать от настройки ВМ устновки серверных приложений и их настроек'
date: 'nov 18 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
```