Deploying a separate backend [Django 4.x, PostgreSQL 12.9, Gunicorn, Nginx и django-cors-headers] and frontend [Node.js LTS (16.x), @vue/cli (Vue CLI), Vue v3, Vue Router v4 и Vue Apollo v4] using Strawberry as GraphQL API

Option 1

 ~/backend$ vue add router
 ~/backend$ npm install --save graphql graphql-tag @apollo/client
 ~/backend$ npm install --save @vue/apollo-composable
 ~/backend$ npm install --save @vue/apollo-option

Option 2 (Django 4.x, Poetry, Strawberry, Vue.js v3.x and Vue Apollo v4)

sudo apt install python3-pip python3-dev libpq-dev postgresql postgresql-contrib nginx curl tree

sudo -u postgres psql
CREATE DATABASE myproject;
CREATE USER myprojectuser WITH PASSWORD 'password';
ALTER ROLE myprojectuser SET client_encoding TO 'utf8';
ALTER ROLE myprojectuser SET default_transaction_isolation TO 'read committed';
ALTER ROLE myprojectuser SET timezone TO 'UTC';
GRANT ALL PRIVILEGES ON DATABASE myproject TO myprojectuser;
\q

sudo apt install python3.8-venv
sudo curl -sSL https://install.python-poetry.org | python3 -
export PATH="/home/your_user_name/.local/bin:$PATH"
echo $PATH
poetry --version

mkdir backend
cd backend
~/backend$ poetry init --no-interaction --dependency Django==4.0.2
~/backend$ poetry install
~/backend$ poetry shell
(backend-...-py3.8) ~/backend$ django-admin startproject backend ~/backend
(backend-...-py3.8) ~/backend$ tree -L 2
(backend-...-py3.8) ~/backend$ poetry add psycopg2-binary

# nano backend/settings.py
from pathlib import Path
BASE_DIR = Path(__file__).resolve(strict=True).parent.parent
TEMPLATES_DIR = BASE_DIR.joinpath('templates')
ALLOWED_HOSTS = ['your_server_domain_or_IP', 'localhost']
DATABASES = {
 'default': {
 'ENGINE': 'django.db.backends.postgresql_psycopg2',
 'NAME': 'myproject',
 'USER': 'myprojectuser',
 'PASSWORD': 'password',
 'HOST': 'localhost',
 'PORT': '',
 }
}
STATIC_URL = 'static/'
STATIC_ROOT = BASE_DIR / 'static'

(backend-...-py3.8) ~/backend$ python manage.py makemigrations
(backend-...-py3.8) ~/backend$ python manage.py migrate
(backend-...-py3.8) ~/backend$ python manage.py createsuperuser
(backend-...-py3.8) ~/backend$ python manage.py collectstatic
sudo ufw allow 8000
(backend-...-py3.8) ~/backend$ python manage.py runserver 0.0.0.0:8000

(backend-...-py3.8) ~/backend$ poetry add gunicorn
(backend-...-py3.8) ~/backend$ poetry show --tree
sudo nano /etc/systemd/system/gunicorn.socket
[Unit]
Description=gunicorn socket
[Socket]
ListenStream=/run/gunicorn.sock
[Install]
WantedBy=sockets.target

(backend-...-py3.8) ~/backend$ poetry env info
sudo nano /etc/systemd/system/gunicorn.service
[Unit]
Description=gunicorn daemon
Requires=gunicorn.socket
After=network.target
[Service]
User=your_user_name
Group=www-data
WorkingDirectory=/home/your_user_name/backend
ExecStart=/home/your_user_name/.cache/pypoetry/virtualenvs/backend-...-py3.8/bin/gunicorn \
 --access-logfile - \
 --workers 3 \
 --bind unix:/run/gunicorn.sock \
 backend.wsgi:application
[Install]
WantedBy=multi-user.target

sudo ln -s /etc/nginx/sites-available/backend /etc/nginx/sites-enabled
sudo systemctl start gunicorn.socket
sudo systemctl enable gunicorn.socket
sudo systemctl daemon-reload
sudo systemctl restart gunicorn

sudo nano /etc/nginx/sites-available/backend
server {
 listen 80;
 listen [::]:80;
 server_name your_server_domain_or_IP;
 location = /favicon.ico { access_log off; log_not_found off; }
 location /static/ {
 root /home/your_user_name/backend;
 }
 location / {
 include proxy_params;
 proxy_pass http://unix:/run/gunicorn.sock;
 }
}

sudo ln -s /etc/nginx/sites-available/backend /etc/nginx/sites-enabled
sudo nginx -t
sudo systemctl restart nginx
sudo ufw delete allow 8000
sudo ufw allow 'Nginx Full'
sudo ufw status verbose

(backend-...-py3.8) ~/backend$ python manage.py startapp blog
(backend-...-py3.8) ~/backend$ nano backend/settings.py
 INSTALLED_APPS = [
 ...
 'blog',
]

(backend-...-py3.8) ~/backend$ poetry add strawberry-graphql-django
(backend-...-py3.8) ~/backend$ poetry add django-cors-headers
nano backend/settings.py
INSTALLED_APPS = [
 ...
 'strawberry.django',
 'corsheaders',
]
MIDDLEWARE = [
 'corsheaders.middleware.CorsMiddleware',
 ...
]
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = [
 'http://localhost:8080',
 'http://your_server_domain_or_IP:8080',
]

nano backend/urls.py
 
from django.contrib import admin
from django.urls import include, path
from strawberry.django.views import AsyncGraphQLView
from django.views.decorators.csrf import csrf_exempt
from blog.schema import schema
urlpatterns = [
 path('admin/', admin.site.urls),
 path('graphql', csrf_exempt(AsyncGraphQLView.as_view(schema=schema))),
]

(backend-...-py3.8) ~/backend$ python manage.py makemigrations
(backend-...-py3.8) ~/backend$ python manage.py migrate
(backend-...-py3.8) ~/backend$ python manage.py collectstatic
sudo systemctl daemon-reload
sudo systemctl restart gunicorn

~/backend$ tree -L 2
├── backend
│  ├── __init__.py
│  ├── __pycache__
│  ├── asgi.py
│  ├── settings.py
│  ├── urls.py
│  └── wsgi.py
├── blog
│  ├── __init__.py
│  ├── __pycache__
│  ├── admin.py
│  ├── apps.py
│  ├── migrations
│  ├── models.py
│  ├── schema.py
│  ├── tests.py
│  └── views.py
├── manage.py
├── poetry.lock
├── pyproject.toml
└── static
 ├── admin
 └── graphiql.html

Usefull notes to understand above better:

# views.py
from django.contrib.auth.mixins import LoginRequiredMixin
from strawberry.django.views import GraphQLView
class PrivateGraphQLView(LoginRequiredMixin, GraphQLView):
 login_url = '/login/' 

# urls.py
from your_app.views import PrivateGraphQLView
 
urlpatterns = [
 # other paths,
 path('graphql', csrf_exempt(PrivateGraphQLView.as_view(graphiql=True, schema=schema))),