Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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.
                What do you mean same domain? Do you want your backend & frontend both on example.com or backend on api.example.com & frontend on example.com?
– user14036065
                Sep 5, 2021 at 12:47
                I dont know much abt this stuff but. I am using namecheaps domain with an A record to the machines public ip address.
– user655941
                Sep 5, 2021 at 13:02
                Ok, just a general thing. You need to create DNS records and point them at the app. So, if you want your Vue app to be at example.com, you need to create a record for the same. It can be a CNAME, A, AAAA, etc. The same goes for the Django app.
– user14036065
                Sep 5, 2021 at 13:04
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.