React 앱을 IIS 웹 사이트 하위 디렉터리에 배포하기 (web.config)

1. npm run build 명령을 사용하여 React 앱을 빌드합니다. 이 명령은 컴파일된 에셋과 파일이 들어 있는 build 폴더를 만듭니다.

2. IIS 관리자를 열고 사용하려는 웹 사이트 하위에 새 가상 디렉터리를 만듭니다.

3. 가상 디렉터리 속성에서 물리적 경로를 단계 1에서 만든 build 폴더로 설정합니다.

4. 가상 디렉터리 속성에서 애플리케이션 풀을 상위 웹 사이트에서 사용하는 것과 동일한 것으로 설정합니다.

5. 가상 디렉터리 속성에서 가상 경로를 원하는 하위 디렉터리 이름(예: /myapp)으로 설정합니다.

6. build 폴더에 위치한 web.config 파일을 열고 <system.webServer> 요소 내에 다음 코드를 추가합니다.

<rewrite>
  <rules>
    <rule name="React Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/myapp/index.html" />
    </rule>
  </rules>
</rewrite>

이 코드는 하위 디렉터리로 들어오는 모든 요청을 build 폴더 내의 index.html 파일로 다시 작성합니다.

7. web.config 파일을 저장하고 IIS를 다시 시작합니다.

이제 React 앱이 지정한 하위 디렉터리에서 액세스 가능하며 모든 라우트가 예상대로 작동해야 합니다.


날짜:

카테고리:

태그: