# Docker
sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

# Docker-compose v1
sudo curl -L "https://github.com/docker/compose/releases/download/1.25.5/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose

# Python3.10 + Pip
sudo apt install software-properties-common
sudo add-apt-repository ppa:deadsnakes/ppa
sudo apt install python3.10
curl -sS https://bootstrap.pypa.io/get-pip.py | python3.10

# Django
pip install django==4.2.4

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
source ~/.bashrc
nvm install 18.16.0

# Папки проекта
mkdir demo
cd demo

# Инициализация Django-проекта
django-admin startproject django_project

# Папки для media-файлов
mkdir django_project/media
mkdir django_project/media/photo

# Инициализация React-проекта
npm install create-react-app
npx create-react-app reactapp

rm -rf node_modules/
rm package.json
rm package-lock.json

mkdir nginx
mkdir nginx/development
mkdir nginx/production

server {
    listen 80;
    server_name _;
    server_tokens off;
    client_max_body_size 20M;

    location / {
        proxy_pass http:// 172.17.0.1:3000/;
    }

    location /api {
        try_files $uri @proxy_api;
    }
    location /admin {
        try_files $uri @proxy_api;
    }

    location @proxy_api {
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Url-Scheme $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass   http:// 172.17.0.1:8000;
    }

    location /media {
        autoindex on;
        alias /app/backend/server/media/;
    }

    location /django_static/ {
        autoindex off;
        alias /app/backend/server/django_static/;
    }

    location /ws {
        auth_request /auth;
        proxy_pass http:// 172.17.0.1:8010/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;        
        proxy_set_header Connection "upgrade";
    }

    location /auth {
        proxy_set_header Content-Type 'application/json;charset=utf-8';
        proxy_pass http:// 172.17.0.1:8000/api/students/;
    }


}

version: '2'

services:
    nginx: 
        restart: unless-stopped
        container_name: demo_nginx
        build:
            context: .
            dockerfile: ./Dockerfile.nginx
        ports:
            - 80:80
        volumes:
            - ./django_project/django_static:/app/backend/server/django_static
            - ./django_project/media:/app/backend/server/media
            - ./nginx/development:/etc/nginx/conf.d

    rmq:
        image: rabbitmq:3.10-management
        restart: always
        container_name: demo_rmq
        environment:
          - RABBITMQ_DEFAULT_USER=${RMQ_USER}
          - RABBITMQ_DEFAULT_PASS=${RMQ_PASS}
        volumes:
          - rabbitmq_data_volume:/var/lib/rabbitmq/
        ports:
          - 1234:15672
          - 5671-5672:5671-5672
        env_file:
            - ./.env

volumes:
    static_volume: {}
    rabbitmq_data_volume: {}

FROM node:18.16.0-alpine as build

WORKDIR /app/frontend
COPY ./reactapp/package.json ./
COPY ./reactapp/package-lock.json ./
RUN npm ci --silent
COPY ./reactapp/ ./
RUN npm run build

FROM nginx:stable-alpine
COPY --from=build /app/frontend/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

# Поменять!
SECRET_KEY=a38d5044-e78a-416e-9bde-8aeabc598286

DEBUG=0

ALLOWED_HOSTS=*

# Поменять POSTGRES_USER и POSTGRES_PASSWORD!
POSTGRES_ENGINE=django.db.backends.postgresql
POSTGRES_DB=django_db
POSTGRES_USER=admin
POSTGRES_PASSWORD=password
POSTGRES_HOST=postgres
POSTGRES_PORT=5432
DATABASE=postgres

# Поменять RMQ_USER и RMQ_PASS!
RMQ_HOST=rmq
RMQ_PORT=5672
RMQ_USER=admin
RMQ_PASS=admin

# В папке demo/django_project
python manage.py startapp students

from django.db import models

class Student(models.Model):
    name = models.CharField("Name", max_length=240)
    email = models.EmailField()
    document = models.CharField("Document", max_length=20)
    phone = models.CharField(max_length=20)
    registrationDate = models.DateField("Registration Date", auto_now_add=True)
    photo = models.CharField("URL", max_length=512)

    def __str__(self):
        return self.name

python manage.py makemigrations
python manage.py migrate

