CONNECTION_TIMED_OUT when accessing S3 + CloudFront website

I am currently trying to deploy a VueJS website using AWS S3 and CloudFront. I have followed the steps of the section Using a REST API endpoint as the origin, with access restricted by an OAC of this article. I started by runnin npm run build, then I created a S3 bucket, populated it with the files of the dist folder, then I created a CloudFront distribution for my S3 bucket with access restricted by an OAC. I also set the default root object of my distribution to index.html. I specify that, as mentionned in the article, static website hosting is turned off.

However, when I try to access the website using the distribution url I only get Failed to load resource: net::ERR_CONNECTION_TIMED_OUT errors. And if i refresh the website the error messages change to GET https://seeding.gg/assets/index.b6d75f23.js net::ERR_CONNECTION_TIMED_OUT. I did not set a domain name for now, so I access the website through https://***.cloudfront.net/ url.

As I do not know the source of the issue, you will find below the structure of my S3 bucket :

|   favicon.ico
|   index.html
|   
+---assets
|       bootstrap.32fb5687.css
|       bootstrap.8e7ba031.js
|       index.25abbdf5.js
|       main.6ce62329.js
|       vendor.43d552e6.js
|       
\---img
    \---cards
            ssbm.jpg
            ssbu.jpg

And the content of the vite.config.js file :

import { fileURLToPath, URL } from "url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import dotenv from 'dotenv';

const env = process.env.VITE_APP_ENV || 'dev';
const envConfig = dotenv.config({ path: `.env.${env}` }).parsed;

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': Object.keys(envConfig).reduce((acc, key) => {
      acc[key] = envConfig[key];
      return acc;
    }, {}),
  },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  base: 'https://***.cloudfront.net/',
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: ['src/main.js', './index.html']
    }
  }
});

Thanks in advance.

This could be either due to DNS propagation issues perhaps.

Your configuration looks about right and I can't think of anything that could cause a resource loading failure.