So I am trying to deploy a web application on a Google Cloud Virtual Machine, which is redirected on my domain name.
My app uses React as front-end, a server.js file using express websockets as backend.
I configured nginx on the VM and uploaded my project.
Its looks like this :

client
— build
— node_modules
— public
— src
—- app.js
—- app.css

server
— server.js
— node_modules
— package.json
— package-lock.json

Once I start everything, the front-end loads and is displayed perfectly, but the problem is that the console shows me this error message :
WebSocket connection to ‘wss:///socket.io/?EIO=4&transport=websocket’ failed.
So the connexion to the server doesn’t seem to work.

I added my domain to the sites available on nginx, it looks like this:

server {
    listen 80;
    server_name <domainName>;

    # Rediriger tout le trafic HTTP vers HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name <domainName>;

    ssl_certificate /etc/letsencrypt/live/<domainName>/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/<domainName>/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
        root /var/www/biskit/client/build; # Répertoire des fichiers construits React
        try_files $uri /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:3000;  # Port sur lequel votre application Node.js écoute
        proxy_http_version 1.1;

        # Réglages pour WebSocket
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        # Autres en-têtes de proxy
        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;
    }
}

In the react app, I configured the endpoint for websockets like this:

const ENDPOINT = 'wss://<domainName>';

function App() {
    const [socket] = useState(() => socketIOClient(ENDPOINT, {
        transports: ['websocket', 'polling'],
        withCredentials: true
    }));

In server.js :

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const cors = require('cors');

const app = express();
const server = http.createServer(app);

const allowedOrigins = [
    'http://localhost:3000', // Pour le développement local
    'https://<domaineName>' // Pour la production
];

// Configuration CORS
app.use(cors({
    origin: function (origin, callback) {
        if (!origin || allowedOrigins.indexOf(origin) !== -1) {
            callback(null, true);
        } else {
            callback(new Error('Not allowed by CORS'));
        }
    },
    methods: ["GET", "POST"],
    credentials: true
}));

const io = socketIo(server, {
    cors: {
        origin: function (origin, callback) {
            if (!origin || allowedOrigins.indexOf(origin) !== -1) {
                callback(null, true);
            } else {
                callback(new Error('Not allowed by CORS'));
            }
        },
        methods: ["GET", "POST"],
        credentials: true
    }
});

I originally used only my domaine name and not the localhost, but it was also not working, no difference. Also the port is set at the end of the file like this:
const PORT = process.env.PORT || 3000;

The SSL certificate is OK.
I allowed the tcp:3000 port in the firewall for my app.
My server is running and status is ‘online’ with pm2 list.
testing the connection with “wscat -c wss:///socket.io/?EIO=4&transport=websocket” also works and returns no error.

It has been days and I cannot seem to find where the problem would be. Everything I find on the internet explains things to do on the nginx server, back-end or front-endwhich seems all correct to me.
If anyone has an idea on why this would not work, you would save my day.