[
{
    "model": "students.student",
    "pk": 1,
    "fields": {
        "name": "Mark Castillo",
        "email": "mark.castillo@example.com",
        "document": "---",
        "phone": "(790) 550-2323",
        "registrationDate": "2023-08-29",
        "photo": "/media/photo/f5bd4ecb-aaf7-4d4c-ade3-c35c289297d7.jpeg"
    }
},
{
    "model": "students.student",
    "pk": 2,
    "fields": {
        "name": "Margie Marshall",
        "email": "margie.marshall@example.com",
        "document": "---",
        "phone": "(522) 796-6968",
        "registrationDate": "2023-08-29",
        "photo": "/media/photo/5fad3cb0-e7c2-4074-a869-1502a8c517d3.jpeg"
    }
},
{
    "model": "students.student",
    "pk": 3,
    "fields": {
        "name": "Kylie Bishop",
        "email": "kylie.bishop@example.com",
        "document": "---",
        "phone": "(732) 324-6893",
        "registrationDate": "2023-08-30",
        "photo": "/media/photo/93d42334-cce8-4a2e-a54f-bcff9bdf4dc7.jpeg"
    }
},
{
    "model": "students.student",
    "pk": 4,
    "fields": {
        "name": "Carlos Hudson",
        "email": "carlos.hudson@example.com",
        "document": "---",
        "phone": "(801) 431-1682",
        "registrationDate": "2023-09-02",
        "photo": "/media/photo/3c4894e5-5202-45b3-ad65-9ae4ec5e1eda.jpeg"
    }
}
]

from rest_framework.response import Response
from rest_framework.decorators import api_view, permission_classes
from rest_framework.permissions import AllowAny
from django.contrib.auth import authenticate, login, logout
from rest_framework import status
from .serializers import *
from utils import connect
import uuid
import base64
import json

_, channel = connect()

@api_view(['POST',])
@permission_classes([AllowAny])
def login_view(request):
    serializer = LoginRequestSerializer(data=request.data)
    if serializer.is_valid():
        authenticated_user = authenticate(**serializer.validated_data)
        if authenticated_user is not None:
            login(request, authenticated_user)
            return Response({'status': 'Success'})
        else:
            return Response({'error': 'Invalid credentials'}, status=403)
    else:
        return Response(serializer.errors, status=400)

def logout_view(request):
    logout(request)

