Развёртывание сервера Django + Rest framework + Vue.js + nginx

Question

Хочу попробовать эту связку для создания своего web-приложения, с тем как создать приложения на vue и django, а так же связать их между собой более менее понятно, если я правильно думаю, то пользователь делает запрос к vue.js, а vue в свою очередь отправляет запрос к Django для получения данных, после чего vue собирает все данные и отправляет пользователю. Меня интересует как это всё развернуть на боевом сервере и подружить с nginx. Я могу развернуть проект на чистом django, но как быть со связкой Django + Rest framework + vue? Мне бы небольшую памятку на простом примере, возможно есть какие-то ресурсы, где рассказывается об этом. Пожалуйста не предлагайте варианты с использованием Docker или каких-либо других инструментов, упрощающих развёртывание.

Answer 1

Вопрос возможно не актуален, но оставлю для будущего поколения. Вот как развернул свой проект на vue django nginx docker я:

# docker-compose.yml
version: '3'

services:

    nginx:
        build:
            context: .
            dockerfile: ./dockerfiles/nginx/Dockerfile
        depends_on:
            - daphne
            - vue
        ports:
            - 80:80
        volumes:
            - avatars:/media/avatars/
            - static:/dist/

    database:
        build:
            context: .
            dockerfile: ./dockerfiles/postgres/Dockerfile
        container_name: 'database'
        environment:
            POSTGRES_DB: "main"
            POSTGRES_USER: "minigames"
            POSTGRES_PASSWORD: "12345678"
        expose:
            - 5432

    daphne:
        build:
            context: .
            dockerfile: ./dockerfiles/web/Dockerfile
        container_name: 'daphne'
        tty: true
        command: python3 -u -m daphne minigames.asgi:application -b daphne -p 8000
        depends_on:
            - database
        restart: always
        expose:
           - 8000
        volumes:
            - avatars:/media/avatars/


    telegram:
        build:
            context: .
            dockerfile: ./dockerfiles/telegram/Dockerfile
        container_name: 'telegram'
        command: python3 -u telegram/main.py
        depends_on:
            - database
        tty: true
        environment:
            - PYTHONPATH=.

    vue:
        build:
            context: .
            dockerfile: ./dockerfiles/vue/Dockerfile
        container_name: 'vue'
        command: npm run build
        tty: true
        volumes:
            -   static:/dist/
        expose:
            - 81


networks:
    database_network:
        driver: bridge

volumes:
     avatars:
        external: true
     static:
         external: true

# nginx.conf (урезал)
            listen 80;
            server_name 127.0.0.1;


            location /static {
                alias /static/;
                autoindex on;
            }

            location / {
                 alias /dist/;
                 autoindex on;
            }

            location /assets {
                alias /dist/assets/;
                autoindex on;
             }

            location /api/ {
                proxy_pass http://backend;
                   proxy_http_version 1.1;
                    proxy_set_header Upgrade $http_upgrade;
                    proxy_set_header Connection "Upgrade";
                    proxy_set_header Host $http_host;
            }

            location /favicon.ico {
                alias ./minigames/static/favicon.ico;
            }

        proxy_set_header Host $http_host;
                }

# vue docker файл
FROM node:lts-alpine as build-stage
COPY ./front/package*.json ./
RUN npm install
COPY ./front .

# nginx docker file
FROM nginx:latest
COPY ./nginx/nginx.conf /etc/nginx/
COPY ./nginx/static/ /static/

Возможно это не самое лучшее решение, но на данный момент я не нашел ничего лучше. Это решение частично подогнано под мой проект, но вы можете опереться на куски контейнеров и конфигов из этого ответа

БЛОГ НА HUSL

Развёртывание сервера Django + Rest framework + Vue.js + nginx

Ответы (1 шт):