React-Node 프로젝트 IIS에 배포하기!

 

기존에 php로 되어있던 웹 프로그램을 React-node로 만들어서 Migration하는 프로젝트를 진행중이다.

기본적인 기능을 대부분 마치고서 QA window Server에 IIS에 올려서 배포하는 방법을 정리해보고자 한다.

 

우선 윈도우 서버에서 IIS 서버 매니저를 통하여 Add Web Site를 한다. 

이 사이트는 내가 추가할 사이트인데 실제로 루트 경로를 잡아주어야 하기 때문에 미리 Root로 잡을 폴더 위치에 루트 폴더를 만들어놓아야 한다.  (예. C:\IIS\wwwroot)

그리고 사이트가 사용할 Application pool이 새로 생성이 되는데 ASP가 아니기 때문에 다른 설정이 필요하다.

 

그리고 node를 사용하기 위해서 서버에 설치해야할 파일 내용들이 몇 가지 있다.

아래에 정리해 놨는데, 모든 파일을 설치해야 정상적으로 작동된다.

 

---

 

1. iisnode - full 설치한다. (나의 경우 0.2.26 version)

- IIS 서버와 Node.js 애플리케이션을 통합하기 위한 모듈. Node.js 어플리케이션을 호스팅한다. 윈도우서버에서 node.js를 쉽게 배포하고 관리할 수 있게 해준다. 또한 IIS 기능을 Node.js에서 활용할 수 있다. (로드 밸런싱, SSL, URL재작성, 인증 및 권한 관리). 그리고 IIS의 로그 관리 기능을 사용할 수 있게 지원하며 한 서버에서 여서 node.js 어플리케이션을 호스팅 할 수 있게 해준다.

- 설치 링크: https://github.com/tjanczuk/iisnode/releases/tag/v0.2.21

Release v0.2.21 · tjanczuk/iisnode

- iisnode-full-v0.2.21-x64.msi 설치

 

2. node.js 설치

- 설치 링크: https://nodejs.org/en/download

Node.js — Download Node.js®

- LTS 20.13.0 다운로드한다.

- node를 실행하기 위해 기본 설치!

 

3. URL Rewrite 설치

- 설치 링크: https://www.iis.net/downloads/microsoft/url-rewrite

URL Rewrite : The Official Microsoft IIS Site

- Korean: x64 installer 설치 (2.1v)

- 요청된 URL을 다른 URL로 변환하는 기능을 한다. 어떠한 규칙을 적용하여 보안적으로나 사용자 경험 향상등을 위해 URL을 변환하여 처리하도록 연결해줄 수 있다.

 

4. ARR 설치 - 별도 다운로드 ARR 3.0

- IIS서버에서 웹사이트를 클릭하고 URL Rewrite > Add Rules > Reverse Proxy 선택 > OK

- 해당 기능이 없다고 나오고 다운로드 받을 수 있는 사이트로 연결 -> ARR을 다운로드 설치한다. (다른 설정은 하지않고 종료해도 됨)

- IIS에서 제공하는 강력한 확장기능, 여러 기능이 있는데 URL Rewrite모듈과 결합하여 들어오는 요청 URL을 재작성하여 리디렉션 할 수 있다.

 

 

 

---

 

모든 파일들을 설치하고 나면 프로젝트 소스를 해당위치에 옮겨주어야 한다.

root 폴더로 정한 폴더에는 web.config파일과 React 프론트 소스가 빌드되고나면 생성되는 dist 폴더 안의 내용들을 넣어준다.

나의 경우 dist폴더 안의 내용들이 요렇게 되어있고 거기에 web.config 파일을 같이 넣어준다.

web.config파일이 중요한데, 이 안에 URL Rewrite 규칙등을 넣어주면 된다.

 

아래는 내가 사용하는 web.config 파일 내용!

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
                <clear />
				<!-- PHP URL 제거 규칙 -->
				<rule name="RemovePHP" stopProcessing="true">
				  <match url="^(.*)\.php$" />
				  <conditions>
					<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
				  </conditions>
				  <action type="Redirect" url="{R:1}" redirectType="Permanent" />
				</rule>
				<!-- Backend Proxy 규칙 -->
                <rule name="Backend Proxy" stopProcessing="true">
                    <match url="api/(.*)" ignoreCase="true" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
                    <action type="Rewrite" url="http://localhost:3000/{R:1}" logRewrittenUrl="true" />
                </rule>
				<!-- React Routes 규칙 -->
                <rule name="React Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="index.html" logRewrittenUrl="true" />
                </rule>
      </rules>
    </rewrite>
        <security>
            <authentication>
                <basicAuthentication enabled="false" />
            </authentication>
        </security>
        <defaultDocument>
            <files>
                <add value="index.html" />
            </files>
        </defaultDocument>
  </system.webServer>
</configuration>

 

첫 번째 규칙은 .php 라는 Url로 접근할 때 그러니까 기존에 다른 프로그램에서 사용하던 url을 그대로 사용할 수 있게 하기 위해서 .php로 접근하는 url에서 .php를 제거해주는 부분을 추가한 내용이다.

두 번째 규칙은 api/를 붙여서 오는 요청은 backend로 연결해주는 내용이다.

세 번째 규칙은 모든 접근을 index.html로 연결해주는 내용이다.

 

 

Backend는 마찬가지로 빌드된 dist 폴더 내부의 파일들을 backend 폴더에 넣어준다.

 

나의 경우에는 프로젝트 소스가 frontend, backend, shared 로 3가지로 나누어서 작업을 했는데 그래서 파일을 세가지 모두 옮긴 뒤에 package.json과 package-lock.json 파일도 같이 옮겨놓은 뒤에 세 폴더가 모두 위치한 root에서 cmd창을 열어 npm install 실행을 하면 모든 node_modules가 다운로드된다. 

 

백엔드 실행은 main.js가 있는 위치에서 cmd창을 열어 node main.js 로 실행해주면 backend는 가동이 된다.

 

 

 

frontend와 통신이 잘 되는지 확인해보고 img src 경로나 파일 받는 경로 등을 잘 맞추어 수정해주면 된다.