웹프로그래밍

Webhook 등록

GitHub에 Webhook을 등록하면 push하는 즉시 페이지에 반영됩니다. 선택 사항입니다.

등록하지 않아도 됩니다. 서버가 5분마다 저장소를 자동으로 가져갑니다. 그 5분을 기다리지 않고 즉시 반영하고 싶을 때만 설정하세요.

Webhook이 하는 일

어떤 일이 생겼을 때 정해둔 주소로 알림을 보내달라고 등록해 두는 기능입니다. 여러분이 git push를 하면 GitHub이 수업 서버에 알려주고, 서버가 그 알림을 받아 즉시 코드를 가져갑니다.

등록하지 않으면 서버가 5분마다 직접 확인하러 갑니다. 결과는 같고 속도만 다릅니다.

저장소 설정 열기

배포에 사용하는 본인 저장소로 이동한 뒤 상단 Settings 탭을 클릭합니다.

저장소의 Settings입니다. 오른쪽 위 프로필 사진을 눌러 들어가는 계정 Settings가 아닙니다. 주소가 github.com/아이디/저장소이름/settings 형태여야 합니다.

Settings 탭이 보이지 않으면 본인이 만든 저장소가 맞는지 확인하세요.

Webhooks 메뉴 선택

왼쪽 사이드바에서 Webhooks를 클릭한 뒤, 오른쪽 위 Add webhook 버튼을 누릅니다. 이때 GitHub 비밀번호를 다시 물어볼 수 있습니다. 보안 확인 절차이니 입력하고 진행하세요.

항목 입력

Payload URL
https://hook.smu.ai.kr/hook
Content type
application/json으로 변경합니다. 기본값이 application/x-www-form-urlencoded이므로 반드시 바꿔야 합니다.
Secret
수업 공지에 안내된 값을 붙여넣습니다. 앞뒤에 공백이 섞이지 않도록 주의하세요.
Which events
Just the push event를 선택합니다. 기본값입니다.
Active
체크된 상태로 둡니다.

입력을 마치면 아래 Add webhook 버튼을 누릅니다.

정상 등록 확인

등록하면 Webhooks 목록에 방금 만든 항목이 나타납니다. 주소 왼쪽에 초록색 체크 표시가 보이면 서버와 통신에 성공한 것입니다.

주황색 느낌표나 빨간색 X가 보이면 항목을 클릭하고 맨 아래 Recent Deliveries에서 응답 코드를 확인하세요.

200 또는 202
정상입니다. 이제 push하면 즉시 반영됩니다.
401
Secret이 일치하지 않습니다. 공지된 값을 다시 확인해 붙여넣으세요.
404
Payload URL이 잘못되었습니다. 끝의 /hook까지 정확히 입력하세요.

동작 확인

아무 파일이나 조금 고쳐 push해 보세요.

git add .
git commit -m "webhook test"
git push

본인 페이지를 Ctrl+Shift+R로 새로고침했을 때 바뀌어 있으면 성공입니다.

등록에 실패해도 괜찮습니다. 서버가 5분마다 가져가므로 과제 제출과 채점에는 영향이 없습니다.

배포가 안 될 때

페이지가 404
저장소 최상위에 index.html이 있는지 확인하세요. Index.html이나 index.htm은 인식되지 않습니다.
한글이 깨짐
<head> 안에 <meta charset="utf-8">를 넣으세요.
CSS나 이미지 누락
style.css처럼 저장소 기준 상대경로로 작성하세요. 내 컴퓨터 경로(C:\Users\...)는 동작하지 않습니다.
아무것도 안 뜸
저장소가 Public인지 확인하세요. Private이면 서버가 가져갈 수 없습니다.