Docs: Add SPA routing fix for IR Valuation frontend
This commit is contained in:
parent
d728623947
commit
2c9e31f271
@ -72,6 +72,41 @@ sudo systemctl reload nginx
|
|||||||
- `http://ro-being.com/ir-valuation`
|
- `http://ro-being.com/ir-valuation`
|
||||||
- `http://124.55.18.179/ir-valuation`
|
- `http://124.55.18.179/ir-valuation`
|
||||||
|
|
||||||
|
## SPA 라우팅 문제 해결
|
||||||
|
|
||||||
|
**문제**: `/ir-valuation` 경로 접근 시 nginx는 200 OK를 반환하지만 브라우저에서 404 표시
|
||||||
|
|
||||||
|
**원인**:
|
||||||
|
- nginx는 정상적으로 `dist/index.html`을 서빙 (curl/Network 탭 모두 200 OK)
|
||||||
|
- 하지만 `App.tsx`의 wouter 라우터가 `path="/"`만 정의되어 있어 `/ir-valuation` 경로에서 매칭 실패
|
||||||
|
- SPA 내부 라우터가 404 컴포넌트를 렌더링
|
||||||
|
|
||||||
|
**해결**:
|
||||||
|
- `App.tsx`에 base path 처리 로직 추가
|
||||||
|
- `useLocation` hook으로 `/ir-valuation` base path를 제거하고 라우팅
|
||||||
|
|
||||||
|
**파일**: `src/App.tsx:14-25`
|
||||||
|
```typescript
|
||||||
|
function Router() {
|
||||||
|
const [location] = useLocation();
|
||||||
|
const basePath = "/ir-valuation";
|
||||||
|
const normalizedLocation = location.startsWith(basePath)
|
||||||
|
? location.slice(basePath.length) || "/"
|
||||||
|
: location;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Switch location={normalizedLocation}>
|
||||||
|
<Route path="/" component={IRValuationPage} />
|
||||||
|
<Route component={() => <div>404 Not Found</div>} />
|
||||||
|
</Switch>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**검증**:
|
||||||
|
- `https://ro-being.com/ir-valuation/` 접근 시 IR 평가 페이지 정상 표시
|
||||||
|
- 네트워크 요청 모두 200 OK 확인
|
||||||
|
|
||||||
## 다음 단계
|
## 다음 단계
|
||||||
|
|
||||||
1. **백엔드 연동**: rb8001 API 엔드포인트 구현
|
1. **백엔드 연동**: rb8001 API 엔드포인트 구현
|
||||||
@ -91,6 +126,8 @@ sudo systemctl reload nginx
|
|||||||
- frontend-customer 구조를 참고하여 빠르게 프로젝트 생성 가능
|
- frontend-customer 구조를 참고하여 빠르게 프로젝트 생성 가능
|
||||||
- nginx 설정은 두 서버 블록(HTTP/HTTPS) 모두에 추가 필요
|
- nginx 설정은 두 서버 블록(HTTP/HTTPS) 모두에 추가 필요
|
||||||
- 빌드 산출물은 `/home/admin/frontend-ir-valuation/dist/`에 저장
|
- 빌드 산출물은 `/home/admin/frontend-ir-valuation/dist/`에 저장
|
||||||
|
- **SPA 라우팅**: nginx base path(`/ir-valuation`)와 React 라우터 경로를 일치시켜야 함
|
||||||
|
- wouter는 base path를 자동 처리하지 않으므로 `useLocation`으로 수동 처리 필요
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user