@api_view(['GET', 'POST'])
def students_list(request):
    if request.method == 'GET':
        data = Student.objects.all()
        serializer = StudentSerializer(data, context={'request': request}, many=True)
        return Response(serializer.data)
    elif request.method == 'POST':
        serializer = StudentSerializer(data=request.data)
        if serializer.is_valid():
            student = serializer.save()
            if bool(request.FILES.get('file', False)) == True:
                save_image(student.pk, request.FILES['file'])
            return Response(status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

@api_view(['PUT', 'DELETE'])
def students_detail(request, pk):
    try:
        student = Student.objects.get(pk=pk)
    except Student.DoesNotExist:
        return Response(status=status.HTTP_404_NOT_FOUND)
    if request.method == 'PUT':
        serializer = StudentSerializer(student, data=request.data, context={'request': request})
        if serializer.is_valid():
            serializer.save()
            if bool(request.FILES.get('file', False)) == True:
                save_image(student.pk, request.FILES['file'])
            return Response(status=status.HTTP_204_NO_CONTENT)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
    elif request.method == 'DELETE':
        student.delete()
        return Response(status=status.HTTP_204_NO_CONTENT)

def save_image(pk, file):
    global channel
    filename = str(uuid.uuid4()) + '.' + file.name[file.name.rfind(".") + 1:]
    msg = {"filename": filename, "image": base64.b64encode(file.read()).decode("UTF-8"), "pk": pk}
    try:
        if (channel == None) or (channel.is_open == False): 
            _, channel = connect(retry = False)
        if (channel != None) and (channel.is_open == True):
            channel.basic_publish(exchange='', routing_key='to_resize', \
                    body=bytes(json.dumps(msg), "UTF-8"))
    except:
        print("Connection error")

from django.conf import settings
import pika
import time

def connect(queues = ["to_resize", "to_socket"], retry = True):
    connected = False
    while connected == False:
        try:
            credentials = pika.PlainCredentials(username=settings.RMQ_USER,
                password=settings.RMQ_PASS)
            parameters = pika.ConnectionParameters(host=settings.RMQ_HOST,
                port=settings.RMQ_PORT, credentials=credentials)
            connection = pika.BlockingConnection(parameters=parameters)
            channel = connection.channel()
            for queue in queues:
                channel.queue_declare(queue = queue)
            connected = True
            return connection, channel
        except:
            pass
        if retry == False: return None, None
        time.sleep(5)

from students.models import Student
from django.core.management.base import BaseCommand
from django.conf import settings
from PIL import Image
from utils import connect
import io
import os
from io import BytesIO
import urllib.parse
import base64
import pika
import time
import json

class Command(BaseCommand):
    def handle(self, *args, **options):
        connection, channel = connect()
        print("I am DJANGO WORKER and I am Waiting for messages. To exit press CTRL+C")
        channel.basic_consume(queue='to_resize', auto_ack=True,\
                on_message_callback=self.callback)
        channel.start_consuming()

    @staticmethod
    def callback(ch, method, properties, body):
        try:
            print("Processing image 'to_resize'")
            msg = json.loads(body.decode("UTF-8"))
            filepath = os.path.join(settings.MEDIA_ROOT, 'photo/', msg["filename"])
            fixed_height = 300
            image = Image.open(BytesIO(base64.b64decode(msg["image"])))
            height_percent = (fixed_height / float(image.size[1]))
            width_size = int((float(image.size[0]) * float(height_percent)))
            new = image.resize((width_size, fixed_height))
            image.save(filepath)
            student = Student.objects.get(pk=msg["pk"])
            student.photo = settings.MEDIA_URL + "photo/" + msg["filename"]
            student.save(update_fields=['photo'])
            socket_msg = {"type": "refresh"}
            ch.basic_publish(exchange='', routing_key='to_socket',\
                    body=bytes(json.dumps(socket_msg), "UTF-8"))
            print("Processing image 'to_resize' complete")
        except Exception as error:
            print(error)

from rest_framework.serializers import ModelSerializer, Serializer, CharField
from django.contrib.auth.models import User
from .models import Student

class StudentSerializer(ModelSerializer):

    class Meta:
        model = Student
        fields = ('pk', 'name', 'email', 'document', 'phone', 'registrationDate','photo')

class LoginRequestSerializer(Serializer):
    model = User
    username = CharField(required=True)
    password = CharField(required=True)

from django.contrib import admin
from .models import Student

admin.site.register(Student)

from django.contrib import admin
from django.urls import path, re_path
from students import views
from django.conf import settings
from django.conf.urls.static import static
from django.contrib.auth.views import LogoutView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/login', views.login_view, name='login'),
    path('api/logout', LogoutView.as_view(next_page='/'), name='logout'),
    re_path(r'^api/students/$', views.students_list),
    re_path(r'^api/students/(\d+)$', views.students_detail),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

import os
from pathlib import Path
from os import environ

BASE_DIR = Path(__file__).resolve().parent.parent

SECRET_KEY = environ.get('SECRET_KEY', "82c1e306-2cdc-412c-9f0e-1ae9fae14126")

DEBUG = int(environ.get('DEBUG', default = 1))

ALLOWED_HOSTS = environ.get('ALLOWED_HOSTS', '*').split(' ')

if "CSRF_TRUSTED_ORIGINS" in environ:
    CSRF_TRUSTED_ORIGINS = environ.get('CSRF_TRUSTED_ORIGINS').split(' ')

RMQ_HOST = environ.get('RMQ_HOST', '127.0.0.1')
RMQ_PORT = environ.get('RMQ_PORT', 5672)
RMQ_USER = environ.get('RMQ_USER', 'admin')
RMQ_PASS = environ.get('RMQ_PASS', 'admin')

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'students'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]


ROOT_URLCONF = 'django_project.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'django_project.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': environ.get('POSTGRES_ENGINE', 'django.db.backends.sqlite3'),
        'NAME': environ.get('POSTGRES_DB', BASE_DIR / 'db.sqlite3'),
        'USER': environ.get('POSTGRES_USER', 'user'),
        'PASSWORD': environ.get('POSTGRES_PASSWORD', 'password'),
        'HOST': environ.get('POSTGRES_HOST', 'localhost'),
        'PORT': environ.get('POSTGRES_PORT', '5432'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.2/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/

STATIC_URL = 'django_static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'django_static')

MEDIA_URL = 'media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.SessionAuthentication',
    ],
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.IsAuthenticated',
    ],
}

LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'filters': {
        'require_debug_true': {
            '()': 'django.utils.log.RequireDebugTrue',
        }
    },
    'handlers': {
        'console': {
            'level': 'INFO',
            'filters': ['require_debug_true'],
            'class': 'logging.StreamHandler',
        }
    },
    'loggers': {
        '': {
            'level': 'INFO',
            'handlers': ['console'],
        }
    }
}

