본문으로 건너뛰기

GitHub Action을 활용한 GitHub Page 배포

· 약 5분

GitHub Action에 대한 간단한 소개와 이를 활용한 GitHub Page 배포 방법를 얘기해보려 한다.

GitHub Action이란?​

GitHub 이벤트(push, issue, release 등)를 트리거하여 개발 워크플로를 구성할 수 있는 GitHub 서비스이다. 기존에는 Travis CI, Circle CI 등이 대표적인 서드파티 서비스라고 할 수 있으며, 이를 연동하여 정적 분석, 테스트, 빌드하는 것이 보통 이였다. 하지만 이제는 GitHub에서 직접 지원하기 시작하였다.

목적​

위에서 언급한 바와 같이 GitHub Action을 이용해서 배포 자동화(=지속적인 배포)를 해보려고 한다. push 한 번으로 GitHub Page에 게시물이 반영되는 것이 최종 목표이다.

준비​

  • GitHub Action를 사용하려면 해당 페이지에서 승인 과정을 거쳐야 한다. [click]

  • 블로그는 Hexo로 만들었다.

  • 게시글을 보관하기 위한 아카이빙용 레포지토리(Private Repository)와 실제 {GitHub ID}.github.io 에 반영될 GitHub Page용 레포지토리(Public Repository)가 있다.

    아카이빙용 레포지토리를 Private Repository로 지정한 이유?

    1. 민감한 정보가 설정에 포함되어있다.
    2. 아직 베타 수준인 GitHub Action은 Public Repository에 지원이 제한되어있다.

    ※ 2019년 1월 7일 기준으로, 일반 사용자도 무료로 private 레포지토리를 만들 수 있다. (관련 기사)

워크플로​

간단하게 시퀀스 다이어그램으로 표현하면 아래와 같다.

sequenceDiagram participant pr as Private Repository participant ga as GitHub Action participant pu as Public Repository pr-->>ga: ① trigger push event ga->>ga: ② execute GitHub Workflow opt Blog Deploy ga->>ga: npm build ga->>ga: hexo algolia ga->>ga: hexo clean ga->>ga: hexo generate ga->>ga: hexo deploy end ga->>pu: ③ push event

① workflow를 push 이벤트에 트리거 될 수 있도록 설정한다. 보다 많은 이벤트를 설정할 수 있으니 공식 문서를 참고하면 좋다.

workflow "Blog Deploy" {
    on = "push"
    resolves = "Hexo Deploy"
}

② resoleves 으로 action을 지정할 수 있다. 그리고 resoleves에 지정한 action 이전에 필요한 action은 각 action에서 needs를 활용하면 된다.

workflow "Blog Deploy" {
    on = "push"
    resolves = "Hexo Deploy"
}

// ...

action "Hexo Deploy" {
    needs = ["Hexo Generate"]
    uses = "heowc/action-hexo@master"
    args = "deploy"
    // ...
}
  • custom action을 활용하기 위해서 uses에 해당 action을 지정하면 된다.
  • hexo 관련 action이 없어서 간단하게 custom action을 만들어봤다. (https://github.com/heowc/action-hexo)

③ public repository에 deploy하는 방법은 기존과 동일하게 hexo-deployer-git를 사용하면 된다. 기존에는 직접 hexo deploy 했다면, 이제는 push 마다 GitHub Action이 동작하여 이를 자동화해줄 것 이다.

deploy:
  type: git
  repo: https://{ACCESS TOKEN}@github.com/heowc/heowc.github.io.git
  branch: master

최종 형태​

Build → Algolia → Hexo Clean → Hexo Generate → Hexo Deploy 순차 처리된다.

workflow "Blog Deploy" {
    on = "push"
    resolves = "Hexo Deploy"
}

action "Build" {
    uses = "actions/npm@master"
    args = "install"
}

action "Hexo Clean" {
    needs = ["Build"]
    uses = "heowc/action-hexo@master"
    args = "clean"
}

action "Hexo Generate" {
    needs = ["Hexo Clean"]
    uses = "heowc/action-hexo@master"
    args = "generate"
}

action "Hexo Deploy" {
    needs = ["Hexo Generate"]
    uses = "heowc/action-hexo@master"
    args = "deploy"
    env = {
        NAME  = "heowc"
        EMAIL = "heowc1992@gmail.com"
    }
}

결과​

workflow에 대한 결과는 다음과 같이 확인해볼 수 있다.

alt screenshot