IIS에 기존 사이트가 있을 때 하위 경로를 이용하여 마이크로 서비스를 하고 싶은 경우가 많다. https://www.example.com/verification

React 앱은 기본적으로 루트 경로로 이용되도록 Home이 설정되어 있으므로 하위 서비스는 몇 가지 처리를 해줘야 한다.

1. BrowserRouter (react-router-dom) basename 설정

// App.js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';

export default function App() {

...

  return (
    <BrowserRouter basename="/verification">
      <div>
          ...
      </div>
    </BrowserRouter>
  );
}

App.js 파일 BrowserRouter의 기본 props인 basename을 하위 경로로 설정한다.

2. package.json “homepage” 값 추가

{
  "name": "app",
  "version": "0.1.0",
  
...

    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://www.example.com/verification"
}

여기에는 호스팅 될 전체 주소를 입력한다.

그리고 npm run build 명령어로 빌드 후 build 폴더 안의 모든 파일을 IIS 서버의 원하는 경로에 복사, 붙여넣기한다. 여기서 폴더 경로와 이름은 상관이 없다. 어차피 가상경로로 지정할 것이기 때문에.

3. IIS 가상디렉토리 추가

기존의 사이트를 우클릭하여 ‘가상 디렉토리 추가..’ 를 클릭한다. 별칭에는 하위 경로 이름을, 실제 경로에는 build 된 파일들이 있는 경로를 지정한다.