Django==4.2.4
djangorestframework==3.14.0
pika==1.3.2
psycopg2-binary==2.9.7
Pillow==10.0.0

run_cmd="cd django_project && python -u manage.py runserver 0.0.0.0:8000  > ../log_server.log 2>&1"
run_cmd+="& cd django_project && python -u manage.py worker > ../log_worker.log 2>&1"
nohup sh -c "$run_cmd" &

pkill -f "python -u manag[e].py"

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css'
import axios from "axios";

export const API_URL = "/api";
export const API_STATIC_MEDIA = "";
export const WS_URL = window.location.href.replace('http://', 'ws://').replace('https://', 'wss://') + 'ws';

axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = "X-CSRFToken"

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

const getCookie = function(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

export default getCookie;

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

import { Fragment, useState, useEffect } from 'react';
import './App.css';
import Header from "./Header";
import Home from "./Home";
import Login from "./Login";
import ToastMsg from "./ToastMsg";
import useWebSocket from 'react-use-websocket';
import {API_URL, WS_URL} from "../index.js";
import axios from "axios";
import getCookie from "../utils.js";

function App() {
  const [loading, setLoading] = useState()
  const [isLoggedIn, setIsLoggedIn] = useState(true)
  const [formUsername, setFormUsername] = useState()
  const [formPassword, setFormPassword] = useState()
  const [ students, setStudents] = useState([])
  const [ error, setError] = useState()
  const [showToast, setShowToast] = useState(false)
  const [toastMsg, setToastMsg] = useState("")
  const csrftoken = getCookie('csrftoken')
  const [socketUrl, setSocketUrl] = useState(null);

  useEffect(() => {
    if (isLoggedIn) {
        fetch(API_URL + "/students/", {headers: {'Content-Type': 'application/json;charset=utf-8'}})
          .then(response => {
            if (response.ok) {
              return response.json()
            } else if (response.status === 403) {
              throw Error("Access denied")
            } else {
              throw Error(`Something went wrong: code ${response.status}`)
            }
          }).then(responseData => {
            setStudents(responseData)
          })
          .catch(error => {
            console.log(error)
            if (error.message !== "Access denied") setError('Ошибка, подробности в консоли')
            setIsLoggedIn(false)
          })
    }
  }, [isLoggedIn])

  const submitHandler = e => {
    e.preventDefault();
    setLoading(true);
    fetch(
      API_URL + "/login",
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json;charset=utf-8',
          'X-CSRFToken': csrftoken,
        },
        body: JSON.stringify({
          username: formUsername,
          password: formPassword,
        })
      }
    )
      .then(response => {
        if (response.ok) {
          return response.json()
        } else {
          throw Error(`Something went wrong: code ${response.status}`)
        }
      })
      .then(({key}) => {
          setIsLoggedIn(true)
          setError(null)
          setToastMsg("Successfully logged in")
          setShowToast(true)
          setSocketUrl(WS_URL)
      })
      .catch(error => {
        console.log(error)
        setToastMsg("Network error. Check console")
        setShowToast(true)
      })
      .finally(setLoading(false))
    }

  const resetState = () => {
      axios.get(API_URL + "/students/").then(data => setStudents(data.data))
  };

  useWebSocket(socketUrl, {
    onOpen: () => {
      console.log('WebSocket connection established.');
    },
    onMessage: (e) => {
      const msg = JSON.parse(e.data);
      if (msg["type"] === 'refresh') {
          setToastMsg("Refreshing list")
          setShowToast(true)
          resetState();
      }
    }
  });

  useEffect(() => {
    if (isLoggedIn) {
        setSocketUrl(WS_URL);
    } else {
        setSocketUrl(null);
    }
  }, [isLoggedIn]);

  return (
    <Fragment>
      <Header isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn}/>
        <ToastMsg show={showToast} setShow={setShowToast} msg={toastMsg}/>
        {error? <p>{error}</p> : null}
        {isLoggedIn?
            error?
                null
            :
                <div>
                    <Home students={students} setStudents={setStudents} resetState={resetState}/>
                </div>
          :
            loading? "Загрузка..." :
            <Login onSubmit={submitHandler} setFormUsername={setFormUsername} setFormPassword={setFormPassword}/>
        }
    </Fragment>
  );

}

export default App;

import {
  Container, Row, Col, Card, CardBody, Button,
  Form, FormGroup, Label, Input
} from "reactstrap";

