react 공부 IIS 환경에서 REACT 돌릴때 세팅해야하는것

less than 1 minute read

IIS 환경에서 REACT를 돌리기 위해 세팅한 정보

REACT를 처음 접하면서 자주 이용하는 IIS 에 PUBLIC 폴더를 모두 올리고 돌려 봤는데 동작되지 않는다.

iis 환경에서 react 를 정상적으로 구동하기 위해서는 아래와 같이 모듈 설치와 세팅이 필요하다.

모듈 설치를 위해 WEB PLATFORM INSTALLER 을 설치한다.

URL 재작성

WEB PLATFORM INSTALLER 검색박스에 키워드로 URL 을 입력하면 URL재작성 모듈을 설치할수 있다.

설치후에 WEB.CONFIG 파일을 아래와 같이 수정하면 된다.

<?xml version="1.0" encoding="UTF-8"?>
<configuration> 
    <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" /> 
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> 
                    </conditions> 
                    <action type="Rewrite" url="/" /> 
				</rule> 
			</rules> 
        </rewrite>
    </system.webServer> 
</configuration>

IIS CORS Module

(failed)net::ERR_FAILED

HTTP통신을 하기 위해 fetch 를 했을때 오류가 난다면 IIS CORS 를 설치해보자.

WEB PLATFORM INSTALLER 검색박스에 키워드로 CORS 을 입력하면 CORS 모듈을 설치할수 있다.

iis 웹플랫폼 설치관리자 다음제품을 설치하지 못했습니다.

간혹 WEB PLATFORM 을 통해 설치가 되지 않을때가 있는데 아래 URL을 통해서 64비트를 설치해보기 바란다.

필자도 64비트를 통해 설치성공하였다.

https://www.iis.net/downloads/microsoft/iis-cors-module

설치후에 WEB.CONFIG 파일을 아래와 같이 수정하면 된다.

<?xml version="1.0" encoding="UTF-8"?>
<configuration> 
    <system.webServer> 
        <...>
		<cors enabled="true">
            <add origin="*" />
        </cors>
    </system.webServer> 
</configuration>

끝.

Leave a comment