Github에서 Webhook을 사용하여 자동 배포 설정

이 글은 처음 하루 전의 https://maximorlov.com/automated-deployments-from-github-with-webhook/에 발표되었다
플랫폼이나 서비스가 아닌 VPS에 응용 프로그램을 맡기면 자동 배치와 같은 멋진 기능을 놓칠 수 있습니다.
만약 당신의 서버에 Heroku와 같은 자동 배치가 있다면, 그것은 좋지 않습니까?💫
하지만 그들은 어떻게 일합니까?어떻게 응용 프로그램에 자동 배치를 설정합니까?
당신처럼 바쁜 개발자에게는 당신의 변화를 추진하고 몇 초 후에 그것들의 운행을 볼 수 있는 것은 커다란 생산력 향상이 될 것이다.
이 강좌에서는 응용 프로그램의 자동 배치를 설정하여 작업 절차를 가속화할 것입니다.💨
목표
운영 애플리케이션이 저장소의 마스터 지점과 동기화되는 워크플로우가 최종적으로 제공됩니다.다시 말하면 메인 지점의 최신 제출은 항상 실시간 응용 프로그램을 실행하는 코드와 같다.
이것은 현재 배치된 코드 버전을 볼 필요가 없기 때문에 시간을 절약할 수 있습니다.운영 지점을 항상 운영 지점이라고 할 수 있습니다.
개요
우리의 목표를 실현하기 위해서는 다음과 같은 것이 필요하다.

은 Github에 웹 훅을 추가합니다. 저희가 저장소

으로 전송할 때마다 포트를 호출합니다.

은 Github

의 요청을 받았을 때 재배치 스크립트를 실행하는 Webhook을 사용하여 노드를 만듭니다.

Github에서 최신 커밋을 받고 응용 프로그램을 다시 시작하는 재배치 스크립트 작성

요구 사항
계속하려면 다음이 필요합니다.

Secure VPS instance, SSH 액세스 권한, sudo

처럼 명령 실행 가능

Node.js application running in production 및 Github

에서 제어되는 버전

역방향 에이전트(Nginx/Apache) 및 구성 기초 지식

Prefer video? In this live recording on YouTube, I go over this tutorial and set up everything completely from scratch. If you like to learn by watching others, you should definitely check it out.

1단계 - Github에 저장소 웹훅 추가

기존 저장소에 웹 훅을 추가하려면 Github 저장소 페이지로 이동하여'설정'>'웹 훅스'로 이동합니다."웹 훅 추가"를 누르십시오.

다음 설정이 있는 웹 훅을 추가합니다.

