How to run multiple web app in a single vm machine using azure

Question

In digitalocean droplet, I used nginx reverse proxy with pm2 to run multiple react/nextjs app with a single public Ip. I run different apps into different ports managed by pm2. Then config for every apps with nginx.

My nginx configs are like:

server {
        listen 80;
        listen [::]:80;

        server_name sitename.com www.sitename.com;

        location / {
                try_files $uri $uri/ /index.html =404;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-NginX-Proxy true;
                proxy_pass http://localhost:4000;
        proxy_read_timeout 3600;
                proxy_ssl_session_reuse off;
                proxy_set_header Host $http_host;
                proxy_cache_bypass $http_upgrade;
                proxy_redirect off;
        }
}

It worked well in digitalocean droplet, but when it comes to microsoft azure, it results Connection timed out Error code 522