Инструкция по развертыванию Django API и React приложения с использованием Nginx и Gunicorn

Антон • 06.11.2024 • Бэкенд • 85 просмотров
(5.0 | 3 голоса)

Шаг 1: Подготовка сервера

Обновите систему:

sudo apt update
sudo apt upgrade
Установите необходимые пакеты:

sudo apt install python3-pip python3-venv nginx curl
Установите Node.js и npm:

sudo apt install nodejs npm

Шаг 2: Создание папок для бекенда и фронтенда

Перейдите в папку /home:

cd /home
Создайте директории для бекенда и фронтенда:

mkdir backend
mkdir frontend

Шаг 3: Установка Django в папке бекенда

Перейдите в папку для бекенда:

cd backend
Создайте виртуальное окружение:

python3 -m venv venv
Активируйте виртуальное окружение:

source venv/bin/activate
Установите Django и необходимые библиотеки:

pip install django djangorestframework gunicorn
Создайте новый проект Django:

django-admin startproject myproject .
Создайте новое приложение Django для API:

python manage.py startapp api

Шаг 4: Настройка Django API

Добавьте приложение в настройки:

Откройте файл myproject/settings.py и добавьте api и rest_framework в список INSTALLED_APPS:
import os
INSTALLED_APPS = [
    ...,
    'api',
    'rest_framework',
]
Настройте разрешенные хосты:

ALLOWED_HOSTS = ['your_domain.com', 'www.your_domain.com', 'your_ip_address']  # Укажите ваши домены и IP-адрес
Создайте представление в api/views.py:

from rest_framework.views import APIView
from rest_framework.response import Response
class HelloWorld(APIView):
    def get(self, request):
        return Response({"message": "Hello, World!"})
Настройте маршруты API:

В api/urls.py создайте новый файл и добавьте следующее:
from django.urls import path
from .views import HelloWorld
urlpatterns = [
    path('hello/', HelloWorld.as_view(), name='hello_world'),
]
Подключите маршруты API к основным маршрутам проекта:

В myproject/urls.py добавьте:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('api.urls')),  # Подключаем API маршруты
]

Шаг 5: Настройка статических и медиа-файлов

Настройки в settings.py:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
Соберите статические файлы:

python manage.py collectstatic

Шаг 6: Установка и настройка React

Перейдите в папку фронтенда:

cd ../frontend
Создайте новое приложение React:

npx create-react-app .
Соберите ваше React-приложение:

npm run build

Шаг 7: Настройка Gunicorn

Создайте файл службы Gunicorn:

sudo nano /etc/systemd/system/gunicorn.service
Вставьте следующее содержимое, заменив пути при необходимости:

[Unit]
Description=gunicorn daemon
After=network.target
[Service]
User=www-data
Group=www-data
WorkingDirectory=/home/backend/myproject
Environment="PYTHONPATH=/home/backend"
ExecStart=/home/backend/venv/bin/gunicorn --access-logfile - --error-logfile /home/backend/gunicorn-error.log --workers 3 --bind unix:/home/backend/myproject.sock myproject.wsgi:application
[Install]
WantedBy=multi-user.target
Перезагрузите systemd и запустите Gunicorn:

sudo systemctl daemon-reload
sudo systemctl start gunicorn
sudo systemctl enable gunicorn

Шаг 8: Настройка Nginx

Создайте файл конфигурации для вашего сайта:

sudo nano /etc/nginx/sites-available/myproject
Добавьте следующую конфигурацию:

server {
    listen 80;
    server_name your_domain.com www.your_domain.com;
        
    }
    # Обработка медиа файлов Django
    location /media/ {
        alias /home/backend/media/;  
    }
    # Обработка Root URL для React
    location / {
        root /home/frontend/build;  
        try_files $uri $uri/ /index.html;
    }
    # Проксирование API запросов
    location /api/ {
        proxy_pass http://unix:/home/backend/myproject.sock;  
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
Создайте символическую ссылку для активации конфигурации:

sudo ln -s /etc/nginx/sites-available/myproject /etc/nginx/sites-enabled
Проверьте конфигурацию Nginx на ошибки:

sudo nginx -t
Перезапустите Nginx:

sudo systemctl restart nginx

Шаг 9: Установка прав доступа

Убедитесь, что пользователь, под которым работает Gunicorn (в данном случае www-data), имеет доступ к папкам проекта и виртуальному окружению:
sudo chown -R www-data:www-data /home/backend
sudo chown -R www-data:www-data /home/backend/venv
sudo chown -R www-data:www-data /home/frontend
Шаг 10: Проверка работы
Откройте браузер и перейдите по адресу:

http://your_domain.com/api/hello/
Вы должны увидеть ответ "Hello, World!".

Проверьте доступность вашего React приложения:

http://your_domain.com/

Теперь вы развернули Django API и React приложение с использованием Gunicorn и Nginx. Убедитесь, что вы учли все аспекты безопасности и мониторинга. 

Комментарии

Пока нет комментариев. Будьте первым!