0

It's my first time that I'm deploying Vue and DRF(Django rest frame work) app on production server. I used npm run build to build my Vue app as my front-end and I moves the dist folder to /var/www/html/frontend/.

I'm calling my request using fetch api from Vue and this is the base url of all request:

import {defineStore} from 'pinia'

export const useGeneralConfig = defineStore('generalConfig',{
    state: () => {
        return {
            BASE_URL : "http://127.0.0.1:7789/api"
        }
    }
})

I'm using caddy as server and here is the Caddyfile content:

:80
root * /var/www/html/frontend/dist
encode gzip zstd
try_files {path} {path}/ /index.html
reverse_proxy /api/* localhost:7789
file_server

Now when I enter X.X.X.X (my VPS IP address) in the browser I can see that Vue app is serving but it does not communicate to DRF back-end and I cant see any request log in my backend logs.

I run the backend like this:

python3 manage.py runserver 7789

And here is the output:

System check identified no issues (0 silenced).
February 26, 2023 - 02:23:18
Django version 4.1.5, using settings 'project_name.settings'
Starting development server at http://127.0.0.1:7789/
Quit the server with CTRL-BREAK.

This is the browser console error:

GET http://127.0.0.1:7789/api/users/user net::ERR_CONNECTION_REFUSED

But I can rend request using terminal to this address and get response:

wget 127.0.0.1:7789/api/users/user

Any help would be appreciated.

Soroosh
  • 543
  • 1
  • 4
  • 21

0 Answers0