react.js 로 gatsby.js 를 활용하여 IIS 환경에 구동시키기

react.js 로 gatsby.js 를 활용하여 IIS 환경에 구동시키기

 

 

reactjs 를 구현함에 있어서 static site generator 를 만들어 보기 위해 gatsby.js 를 사용해 보기로 하였습니다.

https://www.gatsbyjs.org/

 

1. node.js 를 설치합니다. (https://nodejs.org/en/download/)

 

2. gatsby 의 cli 를 npm 명령어로 설치합니다.

npm install --global gatsby-cli

 

3. 이제 gatsby 를 생성해 봅니다. 이름은 react-gatsby 라고 기재하면 해당 폴더가 생성되면서 기본적인 reactjs 파일이 생성됩니다.

gatsby new react-gatsby

 

4. 설치 완료되면 이제 개발모드 환경에서 실행해 볼 수 있습니다. develop 을 사용하면 hot-reloading 개발환경이 지원되어 코드 수정하고 저장하면 곧바로 크롬 브라우저에서 실행된 화면이 제공됩니다. 크롬 브라우저에서 http://localhost:8000 를 호출하죠. (데모 : http://gatsbyjs.github.io/gatsby-starter-default/)

gatsby develop

 

5. 배포는 build 구문을 사용합니다. 이는 gatsby 가 최적화된 코드를 생성작업을 수행하며, site generating static html 코드를 만들어 줍니다. 그리고 route 당 자바스크립트 코드를 번들로 생성합니다.

gatsby build

 

6. 빌드된 사이트에서 테스트 하기 위해서 gatsby 가 로컬 html 서버를 가동합니다.

 

 

위에서 사용하는 것은 nodejs 가 가동되어 브라우저에서 볼 수 있는 구조인데요. 이제 해당 reactjs 코드를  윈도우의 iis 환경에서 build 된 코드를 작동시키고자 할땐 약간의 작업이 필요합니다. 

먼저 gatsby build 를 가동하면 하면 public 폴더 내부에  site generating static html 가 만들어지고 이를 서비스하면 됩니다.

 

 

이를 iis 에서 곧바로 사용할 수는 없고, Microsoft URL Rewrite Module 2.0 for IIS (x64) 먼저 설치해야 합니다. (다운로드 경로 : https://www.microsoft.com/en-us/download/details.aspx?id=47337)

 

설치 완료 한 다음,  아래와 같이 web.config 파일을 public 폴더 내부에 생성하여 해당 코드를 입력합니다.

 

IIS Config to React Router App (참고사이트)

https://gist.github.com/maxan/0d124ed677ebe41e1aeaf4a9e1e6aa45

 

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="" matchType="IsFile" negate="true" />
                    <add input="" matchType="IsDirectory" negate="true" />
                    <add input="" pattern="^/(api)" negate="true" />
                </conditions>
                <action type="Rewrite" url="/index.html" />
            </rule>
        </rules>
    </rewrite>
    </system.webServer>
</configuration>

 

위의 rewrite 구문에 대한 상세 설명은 https://www.xpressengine.com/tip/22871709 블로그를 참고하세요.

 

경로를 지정할 땐 public 폴더로 지정하셔야 합니다. 해당 public 폴더가 안보이면 gatsby build 를 실행하면 됩니다.

http://localhost 를 실행하면 잘 작동 되는것을 확인 할 수 있습니다.