In ReactJS, using Google Model Viewer does not work in deployed website

Question

I wanted to implement AR that can be used properly in both AOS and iOS in the project.

So I tried various methods, and among them, Google's Model Viewer was judged to support the largest range of browsers and OSs.

Therefore, I implemented a project that used Model Viewer in reactJS.

When the project was carried out locally, it worked fine.

After confirming the operation, it was proceeded using AWS Amplify to deploy it.

However, when I approached the predicated https url and checked, the 3d model object did not render properly and the error log was as follows.

CachingGLTFLoader.js:151 SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
    at JSON.parse (<anonymous>)
    at n.value (GLTFLoader.js:315:21)
    at Object.onLoad (GLTFLoader.js:205:11)
    at three.module.js:39951:38

What can I do in this case?

My code is as fellows.

// pages/BigMack.js
const BigMack = () => {
    return (
        <div id="card">
            <model-viewer
                alt="big_mack"
                src="gltf/big_mack/scene.gltf"
                shadow-intensity="1"
                ios-src="usdz/big_mack.usdz"
                quick-look-browsers="safari chrome"
                ar-scale="fixed"
                camera-controls ar touch-action="pan-x"
                disable-zoom
            ></model-viewer>
        </div>
    );
};

export default BigMack;

// App.js
import React from "react";
import './App.css';
import "@google/model-viewer/dist/model-viewer";
import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./pages/Home";
import BigMack from "./pages/BigMack";
import MacBook from "./pages/MacBook";
import Pizza from "./pages/Pizza";
import RobotCleaner from "./pages/RobotCleaner";

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home/>}/>
                <Route path="/big-mack" element={<BigMack/>}/>
                <Route path="/macbook-pro" element={<MacBook/>}/>
                <Route path="/pizza" element={<Pizza/>}/>
                <Route path="/robot-cleaner" element={<RobotCleaner/>}/>
            </Routes>
        </Router>
    );
}

export default App;

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

And the public directory is this.