Niginx config when in VMware how to proxy_pass?

Development Plone 6 UI (Volto)
1

my /etc/nginx/site-enable/default

and volto start with

pnpm start:prod

upstream volto {
    server 192.168.141.130:3000;
}
upstream ploneapi {
    server 192.168.141.130:8080;
}


server{

        server_name 192.168.141.130;
                listen 192.168.141.130:80 default_server;


location ~ /\+\+api\+\+($|/.*) {
      rewrite ^/\+\+api\+\+($|/.*) /VirtualHostBase/http/192.168.141.130:3000/Plone/++api++/VirtualHostRoot/$1 break;
      proxy_pass http://ploneapi;
  }

location ~ / {
        proxy_pass http://volto;
    }
}

And my browser show

There is a configuration problem on the backend

http://volto

The backend is responding, but the CORS headers are not configured properly and the browser has denied the access to the backend resources.

Any tip?

2

What environment variables are you using with Volto? In this configuration you should set RAZZLE_INTERNAL_API_PATH to http://192.168.141.130:8080/Plone (so the Volto server can access the backend directly) but you should not set RAZZLE_API_PATH (so the Volto client in the browser accesses /++api++ at the same hostname, to avoid CORS)

3

I am not using docker

so I do this in shell

export RAZZLE_INTERNAL_API_PATH=http://192.168.141.130:8080/Plone

and now my nginx config file is

server{

	server_name 192.168.141.130;
	        listen 192.168.141.130:80 default_server;


location ~ /\+\+api\+\+($|/.*) {
      rewrite ^/\+\+api\+\+($|/.*) /VirtualHostBase/http/192.168.141.130:8080/Plone/++api++/VirtualHostRoot/;
      proxy_pass http://192.168.141.130:8080;
  }

location ~ / {
        proxy_pass http://192.168.141.130:3000;
    }



}

I am load http://192.168.141.130/++api++

But when I load http://192.168.141.130 I see the site without content without CSS

Please help.

Some error is like

GET http://192.168.141.130:3001/static/js/runtime~client.js net::ERR_CONNECTION_REFUSED
192.168.141.130/:6 
            
            
           GET http://192.168.141.130:3001/static/js/client.js net::ERR_CONNECTION_REFUSED
4

Are you starting Volto with make frontend-start? That runs Volto in development mode, where it watches for changes in files and shows updates immediately. That requires a separate websocket server which is on port 3001. You haven't exposed that through nginx, so that's why the CSS can't be loaded.

To start in production mode, you can run pnpm start:prod in the frontend folder. (The cookieplone templates don't include a make command for this, since they promote Docker as the preferred way to deploy Plone.)