How do I make rasa webchat work with nginx and https?

I have a chatbot implemented with rasa and it is working with rasa webchat. It worked fine when I tested it locally with ngrok, and it also worked when I configured nginx (port 80) on the server. However, once I changed the nginx config file to support https, the webchat only shows the "Connecting..." message and does not respond. I looked for errors in the browser console but there are none. This is my index file which takes care of the webchat interface:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fe</title>
</head>

<body>
    <div id="webchat">
    <script src="https://storage.googleapis.com/mrbot-cdn/webchat-0.5.8.js"></script>
    <script>
        WebChat.default.init({
            selector: "#webchat",
            initPayload: "hi",
            interval: 1000,
            socketUrl: "https://example.com/rasa",
            socketPath: "/socket.io/",
            title: "speak with bot",
            inputTextFieldHint: "say something...",
            connectingText: "Connecting...",
            connectOn: open,
            embedded: true,
            hideWhenNotConnected: false,
            /*fullScreenMode: true,*/
            profileAvatar: "assets/fe.jpeg",
            openLauncherImage: 'assets/launcher_button.svg',
            closeLauncherImage: 'assets/launcher_button.svg',
            params: {
                images: {
                    dims: {
                        width: 300,
                        height: 200,
                    }
                },
                storage: "session"
            }
        })
    </script>
</body>

</html>

and this is my nginx config file after proper modifications to support https:

upstream rasa {
        server bot-webchat:5005; # bot-webchat is the chatbot container name
}

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

        server_name example.com www.example.com;

        location ~ /.well-known/acme-challenge {
                allow all;
                root /var/www/html;
        }

        location / {
                rewrite ^ https://$host$request_uri? permanent;
        }
}

server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name example.com www.example.com;

        index index.php index.html index.htm;

        root /var/www/html;

        server_tokens off;

        ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

        ssl on;
        ssl_session_cache  builtin:1000  shared:SSL:10m;
        ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
        ssl_prefer_server_ciphers on;

        location / {
                try_files $uri $uri/ =404;
        }

        # the next two location directives were necessary to avoid mixed content error and allow
        # https access to port 5005 and websocket
        location /rasa/ {
                proxy_pass http://rasa;
                proxy_http_version  1.1;
                proxy_set_header Upgrade           $http_upgrade;
                proxy_set_header Connection        "upgrade";
                proxy_set_header Host              $host;
        }

        location /socket.io/ {
                proxy_pass http://rasa/socket.io;
                proxy_http_version  1.1;
                proxy_set_header Upgrade           $http_upgrade;
                proxy_set_header Connection        "upgrade";
                proxy_set_header Host              $host;
        }

        location = /favicon.ico {
                log_not_found off; access_log off;
        }

        location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
                expires max;
                log_not_found off;
        }
}

After the tests I've done I believe there may be something wrong in my nginx config file, but I have no idea what that is... I also used postman to verify that "https://example.com/rasa" and "https://example.com/socket.io" are responding as expected. If someone can help me figure what is going on, I'd really appreciate it.

Solution

My bot also build whit rasa,botfront/wetchat and nginx like your.

The bot configure of webchat is like below:

WebChat.default.init({
  selector: '#webchat',
  profileAvatar: 'https://www.jrcg.vip/assets/images/bot_avatar.jpg',
  initPayload: '/greet',
  params: { storage: 'session' },
  customData: { language: 'zh' },
  socketUrl: 'https://www.jrcg.vip',
  socketPath: '/socket.io/',
  title: '五竹',
  subtitle: '蠢萌蠢萌的机器人🍀🍀🍀',
  inputTextFieldHint: '对我说点什么吧'
});

And the configure in nginx config is:

# ...

location /socket.io/ {
        proxy_pass http://127.0.0.1:5005;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header X-real-ip $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
}

# ...

Mybe you can merge location /rasa/ and location /socket.io/ to one location.