Uploaded files and images are not visible after deployment.

[Emuzex]

Hi

I deployed it to a VPS as a regular Nuxt app (with Coolify). Everything works except that the images are not visible. What is the reason for this?

I have no idea what to do. Could you help me make the uploaded files accessible on the site?

[murisceman]

Hi!

1. Verify your files are uploading to the .uploads directory on your server.
2. Make sure this folder doesn't get removed during Coolify redeployments.
3. Check that the symlink exists in the public directory pointing to .uploads (without it, your uploaded files won't be publicly accessible).

[Emuzex]

1. Unfortunately, I cannot upload. The server's response:

{
    "url": "/api/collections/uploads",
    "statusCode": 500,
    "statusMessage": "",
    "message": "internal server error",
    "stack": ""
}

2. .uploads remains after deployment.
3. But the symbolic link does not. I set up a post-deployment command: "ln -s /.uploads public/uploads," which creates the symbolic link after installation, but I still can't access the photos, so I must have done something wrong.

Note: I realized that during the Coolify installation process, the application is placed in an "app" folder that contains the Nuxt application, and Pruvious extracts this .uploads folder to the root folder.

But I don't know how to solve this, make it work properly. I'm not a devops/deploy expert, but it seems I need to get better at this.

[Emuzex]

Is that possible to avoid using symlink and just place the files in a publicly accessible folder in public folder?

[Emuzex]

I use Cloudflare's R2 storage instead. I can't solve the issue by myself to handle files locally.

[murisceman]

I suspect Coolify is enforcing the new Nuxt folder structure. You can try reverting to v3 structure with this config:

export default defineNuxtConfig({
  // Change the default source directory from 'app' back to root
  srcDir: '.',
  // Set directory prefix for router options and SPA loading template
  dir: {
    app: 'app'
  }
})

Regarding your questions:

Is that possible to avoid using symlink and just place the files in a publicly accessible folder in public folder?

Unfortunately not in Pruvious v3. The symlink requirement will be removed in the upcoming v4.

I use Cloudflare's R2 storage instead. I can't solve the issue by myself to handle files locally.

If the Nuxt config above doesn't work, using any S3-compatible storage (like R2) should work fine. The issue is likely related to Coolify's deployment process, which handles things differently than the standard npx pruvious deploy command.

[Emuzex]

Yes, Coolify probably handles it differently. But R2 storage works really well. Thank you for your quick responses and help.

[s075631]

You can use nginx to implement a static directory proxy.

  location /uploads/ {
        alias /path/to/.uploads/;
        
        autoindex on;
        autoindex_exact_size off;   
        autoindex_localtime on;
        try_files $uri $uri/ =404;
        expires 1d;
        add_header Cache-Control "public, max-age=86400";
    }