const Login = (props) => {
  let loginHandler = props.onSubmit;
  let setUsername = props.setFormUsername;
  let setPassword = props.setFormPassword;

  return (
    <Container style={{'maxWidth':500, 'padding': 20}}>
      <Row>
        <Col>
          <Card>
            <CardBody>
              <Form onSubmit={loginHandler}>
                <FormGroup className="pb-2 mr-sm-2 mb-sm-0">
                  <Label for="exampleUsername" className="mr-sm-2"> Username </Label>
                  <Input type="text" name="email" id="exampleUsername"
                    onChange={(ev) => setUsername(ev.currentTarget.value)}
                  />
                </FormGroup>
                <FormGroup className="pb-2 mr-sm-2 mb-sm-0">
                  <Label for="examplePassword" className="mr-sm-2"> Password </Label>
                  <Input type="password" name="password" id="examplePassword"
                    onChange={(ev) => setPassword(ev.currentTarget.value)}
                  />
                </FormGroup>
                <Button type="submit" color="primary">
                  Login
                </Button>
              </Form>
            </CardBody>
          </Card>
        </Col>
      </Row>
    </Container>
  );
};

export default Login;

import {Container, Row, Col} from "reactstrap";
import ListStudents from "./ListStudents";
import ModalStudent from "./ModalStudent";

const Home = (props) => {
    let students = props.students;
    let resetState = props.resetState;

    return (
        <Container style={{marginTop: "20px"}}>
            <Row>
                <Col>
                    <ListStudents students={students} resetState={resetState} newStudent={false}/>
                </Col>
            </Row>
            <Row>
                <Col>
                    <ModalStudent
                    create={true}
                    resetState={resetState}
                    newStudent={true}/>
                </Col>
            </Row>
        </Container>
    )
}

export default Home;

import axios from "axios";
import { Navbar, NavbarBrand, Nav, Button } from 'reactstrap';
import {API_URL} from "../index.js";

function Header (props) {
    let isLoggedIn = props.isLoggedIn;
    let setIsLoggedIn = props.setIsLoggedIn;

    const handleLogout = e => {
        axios.post(API_URL + "/logout",)
        localStorage.clear();
        window.location.href = '/';
        setIsLoggedIn(false);
    }

    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarBrand className='m-auto'>Students demo</NavbarBrand>
            <Nav navbar>
              {isLoggedIn? <Button onClick={handleLogout}>Logout</Button> : null}
            </Nav>
        </Navbar>
      </div>
    );
}

export default Header;

import {Table} from "reactstrap";
import ModalStudent from "./ModalStudent";
import AppRemoveStudent from "./appRemoveStudent";
import ModalPhoto from "./ModalPhoto";

const ListStudents = (props) => {
    const {students} = props
    return (
        <Table>
            <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Document</th>
                <th>Phone</th>
                <th>Registration</th>
                <th>Photo</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            {!students || students.length <= 0 ? (
                <tr>
                    <td colSpan="6" align="center">
                        <b>Пока ничего нет</b>
                    </td>
                </tr>
            ) : students.map(student => (
                    <tr key={student.pk}>
                        <td>{student.name}</td>
                        <td>{student.email}</td>
                        <td>{student.document}</td>
                        <td>{student.phone}</td>
                        <td>{student.registrationDate}</td>
                        <td><ModalPhoto
                            student={student}
                        /></td>
                        <td>
                            <ModalStudent
                                create={false}
                                student={student}
                                resetState={props.resetState}
                                newStudent={props.newStudent}
                            />
                            &nbsp;&nbsp;
                            <AppRemoveStudent
                                pk={student.pk}
                                resetState={props.resetState}
                            />
                        </td>
                    </tr>
                )
            )}
            </tbody>
        </Table>
    )
}

export default ListStudents

import {Fragment, useState} from "react";
import {Button, Modal, ModalHeader, ModalBody} from "reactstrap";
import StudentForm from "./StudentForm";

const ModalStudent = (props) => {
    const [visible, setVisible] = useState(false)
    var button = <Button onClick={() => toggle()}>Редактировать</Button>;

    const toggle = () => {
        setVisible(!visible)
    }

    if (props.create) {
        button = (
            <Button
                color="primary"
                className="float-right"
                onClick={() => toggle()}
                style={{minWidth: "200px"}}>
                Add student
            </Button>
        )
    }
    return (
        <Fragment>
            {button}
            <Modal isOpen={visible} toggle={toggle}>
                <ModalHeader
                    style={{justifyContent: "center"}}>{props.create ? "Add student" : "Edit student"}</ModalHeader>
                <ModalBody>
                    <StudentForm
                        student={props.student ? props.student : []}
                        resetState={props.resetState}
                        toggle={toggle}
                        newStudent={props.newStudent}
                    />
                </ModalBody>
            </Modal>
        </Fragment>
    )
}
export default ModalStudent;

