У меня проблема с настройкой api и front-end на одном домене с использованием nginx

Я получил vm от azure и пытался установить front-end на vue и back-end на django. Однако моя проблема в том, что под одним доменом я не могу заставить их работать.

Вот мой конфиг nginx для vue :

server {
listen 80;
server_name www.todoapi.xyz;
return 301 https://www.todoapi.xyz$request_uri;
}

server {
listen 443 ssl;
server_name www.todoapi.xyz;

client_max_body_size 4G;

error_log  /webapps/todo/enviroment_3_8_2/logs/nginx-vue-error.log;
access_log /webapps/todo/enviroment_3_8_2/logs/nginx-vue-access.log;

ssl_certificate /etc/letsencrypt/live/www.todoapi.xyz/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/www.todoapi.xyz/privkey.pem;

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';

charset utf-8;
root /webapps/todo/todo_vue/dist;
index index.html index.htm;
location / {
    root /webapps/todo/todo_vue/dist;
    try_files $uri $uri/ =404;
}
}

И конфигурация nginx для django :

upstream todo_app_server {
server unix:/webapps/todo/enviroment_3_8_2/run/gunicorn.sock fail_timeout=0;
}

server {
listen 80;
server_name www.todoapi.xyz;
return 301 www.todoapi.xyz$request_uri;
}

server {
listen 443 ssl;
server_name www.todoapi.xyz;

client_max_body_size 4G;

access_log /webapps/todo/enviroment_3_8_2/logs/nginx-django-access.log;
error_log /webapps/todo/enviroment_3_8_2/logs/nginx-django-error.log;

ssl_certificate /etc/letsencrypt/live/www.todoapi.xyz/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/www.todoapi.xyz/privkey.pem;

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';

location /static/ {
    alias /webapps/todo//environment_3_8_2/todo/static/;
}

location /media/ {
    alias /webapps/todo/todo_vue_api/media/;
}

location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_set_header Host $http_host;

    proxy_redirect off;

    if (!-f $request_filename) {
        proxy_pass http://todo_app_server;
    }
}
}

Из того, что я прочитал в google, кажется, что их можно разместить в одном домене, однако я не могу этого сделать. Оба файла nginx работают нормально по отдельности, однако вместе работает только файл vue.

Для тех, кто смотрит на это и задается вопросом. Я создал поддомен api.todoapi.xyz. Изменил nginx djangos api на api.todapi.xyz и также использовал certbox для получения сертификатов для этого субдомена.

Вернуться на верх