CODEWITHSUNDEEP
djangovue.jsnginx
user655941
user655941

Reputation: 397

Im having problem setting up api and front-end on same domain using nginx

I got a vm from azure and i was trying to set up a front-end in vue and back-end in django.However my problem is that under 1 domain i cant seem to make both of them work.

This is my nginx config for 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;
}
}

And nginx config for 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;
    }
}
}

From what i read on google it seemed possible to have them under the same domain however i am unable to do so. Both nginx files run ok separately however together only the vue one seems to work.

Upvotes: 1

Views: 223

Answers (1)

user655941
user655941

Reputation: 397

For anyone looking at this and wondering. I made a sub domain named api.todoapi.xyz. Changed the nginx of djangos api to api.todapi.xyz and also used certbox to get certificates for this subdomain as well.

Upvotes: 1

Related Questions