[위드마켓 개발기] 도로명 주소 검색기능 php 배포하기

👉 본격적으로 글을 쓰기 이전에

최근에 위드마켓의 지도 기능을 담당하는 팀원에게 요청이 하나 들어왔습니다.

🤔 지도 기능을 사용해야하는데, php를 서버에 올려줬으면 좋겠어...

어차피 개발 단계에 있기 때문에 php 파일을 t2.micro ec2에 올려보기로 결정했습니다. 나중에 트래픽이 엄청 늘어날 것 같으면 그 때 확장하면 되니까요 ^^!

🔥 우선 EC2 설정부터 진행하겠습니다.

저는 미리 Amazon Linux 가상머신을 만들어둔 상태에서 진행했습니다. 참고하세요

🔨 일단 업데이트를 진행합니다.

$ sudo yum update

🔨 Apache를 설치하고 실행시키겠습니다

$ sudo yum install httpd -y
$ sudo systemctl start httpd

설치와 실행이 끝났다면 해당 ec2의 public ip를 이용하여 접속하신다면 다음과 같은 페이지를 마주하실겁니다.

🔨 다음으로, php 최신 버전을 확인해서 설치하겠습니다.

$ sudo amazon-linux-extras |grep php

저는 이 중에서 php7.4를 설치하도록 하겠습니다.

$ sudo amazon-linux-extras install php7.4

그리고 php7.4를 활성화시키겠습니다.

$ sudo amazon-linux-extras enable php7.4

🔨 다음으로, php 모듈을 설치하겠습니다

$ sudo yum install  php-cli php-common php-gd php-mbstring  php-mysqlnd php-pdo php-fpm php-xml php-opcache php-zip php-bcmath

🔨 마지막으로, enable 설정을 하여 Apache 웹 서버가 시스템이 부팅될 때마다 자동으로 실행되도록 설정합니다.

$ sudo systemctl enable httpd

여기까지가 EC2의 환경 설정입니다. 다음으로는 php 파일을 작성하여 배포하겠습니다.

🔥 php 파일을 작성하겠습니다.

우선, /var/www/html로 이동해서 파일을 작성하도록 하겠습니다.

$ cd /var/www/html

그 다음에 search.php 라는 파일을 만들어서 아래와 같이 작성해주겠습니다.

🔨 파일 생성

$ sudo vim search.php

🔨 파일 작성

<?php
header("Content-Type: text/html; charset=UTF-8");
?>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    new daum.Postcode({
        oncomplete: function(data) {
            if(data.userSelectedType=="R"){
                // userSelectedType : 검색 결과에서 사용자가 선택한 주소의 타입

                // return type : R - roadAddress, J : jibunAddress

                window.TestApp.setAddress(data.zonecode, data.roadAddress, data.buildingName);
            }
            else{
                window.TestApp.setAddress(data.zonecode, data.jibunAddress, data.buildingName);
            }       
        }
    }).open();
</script>

작성을 마치셨다면, 정상 동작하는지 테스트를 해보겠습니다.

🔨 테스트

아래의 주소로 접속해봅시다

[IPAddress]/search.php

그러면 아래와 같이 뜨면 정상입니다.

🌲 마치며

다음 협업프로젝트 포스트는 아마 Config Server 에 관한 내용이 될것같습니다.

다음 포스트에서 뵙겠습니다. 감사합니다!