import {useState} from "react";
import {API_STATIC_MEDIA} from "../index";
import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap";

const ModalPhoto = (props) => {
    const [visible, setVisible] = useState(false)
    const toggle = () => {
        setVisible(!visible)
    }
    return (
        <>
            <img onClick={toggle} src={API_STATIC_MEDIA + props.student.photo} alt='loading' style={{height: 50}}/>
            <Modal isOpen={visible} toggle={toggle}>
                <ModalHeader  style={{color:"white",justifyContent: "center", backgroundColor:"#212529"}}>Фото</ModalHeader>
                <ModalBody style={{display:"flex", justifyContent:"center", backgroundColor:"#212529"}}><img src={API_STATIC_MEDIA + props.student.photo} alt="loading"/></ModalBody>
                <ModalFooter style={{display:"flex", justifyContent:"center", backgroundColor:"#212529"}}> <Button type="button" onClick={() => toggle()}>Закрыть</Button></ModalFooter>
            </Modal>
        </>
    )
}

export default ModalPhoto;

import {Fragment, useState} from "react";
import {Button, Modal, ModalHeader, ModalFooter} from "reactstrap";
import axios from "axios";
import {API_URL} from "../index";

const AppRemoveStudent = (props) => {
    const [visible, setVisible] = useState(false)
    const toggle = () => {
        setVisible(!visible)
    }
    const deleteStudent = () => {
        axios.delete(API_URL + "/students/" + props.pk).then(() => {
            props.resetState()
            toggle();
        });
    }
    return (
        <Fragment>
            <Button color="danger" onClick={() => toggle()}>
                Delete
            </Button>
            <Modal isOpen={visible} toggle={toggle} style={{width: "300px"}}>
                <ModalHeader style={{justifyContent: "center"}}>Вы уверены?</ModalHeader>
                <ModalFooter style={{display: "flex", justifyContent: "space-between"}}>
                    <Button
                        type="button"
                        onClick={() => deleteStudent()}
                        color="primary"
                    >Удалить</Button>
                    <Button type="button" onClick={() => toggle()}>Отмена</Button>
                </ModalFooter>
            </Modal>
        </Fragment>
    )
}
export default AppRemoveStudent;

import {useEffect, useState} from "react";
import {Button, Form, FormGroup, Input, Label} from "reactstrap";
import axios from "axios";
import {API_URL} from "../index";

const StudentForm = (props) => {
    const [student, setStudent] = useState({})

    const onChange = (e) => {
        const newState = student
        if (e.target.name === "file") {
            newState[e.target.name] = e.target.files[0]
        } else newState[e.target.name] = e.target.value
        setStudent(newState)
    }

    useEffect(() => {
        if (!props.newStudent) {
            setStudent(student => props.student)
        }
        // eslint-disable-next-line
    }, [props.student])

    const defaultIfEmpty = value => {
        return value === "" ? "" : value;
    }

    const submitDataEdit = async (e) => {
        e.preventDefault();
        // eslint-disable-next-line
        const result = await axios.put(API_URL + "/students/" + student.pk, student, {headers: {'Content-Type': 'multipart/form-data'}})
            .then(() => {
                props.resetState()
                props.toggle()
            })
    }
    const submitDataAdd = async (e) => {
        e.preventDefault();
        const data = {
            name: student['name'],
            email: student['email'],
            document: student['document'],
            phone: student['phone'],
            photo: "/",
            file: student['file']
        }
        // eslint-disable-next-line
        const result = await axios.post(API_URL + "/students/", data, {headers: {'Content-Type': 'multipart/form-data'}})
            .then(() => {
                props.resetState()
                props.toggle()
            })
    }
    return (
        <Form onSubmit={props.newStudent ? submitDataAdd : submitDataEdit}>
            <FormGroup>
                <Label for="name">Name:</Label>
                <Input
                    type="text"
                    name="name"
                    onChange={onChange}
                    defaultValue={defaultIfEmpty(student.name)}
                />
            </FormGroup>
            <FormGroup>
                <Label for="email">Email</Label>
                <Input
                    type="email"
                    name="email"
                    onChange={onChange}
                    defaultValue={defaultIfEmpty(student.email)}
                />
            </FormGroup>
            <FormGroup>
                <Label for="document">Document:</Label>
                <Input
                    type="text"
                    name="document"
                    onChange={onChange}
                    defaultValue={defaultIfEmpty(student.document)}
                />
            </FormGroup>
            <FormGroup>
                <Label for="phone">Phone:</Label>
                <Input
                    type="text"
                    name="phone"
                    onChange={onChange}
                    defaultValue={defaultIfEmpty(student.phone)}
                />
            </FormGroup>
            <FormGroup>
                <Label for="photo">Photo:</Label>
                <Input
                    type="file"
                    name="file"
                    onChange={onChange}
                    accept='image/*'
                />
            </FormGroup>
            <div style={{display: "flex", justifyContent: "space-between"}}>
                <Button>Send</Button> <Button onClick={props.toggle}>Cancel</Button>
            </div>
        </Form>
    )
}

