1. AWS ELB 설정

패턴 매칭을 통한 타겟그룹 Redirect
대상 도메인 예시 : https://domain.com
패턴 매칭 : /something/*

2. 리액트 접근 시 문제 확인

Refused to execute script from static/js/bundle.js because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

3. 참고

https://velog.io/@rmaomina/public-url-absolute-path

4. 해결 - 리액트 환경 변수 설정

.env

PUBLIC_URL=/something

5. 해결 - 정적 HTML 페이지 루트 경로 설정

%PUBLIC_URL%/ 경로 추가
동적 페이지에서는 접근 경로에 대해 공통적인 설정을 해주면 되지만, 정적 페이지에서의 경로 접근은 일일이 추가해주어야 한다.

<!doctype html>
<html lang="en">
    <head>
        ...
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        ...
    </head>
    <body>
        <noscript>You.</noscript>
        <div id="root"></div>
    </body>
</html>

6. 라우팅 설정(App.tsx)

모든 경로가 /something/* 꼴로 구성되어야 한다.

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

export default function App() {
    return (
        <BrowserRouter>
            <Routes>
            
                // 루트 -> 다른 경로 리다이렉트 방법 1
                {/* <Route path="/something" element={<Navigate to="/something/dev" replace />} /> */}
                
								// 공통 패스 설정
                <Route path="/something">
                
                    // 루트 -> 다른 경로 리다이렉트 방법 2
                    <Route path=""    element={<Navigate to="/something/dev" replace />} />
                    
                    // 공통 Route 하위의 Route에서 path 시작에는 /를 붙이지 않는다.
                    <Route path="dev" element={<UnityMain />} />
                    <Route path="web" element={<UnityMain />} />
                </Route>

            </Routes>
        </BrowserRouter>
    );
}

7. 추가: 빌드 후 Nginx로 정적 파일 라우팅하는 경우

Rewrite 처리를 해주어야 한다.