Wilkyway

오늘은 IIS에서 PHP를 연동하는 방법에 대해 알아보겠습니다. Django, Flask와 마찬가지로 FastCGI방식을 이용해야 합니다. 

1. CGI 설치

"제어판->프로그램->프로그램 및 기능->Windows 기능 켜기/끄기" 에서 아래의 그림에 따른 경로를 찾아들어가 CGI를 체크해줍니다. 그러면 알아서 관련 프로그램이 설치가 됩니다.

2. php download

php.net 사이트에서 PHP를 다운로드합니다. 이때 FastCGI연결이 가능하도록 Non Thread Safe 버전을 다운받아야 합니다. 자신의 window 타입에 맞는 버전(x64 or x86) 을 선택하여 다운받아 줍니다.

그런다음 적당한 위치에 압축을 풀어줘야 하는데, 저는 "C:\php7"이라는 폴더를 만들어서 거기에 넣어두었습니다. 

그리고 해당 폴더를 환경변수에 추가해 줍니다.

3. index.php파일 생성

PHP사이트에서 사용할 index.php파일을 하나 만들겠습니다.

<?php
	phpinfo();
?>

4. IIS 사이트 생성

다음으로 IIS관리자를 실행시키고 사이트를 하나 추가 생성합니다. 이름은 php_ex라고 지어주고, 실제 경로에는 index.php가 있는 폴더까지의 경로를 넣어줍니다. 그리고 포트는 임의로 설정하면 되는데 88번 포트를 할당했습니다.

(우선 로컬에서 테스트 목적이므로, port 개방은 이번에는 다루지 않겠습니다. 외부에서 접속이 가능하도록 port를 허용(개방)할 경우에는 링크 포스트를 참조하시기 바랍니다.)

5. IIS 처리기 매핑

다음으로 php 처리기 매핑이 필요합니다. 방금 생성한 "php_ex"사이트를 클릭하고 "처리기 매핑"을 클릭하여 들어오면 우측으 "모듈매핑 추가" 메뉴가 보입니다. 해당 메뉴를 클릭하여 아래와 같이 설정한 후 확인을 눌러줍니다. 

6. 확인

아래와 같이 잘 나온다면, 제대로 작동한다고 볼 수 있습니다. 

7. 예외

위 기본 설치방식처럼만 하면 되어야 할텐데....그게 생각보다 쉽지가 않습니다. 가장 많이 접하는게 VCRUNTIME140.dll 관련 오류인데...

또는 

요런 메시지...'vcruntime140.dll' 14.0 is not compatible....하는 에러 메시지입니다. php7이 Visual Studio 2015(혹은 그 이후버전)에서 컴파일 되어 "Visual Studio 2015용 Visual C++ 재배포 가능 패키지" 를 설치하면 된다고 합니다. 여기링크 사이트에서 vc_redist.x64.exe 버전을 다운받을 수 있습니다.

그런데도 계속 저런 오류가 발생한다면, vcruntime140.dll을 직접 다운받아 설치하는 방법으로 해결할 수 있습니다. 여기링크 사이트에서 본인 os버전에 맞는 dll파일을 직접 다운받아서(또는 구글 검색) "C:\Windows\SysWOW64" 폴더에 저장(덮어쓰기) 합니다.

모두들 건승하길 빌겠습니다.

그럼 이만~~

React하면 아시다시피 frontend 라이브러리라고 하는데요.. React에서 Database의 내용을 가져오려면 어떻게 해야할까요? 오늘 실습은 이 질문에서 시작했습니다. PHP, JSP, Django 등 여러가지 backend 를 이용하여 Database를 접속할 수 있을텐데요. 저는 가장 간단할 것으로 예상되는 apache, php, mysql의 조합을 이용하여 php API를 구성하는 방법으로 구성해볼까 합니다.

그래서 필요한 것은 간단한 php API. 아래 코드를 test.php라는 파일로 작성하여 아파치 루트 다큐먼트 경로(예: C:\xampp\htdocs)에 저장합니다. (Database는 사전에 적당한 값으로 구성하셔야합니다.)

test.php

<?php
    $host = 'localhost';
    $user = 'root';
    $pw = '1234';
    $dbName = 'TestDB';
    
    $conn = mysqli_connect($host, $user, $pw, $dbName);
        
    $sql = "SELECT * FROM members";
    $result = mysqli_query($conn, $sql);    
    $row = mysqli_fetch_array($result);

    $list_array = array("name" =>$row['name'],
                        "email" =>$row['email'],
                        "phone" => $row['phone']);

    $result_array = json_encode($list_array);
    
    echo $result_array;
    
?>

이 파일은 localhost의 TestDB에 접속하여 members테이블의 모든 row를 추출해냅니다. 그리고

결과를 $row에 저장하고, 이를 다시

배열형태로 $list_array에 할당합니다.

다시한번 json형태로 인코딩하여 $result_array에 할당합니다.

echo 함수는 이 파일의 결과값으로 $result_array를 출력하게 합니다.

Backend에서의 동작은 구현했습니다. 80번 포트에서요. 이번에는 개발환경인 3000 포트에서 구동하는 React App을 구성할 차례인데요, 포트가 달라지면 쿠키라던지 데이터 전달에 제한을 받게되어 원래대로라면 여러가지 다른 방법을 시도해야 한다고 합니다. 그래서 proxy라는 걸 이용하는데요. package.json파일에 아래 한줄만 추가해주면 됩니다.

"proxy": "http://127.0.0.1:80",

위 코드를 package.json 내부 적당한 위치에 아래와 같이 넣어줍니다. 그러면 localhost의 접근 시도에 대해 proxy 주소로 자동으로 넘겨주고, 추후 구성할 React 앱에서도 라우팅 부분을 간소화할 수 있습니다.

App.js

아래와 같이 Hello라는 텍스트와 클릭 가능한 단순 버튼을 추가하겠습니다. 버튼은 클릭시 test.php를 실행하여 DB정보를 json형태로 가져오게 합니다. 보시는 바와 같이 원래대로라면 fetch('http://127.0.0.1:80/test.php')와 같이 작성해야하나 훨씬 간소하게 구성된 것을 볼 수 있습니다.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render(){
    return (
      <div className="App">
        Hello
        <input type="button" value="get data" onClick={
          function(){
            fetch('/test.php')
            .then(function(response){
              return response.json();
            })
            .then(function(json){console.log(json);})
          }.bind(this)
        }></input>
      </div>
    );
  }
}

export default App;

이제 xampp도 실행하고, npm start로 리액트도 실행해 봅시다. localhost/test.php를 입력하면 DB 데이터가 json형태로 잘 출력됨을 볼 수 있습니다.

- 끝 -