export default StudentForm;

import Row from 'react-bootstrap/Row';
import Toast from 'react-bootstrap/Toast';
import ToastContainer from 'react-bootstrap/ToastContainer';

function ToastMsg(props) {
  const show = props.show;
  const setShow = props.setShow;
  const msg = props.msg;

  return (
    <Row>
      <ToastContainer position='top-center'>
        <Toast onClose={() => setShow(false)} show={show} delay={3000} autohide>
          <Toast.Header>
            <img
              src="holder.js/20x20?text=%20"
              className="rounded me-2"
              alt=""
            />
            <strong className="me-auto">Notification</strong>
          </Toast.Header>
          <Toast.Body>{msg}</Toast.Body>
        </Toast>
      </ToastContainer>
    </Row>
  );
}

export default ToastMsg;

"dependencies": {
    "axios": "^1.5.0",
    "bootstrap": "^5.3.2",
    "react-bootstrap": "^2.8.0",
    "react-use-websocket": "^4.4.0",
    "reactstrap": "^9.2.0",
    "amqplib": "^0.10.3",
}

var amqp = require('amqplib');
var uuid = require('uuid');
var SOCKET_OPEN = 1;

const queue = "to_socket";

function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

(async () => {
  var connected = false
  const RMQ_HOST=process.env.RMQ_HOST || "127.0.0.1"
  const RMQ_PORT=process.env.RMQ_PORT || 5672
  const RMQ_USER=process.env.RMQ_USER || "admin"
  const RMQ_PASS=process.env.RMQ_PASS || "admin"
  while (!connected) {
      await sleep(1000);
      console.log("Rabbitmq connection attempt")
      try {
        const connection = await amqp.connect("amqp://"+RMQ_USER+":"+RMQ_PASS+"@"+RMQ_HOST+":"+RMQ_PORT);
        const channel = await connection.createChannel();

        process.once("SIGINT", async () => {
          await channel.close();
          await connection.close();
        });

        await channel.assertQueue(queue, { durable: false });
        await channel.consume(
          queue,
          (message) => {
            if (message) {
              console.log("Received refresh message");
              for (const [key, ws] of Object.entries(clients)) {
                    if (ws.readyState === SOCKET_OPEN) {
                      ws.send(message.content.toString());
                    } else {
                      delete clients[key];
                    }
              }
            }
          },
          { noAck: true }
        );
        connected = true;
        console.log("Connected to RabbiqMQ, waiting for messages");
      } catch (err) {
        console.warn(err);
      }
  }
})();

function getCookiesMap(cookiesString) {
  return cookiesString.split(";")
    .map(function(cookieString) {
        return cookieString.trim().split("=");
    })
    .reduce(function(acc, curr) {
        acc[curr[0]] = curr[1];
        return acc;
    }, {});
}

console.log("Server started");
var Msg = '';
var clients = {};
var WebSocketServer = require('ws').Server
    , wss = new WebSocketServer({port: 8010});
    wss.on('connection', function(ws, req) {
        if (req.headers.cookie) {
            var cookies = getCookiesMap(req.headers.cookie);
            var sessionid = cookies["sessionid"];
            var socketid = uuid.v4();
            console.log(sessionid);
            clients[socketid] = ws;
            console.log("New connection from %s", sessionid);
            ws.on('message', function(message) {
              console.log('Received from client: %s', message);
              ws.send('Server received from client: ' + message);
            });
        } else {console.log("New connection");}
 });

