How to configure CDN for connect ALB-EC2(socket.io)

I have a program under development based on Socket.io, and before deploying it to AWS, I have created a simple Server and Client program for pre-testing. The AWS configuration is set up as CDN-ALB-EC2. As shown in the code, the Backend (EC2) API is running the server using the HTTP protocol only. Therefore, I have set the Origin Protocol(ALB) of the CDN to HTTP, and the Viewer Protocol Policy to "Redirect HTTP to HTTPS", with the "Allowed HTTP Methods" set to GET, HEAD, OPTIONS, PUT, POST, etc. As for the "Cache policy and origin request policy (recommended)" part, I have applied the settings of CachePolicy - "CacheDisabled", and Origin Request Policy - "websocket" (Sec-WebSocket-Key, Sec-WebSocket-Version, Sec-WebSocket-Protocol, Sec-WebSocket-Accept, Sec-WebSocket-Extensions).

(ALB Listener "Protocol : Port" is HTTP:80 and HTTP:3030)

When I access the Socket.io server through the ALB URL, there are no issues. However, when I try to access the Socket.io server through the CDN address, only CDN logs are left, and the access to the EC2's Socket.io server through the CDN is not working. The "/test" or "/health" API calls to the Socket.io server through the CDN address are working fine, but the Socket.io server connection is not working. What part am I missing here?

[Server Sample Code]

import { Server } from "socket.io";
import http from "http";
import express from "express";

const app = express();
let server = http.createServer(app);
const io = new Server(server, {
        cors : {
           origin: '*',
        }
});

const sub_io = io.of("/ioserver");

sub_io.on("connection", (socket) => {
   console.log("Connection Completed");
});

io.on("connection", (socket) => {
   socket.on("ping", (callback) => {
        callback();
   });
});

server.listen(3030, () => {
        console.log("Server Is Running");
});

app.get("/health",(req,res) => {
        res.sendStatus(200);
});

app.get("/test",(req, res) => {
        res.send("{ result :  1 }");
});

[Client Sample Code]

import io from "socket.io-client";

//cdn example URL : sample.cloudfront.net

const socketClient = io(
  "http://sample.cloudfront.net/ioserver",
  {
    transports: ["websocket"],
    upgrade: true,
    reconnection: false,
  }
);

socketClient.on("connect_error", (error) => {
  console.log("Connection Error : " + error.message);
});

socketClient.on("connect", () => {
  console.log("connected");
});

I got 'Connection Error : websocket error' message in the client and I got the below cdn log message.

2024-04-08 22:40:07 ICN57-P1 639 218.146.32.228 GET sample.cloudfront.net /socket.io/ 301 - - EIO=4&transport=websocket - Redirect FRRbZ8T3XphMKuoorH2ERHEMPsQkzwOl1TckxKVvpQFlW15KrRCgRQ== sample.cloudfront.net ws 273 0.002 - - - Redirect HTTP/1.1 - - 46840 0.002 Redirect text/html 167 - -

[Update]

• When I am using Wireshark in client(using CDN URL for connect alb/ec2) I got 'HTTP/1.1 403 forbidden'