1. 리액트 baseUrl 설정

domain.com 으로 바로 제공하는 것이 아니라 domain.com/webgl 처럼 제공하려는 경우, /webgl 에 해당하는 baseUrl을 설정해주어야 한다.
AWS S3에서 버킷의 루트에 index.html 을 두지 않고, webgl 폴더를 만들고 webgl/index.html 로 호스팅을 제공하려고 할 때도 마찬가지로 baseUrl을 webgl 로 설정해야 한다.

[1] .env 파일

PUBLIC_URL=/webgl

[2] index.html

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/icon.ico" />

html 파일에서 정적으로 제공하는 파일 경로 앞에 %PUBLIC_URL%/ 을 붙인다.

[3] 라우팅 (App.tsx)

import { Route, Routes, Navigate } from "react-router";
import React from "react";
import { BrowserRouter } from "react-router-dom";
import UnityMain from "./pages/UnityMain";

export default function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="" element={<UnityMain webglName="Dev" />} />
                <Route path="/webgl" element={<UnityMain webglName="Dev" />} />
                <Route path="/webgl/" element={<UnityMain webglName="Dev" />} />
            </Routes>
        </BrowserRouter>
    );
}

위에서는 가능한 모든 경우에 다 대응했지만, 결국 필요한 라우팅은 /webgl , /webgl/

2. 리액트 빌드

react-scripts build

3. AWS S3 업로드

빌드한 파일들을 넣는다.

Untitled

4. AWS S3 버킷 설정

[1] 권한 설정

퍼블릭으로 설정해야 한다.

1. 리액트 baseUrl 설정

[1] .env 파일

[2] index.html

[3] 라우팅 (App.tsx)

2. 리액트 빌드

3. AWS S3 업로드

4. AWS S3 버킷 설정

[1] 권한 설정

[2] 권한 - 버킷 정책 설정