run_cmd="cd django_project && python -u manage.py runserver 0.0.0.0:8000 > ../log_server.log 2>&1"
run_cmd+="& cd django_project && python -u manage.py worker > ../log_worker.log 2>&1"
run_cmd+="& cd reactapp && node socket.js > ../log_socket.log 2>&1"
run_cmd+="& cd reactapp && npm run start > ../log_react.log 2>&1"
nohup sh -c "$run_cmd" &

pkill -f "node.*react-scripts start"
pkill -f "node socket.js"
pkill -f "node.*start.js"
pkill -f "python -u manag[e].py"

  "scripts": {
    "start": "BROWSER=none react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

FROM python:3.11-alpine

WORKDIR /usr/src/app
RUN mkdir -p $WORKDIR/static
RUN mkdir -p $WORKDIR/media

ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

RUN apk update \
    && apk add postgresql-dev gcc python3-dev musl-dev

RUN pip install --upgrade pip

COPY ./django_project/requirements.txt .
RUN pip install -r requirements.txt

COPY ./django_project .

ENTRYPOINT ["/usr/src/app/entrypoint.sh" ]

#!/bin/sh

until cd /usr/src/app/
do
    echo "Waiting for server volume..."
done

if [ "$DATABASE" = "postgres" ]
then
    while ! nc -z $POSTGRES_HOST $POSTGRES_PORT; do
      echo "Waiting for db to be ready..."
      sleep 0.1
    done
fi

python manage.py migrate

./manage.py collectstatic --noinput
./manage.py loaddata fixtures/students.json --app students

nohup python manage.py worker & python manage.py runserver 0.0.0.0:8000

FROM node:18-alpine
WORKDIR /usr/src/app
ADD ./reactapp/*.json ./
ADD ./reactapp/socket.js ./
RUN npm install
CMD node socket.js

server {
    listen 80;
    server_name _;
    server_tokens off;
    client_max_body_size 20M;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /ws {
        auth_request /auth;
        proxy_pass http://socket:8010;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;        
        proxy_set_header Connection "upgrade";
    }

    location /auth {
        proxy_set_header Content-Type 'application/json;charset=utf-8';
        proxy_pass http://django:8000/api/students/;
    }

    location /api {
        try_files $uri @proxy_api;
    }
    location /admin {
        try_files $uri @proxy_api;
    }

    location /media {
        autoindex on;
        alias /app/backend/server/media/;
    }

    location @proxy_api {
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Url-Scheme $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass   http://django:8000;
    }

    location /django_static/ {
        autoindex on;
        alias /app/backend/server/django_static/;
    }

}

version: '2'

services:
    nginx: 
        restart: unless-stopped
        container_name: demo_nginx
        build:
            context: .
            dockerfile: ./Dockerfile.nginx
        ports:
            - 80:80
        volumes:
            - static_volume:/app/backend/server/django_static
            - media_volume:/app/backend/server/media
            - ./nginx/production:/etc/nginx/conf.d
        depends_on: 
            - django

    socket:
        restart: unless-stopped
        container_name: demo_socket
        build:
            context: .
            dockerfile: Dockerfile.socket
        depends_on:
            - rmq
        env_file:
            - ./.env

    django:
        restart: unless-stopped
        container_name: demo_django
        build:
            context: .
            dockerfile: Dockerfile.django
        volumes:
            - static_volume:/usr/src/app/django_static
            - media_volume:/usr/src/app/media
        expose:
            - 8000        
        depends_on:
            - postgres
            - rmq
        env_file:
            - ./.env

    rmq:
        image: rabbitmq:3.10-management
        restart: always
        container_name: demo_rmq
        environment:
          - RABBITMQ_DEFAULT_USER=${RMQ_USER}
          - RABBITMQ_DEFAULT_PASS=${RMQ_PASS}
        volumes:
          - rabbitmq_data_volume:/var/lib/rabbitmq/
        ports:
          - 1234:15672
          - 5671-5672:5671-5672
        env_file:
            - ./.env

    postgres:
        image: postgres:15-alpine
        container_name: demo_postgres
        volumes:
          - postgres_volume:/var/lib/postgresql/data/
        environment:
          - POSTGRES_USER=${POSTGRES_USER}
          - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
          - POSTGRES_DB=${POSTGRES_DB}
        env_file:
            - ./.env

volumes:
    static_volume: {}
    media_volume: {}
    postgres_volume: {}
    rabbitmq_data_volume: {}

• React+Django как написать Hello World

• Как серверу на Django знать своих клиентов на React в лицо, практическое руководство

• Docker-Compose for Django and React with Nginx reverse-proxy and Let's encrypt certificate

• Stack Overflow - How to make websocket authentication with Nginx.