노드를 설치하거나, 로컬 PC에 설치하는 번거로움을 피하고 서버 세팅 없이 딱 원하는 동작만 하도록 하기 위해서 Serverless 형태로 구현을 해보자고 맘을 먹고 시작해 본다. 또한 맨날 “안녕 세계!!!” 만 외칠 순 없어서 이미지 인식하는 것까지 붙여보기로 한다. 단, 준비 부터 실행 까지 전부 웹 브라우저 상에서 다 되도록 진행해 보겠다. 결과물을 미리 보면, 내가 만든 서버리스 함수에 url 값을 넘겨주면 이미지 분석 결과를 아래처럼 출력해 준다.
Visual Recognition 서비스 등록
일단 이미지 인식 엔진을 쓰기 위해서 Visual Recognition 서비스는 먼저 구독을 해서 API Key 를 생성해야 한다. 이 값이 있어야 서버리스 함수에서 IBM Watson 이 제공하는 Visual Recognition V3 엔진을 호출해서 사용할 수 있다.
- Visual Recognition 페이지 방문해서 “작성” 버튼을 눌러 하나 구독? 생성한다.
그럼 작성된 서비스에서 간단히 시작하는 방법을 다양한 언어를 기준으로 설명해주는 페이지가 나오면 작성이 완료된 것이다.
신임 정보 보기를 누르면 api 키와 URL 정보를 볼 수 있다. 이 값을 이용하여 앱 작성을 할 것 이기 때문에 잘 기억하자.(머리가 안좋으면 복사해둬야죠 ㅋㅋ)
오늘 작성할 서버리스 코드에서는 “API 키” 정보만으로 충분하다.
IBM Cloud Functions
서버 환경은 운영하기도 힘들고 컨테이너이니 운영체계니 머니 모르겠고 그냥 코드만 돌려주고 사용하는 만큼 돈 내는 서비스 환경 - 나중에는 이게 대세가 되어야 한다 그래야 많은 개발자들이 쉽게 진입을 할 수 있을 듯…
- IBM Cloud Functions 홈 - https://cloud.ibm.com/functions/
Apache OpenWhisk를 기반으로 한 FaaS(Functions-as-a-Service) 플랫폼 - 서버 없이 애플리케이션 코드를 실행하고 자동으로 스케일링하며 사용하지 않을 때는 비용을 지불하지 않습니다.
여기서 일단, 다들 시작하는 “안녕 세계!!” 를 먼저 만들어 놓도록 한다. 이게 기본이지~~
템플릿이 있다. 그걸 이용하자.
안녕 세계 라는 프로젝트가 떡하니 존재한다. 이걸 누르고 일단 Hello world 로 들어가 봅시다!!!
패키지 이름 원하면 수정하고, 언어는 그냥 Node.js 10 으로 두고, 배치 버튼을 누르기만 하면 헬로 월드가 완성된다.
아래 그림 화면에서 아무것도 수정하지 말고 “호출” 버튼을 누르면 실행된 결과까지 볼 수 있다.
클릭만으로 앱 서비스 하나 후딱 잘 만들었다. 이젠 이미지 인식 기능을 넣어보자.
매개변수 Parameters 추가
(사실 여기서 안하고 코드에 넣어둬도 되는데) 코드 공개되면 키가 들어 있으면 좀 그렇고 매개변수 쓰는 법도 연습도 할 겸 여기서 해보자.
아까 처음에 만들어 둔 API Key 를 여기에 넣도록 하자. 매개변수 이름으로는 vapi_key 라고 임의로 자신이 원하는 이름으로 만들면 되고, 값은 아까 만든 서비스의 api 값을 복사해서 가져온다. 주의할 점은 반드시 따옴표를 하고 값을 넣도록, 문자열이라고 인지를 시켜줘야 하나 보다 ^^;
여기에 적힌 값은 서버리스 함수가 수행될 때 같이 붙어 함수로 넘겨주도록 설계 되어 있는 것 같다.
이미지 인식 visual recognition 코드 추가
이제 서버리스 코드에 이미지 인식 코드를 추가해 보자. 아주 먼길을 돌아돌아 왔지만 코드는 몇줄 되지 않는다. 중간에 많은 시행착오가 있었지만 그냥 최종 코드만 깔끔하게 공개
아래 gist 코드를 긁어서 방금 만들어 둔 Hello world 에 덮어 쓰면 된다!
자 다시 코드 메뉴를 누르고, 코드 창에서 기존 코드를 지우고 가져온 코드로 대체하고 저장 버튼을 누르면 완성!!
코드에 보면 아까 매개변수에서 만든 vapi_key 가 사용되는 것을 확인할 수 있다. 그냥 “params.변수명” 형태로 사용하면 되네. (당연히 params 는 메인 함수 매개변수 명으로 쓰여 있는 문자열을 사용해야 함…)
function main(params) {
var visualRecognition = new VisualRecognitionV3({
version: '2018-03-19',
iam_apikey: params.vapi_key,
});
이미지는 url 이라는 변수로 받아드리도록 구현했다. 아래 코드에 보면,
var watsonvrparams = {
url: params.url,
};
파라메터에서 url 로 표현되는 문자열을 가져와서 IBM Watson 이미지 분석 엔진에 넣어 줄 것이다. 그럼 결과를 살펴볼까나?
서버리스 이미지 분석기 실행 결과
먼저 엔드포인트 메뉴로 들어가서 웹액션으로 사용을 체크 해 줘야 한다. Node.js 엔진을 가져와서 로컬 PC 앱을 만들고 테스트 하고 Deploy 하고 머 이런 과정을 통해 자신의 앱을 배포하고 curl 등으로 테스트 해 볼 수 있지만, 난 구형 엔지니어 답게 웹 브라우저에서 주소 치고 들어가서 바로 수행하고 결과를 보는게 익숙해서 찾아보니 웹 액션으로 가능하다고 되어 있네. 무튼 아래 그림의 체크 박스를 선택해 주면,
저장을 누르면, 내가 만든 서버리스 코드로 접속 가능한 주소를 던져 준다. 이 주소로 접근해서 테스트 하면 될 듯 하다.
생성된 주소 링크를 그냥 눌러보면, 아래와 같이 에러가 발생한다.
먼가 원하는 parsing 할 데이터를 주지 않았다는 느낌이 팍팍 들죠? 코드에서 넣어 두었던 이미지를 받아오는 파라메터 값을 주지 않아서 일 듯…즉 분석을 원하는 이미지 주소를 위에 붙인 주소 다음에 ? 를 추가하고 name=아무개&url=xxxxxxxx 이런식으로 주소창에 추가해 주면 될 것 같다. name=아무개 로 이름도 하나 던져줘보고 웹상에서 아무런 이미지나 받아서 주소 값을 던져 줘 보자. 두 변수 name 과 url 사이에는 & 로 연결해 주면 된다. 결과는 짠짠!!
탑시계가 0.897 의 확률로 그리고 시계라고 판단한 것은 좀 더 높네 0.911 로 시계일 것 같다는 분석 결과를 볼 수 있다. 주소창에서 url 값만 바꾸면 원하는 이미지를 분석할 수 있다.
- 주의!!
- 웹상에서 접근이 되는 이미지로 해야 된다. 해당 url에서 이미지 데이터를 가져와야 하므로 어떤 서비스는 외부 cdn을 막아 둔 곳도 있으니 주의하세요
- Image resolution maximum limit of 5400 pixels
너무 길었네. 누군가의 즐거운 레퍼런스가 되길~~