[Common] 기존 프로젝트의 하위 디렉토리에 웹 소스 배포

요구 사항

A와 B는 서로 다른 웹 소스이고 A와 B는 동일한 도메인을 사용합니다. 그래서 기존에 서비스 중이던 A에 하위 디렉토리를 생성하고 /subdirectoryName으로 접근하면 B를 렌더링하려고 합니다.

상황

사용자가 https://domain.com/ 으로 접근하면 A를 렌더링합니다.

A의 환경변수

// .env

PUBLIC_URL=/

Nginx 설정은 아래와 같습니다.

...something...

location / {
	root /data;
 	index index.html;
	try_files $uri https://$uri/ /index.html;
}

...something...

웹 소스는 아래와 같은 경로에 존재합니다.
/app/web/data/index.html

Nginx와 React의 설정대로면 / 경로로 접근시 data 폴더 아래의 index.html을 호출합니다.

목표

만약 사용자가 https://domain.com/tbridge로 접근하는 경우 B를 렌더링하려고 합니다.

우선 B의 .env를 수정합니다.

.env

PUBLIC_URL=/tbridge

> 빌드 결과물
<script defer="defer" src="/static/js/main.2ff2e0c6.js"></script><link href="/static/css/main.cac996e1.css" rel="stylesheet">

다음으로, 기존의 Nginx 설정에 아래와 같은 코드를 추가합니다.

...prev settings

location /tbridge {
	root /data;
	try_files $uri https://$uri/ /tbridge/index.html;
}

이후, 기존의 /app/web/data/tbridge/ 와 같이 tbridge 폴더를 생성하고 B의 웹 소스를 올립니다.

결과

https://domain.com/로 접근하면 A가 https://domain.com/tbridge 로 접근하면 B가 나옵니다.