유효 부하 URL - 서버나 서버의 공용 IP를 가리키는 사용자 정의 도메인, 그리고 /hooks/ 및 응용 프로그램 이름(예: https://yourdomain.com/hooks/nodejs-app)

컨텐츠 유형 - application/json 선택

기밀 - Github와 서버 간의 공유 기밀.그것 없이는 누구나 호출 노드를 통해 프로그램을 재배치할 수 있다.나는 RandomKeygen을 사용하여 이런 물건을 위해 안전 문자열을 생성하는 것을 좋아한다

SSL 인증 - HTTPS로 시작하는 유효 로드 URL을 작성한 경우에만 나타납니다.도메인에 유효한 SSL 인증서가 있는 경우 이 옵션을 사용하십시오.

이 웹 훅을 터치하는 이벤트가 무엇입니까?기본 옵션: "push 이벤트만."

활동 - 이 옵션의 선택을 취소합니다.잠시 후 서버

에 단점을 만들면 갈고리를 활성화합니다

2단계 - Webhook을 사용하여 끝점 만들기

Webhook은 HTTP 끝점을 쉽게 만들고 구성할 수 있는 경량급 서버로 스크립트나 명령을 실행할 수 있습니다.Google은 Github에서 들어오는 요청을 탐지하기 위해 Webhook을 사용할 것입니다. 요청이 있을 때 Google의 재배치 스크립트를 실행합니다.

Webhook 설치

Ubuntu에 Webhook을 설치하려면 다음을 실행하십시오.

sudo apt install webhook

Note: If you get an error that says "E: Unable to locate package webhook", you need to run sudo apt update first to update the package list.

Webhook 종료 지점 구성

하나의 JSON 파일을 통해 Webhook을 구성합니다.이 파일은 하나의 항목 그룹을 포함하고 각 항목은 하나의 단점을 대표한다.
기본 폴더(hooks.json)에서 ~ 파일을 만듭니다.

nano ~/hooks.json

다음을 추가합니다.

[
  {
    "id": "nodejs-app",
    "execute-command": "/home/maxim/redeploy-nodejs-app.sh",
    "command-working-directory": "/home/maxim/nodejs-app",
    "trigger-rule": {
      "and": [
        {
          "match": {
            "type": "payload-hash-sha1",
            "secret": "yourgithubsecret",
            "parameter": {
              "source": "header",
              "name": "X-Hub-Signature"
            }
          }
        },
        {
          "match": {
            "type": "value",
            "value": "refs/heads/main",
            "parameter": {
              "source": "payload",
              "name": "ref"
            }
          }
        }
      ]
    }
  }
]

각 설정의 역할을 분석하고 이해합니다.

id - 응용 프로그램의 이름입니다.끝점을 생성하는 데 사용됩니다.예를 들어, nodejs-app은 다음 끝점 /hooks/nodejs-app을 생성합니다.Github에서 올바른 노드

을 호출하려면 이전 단계의 유효 로드 URL과 일치해야 합니다.

execute command - 노드를 호출할 때 실행할 명령이나 스크립트입니다.다음

에서 작성할 재배치 스크립트를 가리켜야 합니다

명령 작업 디렉토리 - 호출할 때 스크립트가 사용할 작업 디렉토리입니다.응용 프로그램이 있는 폴더

으로 설정

트리거 규칙 - 스크립트를 실행하기 전에 평가할 규칙입니다.and 속성 지정 요청은 두 가지 기준을 충족해야 합니다.

에는 X-Hub-Signature표두가 있어야 하는데 그 중에서 SHA1 해시는 secret이다.이것이 바로 Github가 우리에게 비밀을 전달하는 방식이다. 우리가 요청이 합법적인지 검증할 수 있도록 하는 것이다.secret의 값은 이전 단계

의 "Secret"과 일치해야 합니다

의 주체 중에는 ref 속성이 있어야 한다. 이 속성은 refs/heads/main과 같기 때문에 우리는 main 지점으로 보낼 때만 재배치한다.브랜치의 이름이 다른 경우 이 값

을 변경하십시오.
관심이 있으시면 hook definition page을 보셔서 모든 설정 옵션의 전체 목록을 보십시오.CTRL + O 및 enter을 사용하여 파일을 저장합니다.그리고 CTRL + X을 사용하여 나노 편집기를 종료합니다.

Webhook 시작 및 전송 요청 전달

Webhook을 시작하려면 다음 명령을 실행합니다.

webhook -hooks ~/hooks.json &

기본적으로 웹 훅은 포트 9000에 전송된 요청을 탐지하는 웹 서버를 시작합니다.HTTP 요청을 Webhook으로 전송하기 위해 Nginx와 같은 역방향 프록시를 설정해야 합니다.
또는 Github webhook의 부하 URL을 변경할 수 있습니다. 포트를 도메인 뒤에 포함할 수 있습니다. 예를 들어 https://yourdomain.com:9000/hooks/nodejs-app입니다.포트 9000이 방화벽에 의해 차단되지 않았는지 확인하십시오.
그러나 HTTP(80)/HTTPS(443) 포트를 통해 모든 기능을 보다 안전하게 수행하고 대중이 사용할 수 있도록 모든 다른 포트를 닫는 역방향 프록시 방법을 사용하는 것이 좋습니다.
다음은 Nginx의 구성 예시입니다. https://yourdomain.com/hooks/...의 모든 요청을 Webhook으로 리디렉션합니다.

server {
  listen      443 ssl http2;
  listen      [::]:443 ssl http2;
  server_name yourdomain.com;

  # SSL config
  # ...

  # Webhook reverse proxy
  location /hooks/ {
    proxy_pass http://127.0.0.1:9000/hooks/;
  }
}

Nginx를 다시 로드하면 구성 변경 사항이 적용됩니다.

sudo nginx -s reload

3단계 - 재배치 스크립트 작성

마지막으로, 우리는 프로그램을 재배치하기 위해 스크립트를 작성할 것이다.다음 단계를 순서대로 수행합니다.

Github

에서 최신 코드 가져오기

설치 NPM 종속성

(옵션) 구축 단계

애플리케이션 재시작

redeploy-nodejs-app.sh이라는 파일을 만들거나 execute-command의 hooks.json과 일치하는 다른 이름을 줍니다.다음을 추가합니다.

#!/bin/sh

# 1. Fetch the latest code from remote
git pull -f origin main

# 2. Install dependencies
npm install

# 3. (Optional) Build step that compiles code, bundles assets, etc.
# npm run build

# 4. Restart application
pm2 restart nodejs-app

설정에 맞게 스크립트를 재배치할 수 있습니다.

Note: If you're pulling from a private repository, you need to grant the server access to your Github account. Otherwise, the redeploy script will fail with a "Permission Denied" error.

파일을 저장하면 다음 명령을 사용하여 파일을 실행할 수 있습니다.

chmod +x redeploy-nodejs-app.sh

마지막 단계가 중요합니다. 그렇지 않으면 Webhook에서 권한 오류가 있는 스크립트를 실행할 수 없습니다.
이제 Github로 돌아가서 웹 훅을 활성화하고 코드를 수정하고remote로 전송합니다.만약 모든 것이 순조롭다면, 몇 초 후에 너는 현장의 변화를 볼 수 있을 것이다.🥳

빠른 해결 방안을 찾습니까?

차라리 더 적은 시간을 쓰겠다⏰ 서버를 설정하고 실제 코드를 작성하는 데 더 많은 시간을 들입니까?
Heroku와 같은 개발자 체험을 가지고 프로그램을 배치하려면 서버를 설치할 필요가 없습니까?
만약 당신이 응용 프로그램을 배치할 수 있다면, 명령 하나로 자동 배치를 설정할 수 있다면, 어떻게 해야 합니까?💫
몇 분 안에 (며칠이 아니야!),너는 업무 흐름을 배치하여 너의 생산력을 향상시키고 너로 하여금 더욱 빨리 물건을 발송하게 할 수 있다.🚀

👉🏼 어떻게 하는지 알려줘!