로컬 개발 환경에서 오픈 그래프 테스트하기

오픈 그래프 open graph

는 소셜 미디어를 통해 웹 페이지를 공유할 때 보다 다양한 정보를 제공하기 위해 페이스북에서 만든 일종의 프로토콜입니다.

티스토리에서도 간단히 확인할 수 있습니다.

웹 사이트 url을 입력한 다음 엔터를 치면

www.google.com  

Google

위와 같이 박스 안에 사이트의 이름과 설명 대표 이미지 등을 보여주죠. 구글에는 딱히 등록된 게 없나 보네요.

사용 방법은 간단합니다. HTML에는 HTML 문서의 메타 정보를 기입하기 위한 메타 태그가 존재하는데, 이 메타 태그에 필요한 정보를 담아주면 됩니다.

<meta property=”og:title” content=”제목” />

<meta property=”og:url” content=”공유할 URL” />

<meta property=”og:image” content=”이미지” />

<meta property=”og:description” content=”설명” />

 

https://developers.facebook.com/tools/debug/나 https://www.opengraph.xyz/ 같은 사이트에서도 테스트해 볼 수 있습니다.

테스트를 위해서는 외부에서 해당 페이지에 접근하여 메타 태그를 읽어야 하는데

외부 IP를 차단하고 있거나 로컬 서버를 통해 작업 중인 경우에는 확인할 길이 없게 됩니다.

 

NGROK

은 외부에서 로컬호스트에 접속할 수 있도록 해주는 툴입니다.

먼저 https://ngrok.com/ 에 회원가입 Sign up한 뒤, token을 발급받습니다.

ngrok을 설치하기 위해 먼저 윈도우용 패키지 매니저인 chocolatey를 설치합니다. 명령어 인터페이스에 익숙하지 않은 분들은 zip 파일을 다운받아 설치하셔도 됩니다.

chocolatey 설치 방법

1. power shell을 관리자 권한으로 실행
2. https://chocolatey.org/install 에서

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

이 부분을 복사하여 power shell에 붙여넣기한 다음 엔터를 눌러줍니다.

  3. 설치가 중단되면 y를 눌러줍니다.

이제 chocolatey를 이용해서 ngrok을 설치합시다.

power shell에 아래 명령어를 입력합니다.

마찬가지로 설치가 중단되면 y를 눌러줍니다.

$ choco install ngrok $ ngrok config add-authtoken {가입 시 발급받은 token}

설치가 완료되면 아래와 같이 ngrok을 실행할 수 있습니다.

$ ngrok http 80

 

 

Forwarding 부분에 주소 -> localhost:80와 같이 표시가 되는데

누군가 이 주소로 접속을 하면 localhost:80 로 포워딩하여 로컬에서 개발한 페이지를 보여줍니다.

localhost는 현재 컴퓨터, 즉 자기 자신을 나타내기 위한 호스트 네임입니다. 이에 대응되는 IP주소가 127.0.0.1입니다.

보통 로컬에서 WAS를 실행하여 테스트할 때 이 로컬 호스트를 통해 접속하죠. 당연하게도 네트워킹을 이용해 연결된 상태는 아니기 때문에 외부에서 접근할 수는 없습니다. 주소창에 localhost를 쳐봤자 자기 컴퓨터로만 접속이 되니까요.

이 로컬 호스트를 외부에서 접속할 수 있도록 ngrok이 주소를 만들어주고 있는 거죠.

주소 부분을 복사하여 위에서 봤던 테스트 사이트에 붙여 넣기 해보면 og가 어떻게 적용되는지 확인할 수 있습니다.

같은 서버에서 어떤 도메인으로 접속을 했는지에 따라 다른 서비스를 제공하는 경우가 있습니다. 이런 서비스를 로컬에서 테스트하기 위해서는 hosts 파일에 다음을 추가해 줍니다.

127.0.0.1 domain.com

domain.com으로 들어온 요청을 127.0.0.1로 연결해 주면서 해당 도메인 정보를 넘겨주는 거죠.

localhost가 아닌 도메인으로 접속하게 하려면 ngrok을 실행할 때 아래와 같이 host header를 설정해 주면 됩니다.

$ ngrok http --host-header=domain.com 80