rails-api backend and vue/vite frontend application not picking up variables from .env.production nginx

Question

I have an application using rails-api for the backend. In the root of my project there is a frontend folder in which the vue code is. Vue is served by vite. At the root of the frontend folder there is a .env.production file in which I have VITE_BACKEND_URL=http://www.maApp.net/api. I have put some console.logs in the code to check the content of VITE_BACKEND_URL. It seems that my application is not picking up the value of that variable. In /etc/nginx/sites-available/default I have

root /home/puma/MDL/public;

    error_log /var/log/nginx/api_error.log debug;

    location / {
        try_files $uri $uri/ /index.html;
   }

location ~ ^/(signup|login|logout|users/confirmation) {
        proxy_pass http://xx.xxx.xx.xx:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_cache_bypass $http_upgrade;
    }

    location /api {
        proxy_pass http://xx.xxx.xx.xx:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
   }

Any idea why ?