[Gitistory] github에서 로컬 서버로 요청 연동하기 (feat. Github Webhook)

오늘은 블로그에 포스팅하도록 Google Chrome driver 코드를 짰기 때문에 이제 Gitistory 프로젝트의 두번째 목적인 github의 레포지토리의 PR이 올라오는 순간 해당 코드를 작동시키도록 Github와 코드를 연동하는 것을 진행했다.

 

원래는 EC2 인스턴스를 통해서 24시간 코드를 돌리려 했는데, 인스턴스의 메모리가 너무 작아서

flask의 가상 환경이 memory를 가득 잡아먹는 탓인지 CPU가 메모리 가상화하는데 점유를 다해서 문제가 발생했다.

 

이 문제는 docker로 구워서 가동시키면 해결 될 수도 있을 것 같은데 flask를 docker로 구워서 실행시키는 것보다 일단 로컬에서 코드를 다 짜고 해당 방법으로 조금 개선하도록 프로젝트를 진행하려 한다..

 

 

웹 상의 github webhook이 로컬 서버에 요청하는 방법

처음에 웹에서 수행되는 github webhook으로 어떻게 localhost로 켜져있는 서버에 연결을 할까? 에 대해 고민하면서 찾아보니 'ngrok' 라는 서비스가 있었다.

 

이 서비스는 특정 라우팅을 포트포워딩하여 웹 상으로 돌릴 수 있었다.

 

ngrok http 5001

 

그래서 나는 localhost:5001번 포트인 flask 서버를 원격에서 접속할 수 있도록 ngrok에서 포트포워딩 url을 받았다.

 

 

해당 포워딩으로 다른 컴퓨터로 접속하니 내 컴퓨터에서 원격으로 수행되어 포스팅이 잘 작성되는 것을 확인했다.

 

 

 

GIthub Webhook 사용하기

깃허브의 Gitistory의 PR Webhook 설정을 하고, 해당 Webhook이 어떻게 작동하는지 파악해보자

 

먼저, 설정을 위해 github에 접속해서 Webhook을 설정할 레포지토리 기본 설정으로 들어가준다.

 

그리고 Webhooks으로 진입

 

 

내 gitistory 프로그램은 로컬에서 돌릴거기 때문에 원격 서버 포털인 github에서 내 로컬로 webhook 요청을 할 수 있도록

Payload URL에 넣어줄 ngrok URL을 배정받은 것임.

 

배정받은 URL을 Payload URL에 넣고 content type은 json데이터로 설정한다.

코드에서 간단히 사용할 수 있다.

 

ngrok를 사용하면, 해당 url만 알아낸다면(어떻게든?) 내 원격 서버의 코드를 실행시킬 수 있는 셈이기 때문에, secret key도 추가해주어 보안을 신경쓰도록 했다.

 

 

webhook 유형은 pull requests 로 설정한다.

 

이렇게 설정을 완료하고 나면, 이제 PR이 업로드될때마다 관련된 모든 데이터는 POST 메소드의 REST API로 내 코드에 Request 요청을 날릴 것이다.

 

{
  "action": "opened",
  "pull_request": {
    "id": 123456789,
    "node_id": "PR_kwDOAAGJHkAARiBQ",
    "html_url": "https://github.com/username/repository/pull/1",
    "diff_url": "https://github.com/username/repository/pull/1.diff",
    "patch_url": "https://github.com/username/repository/pull/1.patch",
    "issue_url": "https://api.github.com/repos/username/repository/issues/1",
    "number": 1,
    "state": "open",
    "locked": false,
    "title": "Add new feature",
    "user": {
      "login": "username",
      "id": 1234567,
      "avatar_url": "https://avatars.githubusercontent.com/u/1234567?v=4",
      "html_url": "https://github.com/username"
    },
    "body": "This is a description of the pull request.",
    "created_at": "2024-08-01T12:34:56Z",
    "updated_at": "2024-08-01T12:34:56Z",
    "merged_at": null,
    "merge_commit_sha": null,
    "assignee": null,
    "assignees": [],
    "requested_reviewers": [],
    "requested_teams": [],
    "labels": []
  },
  "repository": {
    "id": 987654321,
    "node_id": "MDEwOlJlcG9zaXRvcnk5ODc2NTQzMjE=",
    "name": "repository",
    "full_name": "username/repository",
    "private": false,
    "owner": {
      "login": "username",
      "id": 1234567,
      "avatar_url": "https://avatars.githubusercontent.com/u/1234567?v=4",
      "html_url": "https://github.com/username"
    }
  },
  "sender": {
    "login": "username",
    "id": 1234567,
    "avatar_url": "https://avatars.githubusercontent.com/u/1234567?v=4",
    "html_url": "https://github.com/username"
  }
}

 

PR과 관련된 데이터는 다음과 같다.

 

PR 변경 코드를 블로그 코드블럭화 하기

 

아직 진행할 기능은 아니긴 했지만, 뇌가 이끄는대로 공부하다 보니 PR에 의해 변경된 code가 시각적으로 잘 드러났으면 하여, 블로그의 코드블럭 기능을 통해 주요 변경 코드를 제공하려고 했다.

 

따라서 블로그의 코드블럭은 어떻게 생성되는지 개발자도구를 건드려보면서 원리를 파악해보려 했다.

 

#1234
print("hello")
return null

 

그 결과, 블로그 작성글에 위처럼 코드 블럭을 추가하면 아래의 html 태그가 생성되는 것을 확인했고,

<pre id="code_1722582787506" class="python hljs" data-ke-language="python" 
data-ke-type="codeblock" contenteditable="false" data-mce-selected="1">
	<span class="hljs-comment">#1234</span>
	print(<span class="hljs-string">"hello"</span>)
	<span class="hljs-keyword">return</span> null
</pre>

 

반대로 html 태그를 복사해뒀다가 개발자 도구로 적절한 위치에 붙여넣으면 코드 블럭이 생성되는지 확인했다.

 

 

결과는 성공 !

 

해당 방법을 이용해서 이 태그의 원리와 규칙을 분석해서, 코드화 하여 내 코드를 html 블록화하는 게 내 목표이다.