deck.gl 의 설정법 in Mac OSX

해당 포스트는 deck.gl을 소개하는 블로그 입니다. 

 

deck.gl는

UBER이 다룬 WebGL 만든 맵 및 데이터 시각화 프레임 워크에서 정보의 시각화에 적합합니다.
아름다운 deck.gl의 example을 참조하십시오.

https://deck.gl/#/examples/overview

 

<deck.gl example 예시>

한번 만들어보고 싶어 졌습니다. 

현재 가지고 있는 맥으로 한번 구성해보았습니다. 일단은 local환경에서 만들기로 해보았습니다. 

맥은 apache 가 깔려있기 때문에 간단한 명령어로 웹 서버를 사용할 수 있습니다. 

 

개발 환경

1. OSX version : mojave 10.14.6

2. OSX PHP version 

$php -v
//PHP 7.1.23 (cli) (built: Feb 22 2019 22:19:32) ( NTS )

3. OSX apache version

$httpd -v
//Server version: Apache/2.4.34 (Unix)

 

Apache (웹서버) 설정

Apache를 시작하려면

$sudo apachectl start

정지하고 싶다면,

$sudo apachectl stop

다시 시작하고 싶다면,

$sudo apachectl restart

입력 후 실행되었다는 메세지는 출력되지 않는다.

실행 후 확인은 웹 브라우저에 localhost를 입력하면 "It works"라는 메세지가 출력된다. 

 

이것은 브라우저가 기본(default) index 페이지를 열었기 때문입니다.

기본 index 페이지는 /Library/WebServer/Documents 폴더에 존재합니다.

즉, default로 해당 폴더가 DocumentRoot로 지정되어있습니다. 

해당 localhost 를 불러내는 파일은 index.html.en 인데 해당 파일은 /Library/WebServer/Documents/ 폴더에 존재합니다.

이 디렉토리는 기본으로 DocumentRoot로 지정되어 있습니다.

하지만 DocumentRoot을 바꾸는 건 앞으로 귀찮은 일들이 생기기 때문에 userdir을 사용하는 방법을 추천합니다. 

 

userdir 활성화를 위해 httpd-userdir.conf 파일 수정하기

userdir를 활성화한다는 것은 이름에서 알 수 있듯이 브라우저에서 localhost/~username/ 처럼 자신의 계정으로 된 URL을 사용할 수 있게 한다는 의미입니다.

userdir을 활성화하려면 /private/etc/apache2/extra/ 폴더에 있는 httpd-userdir.conf 파일을 수정해야 합니다.

우선 해당 폴더로 가서 아래와 같은 명령으로 파일을 편집합니다.

$ sudo vi httpd-userdir.conf

sudo는 서버 설정을 변경할 때 관리자 권한으로 파일을 편집한다는 의미입니다.  

vi 편집기의 명령어에 대한 설명은 간략하게 설명드리겠습니다.

( i 버튼- insert, control + c - insert 종료, :wq 저장후 종료, :q! 저장 안하고 종료)

편집기를 열면 밑을 참조해서 #을 지워서 밑(after)과 같이 설정해주세요. 

before 
#Include /private/etc/apache2/users/*.conf

after
Include /private/etc/apache2/users/*.conf

 

userdir 활성화를 위해 httpd.conf 파일 수정하기

mod_userdir 모듈 부분만 아래와 같이 주석을 제거해서 활성화해 줍니다.

LoadModule userdir_module libexec/apache2/mod_userdir.so

 

userdir 활성화를 위해 username.conf 파일 생성하기

홈 디렉토리에 일단 Sites 디렉토리를 만듭니다. 

$ cd ~
$ mkdir Sites

Sites 디렉토리에 대한 접근 방식을 지정하기 위해 /private/etc/apache2/users 폴더에 username.conf 파일을 만들어 줍니다.

내용은 다음과 같이 만듭니다. ####에는 자신의 맥 유저 이름을 넣어주세요.

<Directory "/Users/#########/Sites/">
  Options Indexes MultiViews
  AllowOverride None
  Require all granted
</Directory>

맥의 파인더나 터미널을 확용해 디렉토리가 만들어진 것을 확인합니다. 

이 폴더에 자신만의 index.html 파일을 만들면 첫 화면으로 나타나게 됩니다. index.html이 없으면 아파치에서 기본 제공되는 파일 index가 열립니다.

 

deck.gl 로컬에서 실행시키기

현재 예시로 제공하고 있는 프로젝트를 밑의 링크를 다운로드 받아서 설치해봅시다.

https://github.com/googlesamples/maps-deckgl-scatterplot-example

해당 프로젝트를 다운 받고 압축을 푼 파일을 웹서버의 유저파일을 사용할 수 있는 곳에 복사를 합니다. 

맥에서는 command + shift + G 키를 finder에서 입력하면 필요한 위치로 이동이 가능합니다. 

위에서 설정한 /Sites로 이동을 하고 deck파일의 압축을 풀고 파일을 적절한 이름을 설정합니다. 저는 deck로 설정했습니다. 

 

완료가 된다면 밑의 주소창을 넣어서 동작하는지 확인합니다.

http://localhost/~#######/deck/src/hello-world.html

아마 동작하다가 멈출 것입니다. 이유는 구글맵 api가 없기 때문입니다.  

 

구글 API 받아오기

https://cloud.google.com/maps-platform/?hl=ko

여기서 구글 맵 api를 만들 수 있습니다. API를 만드는 과정은 생략하겠습니다. 

만든 api는 deck/src/hello-world.html의 YOUR_API_KEY부분에 넣어줍니다. 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization"></script>

밑의 주소를 입력해주세요. ### 사용하고 있는 맥의 user name 입니다.

http://localhost/~#####/deck/src/hellow-world.html

여기까지 완료가 된다면 밑의 페이지가 뜨는 것을 확인할 수 있을 것입니다. 

여기까지 환경설정을 해보았네요... 많이 힘든 과정입니다. 

초기의 환경설정은 정말 힘든 과정입니다. 굳이 로컬에서 해야할 필요는 없지만 해당 라이브러리가 동작하는 것을 확인할 때는 많이들 사용하시겠죠. 만약 클라우드 기반이나 서버를 가지고 계신 분이라면 밑을 참조하셔서 deck.gl을 사용해보세요. 

저도 시작해보려고 합니다. 1년은 aws, azure, gcp들은 무료니 도전해보세요. 

https://cloud.google.com/blog/products/maps-platform/how-build-your-first-google-maps-platform-integration-deckgl