Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

GitHub Actions 소개

지난 GitHub Universe 2018에서 GitHub Actions라는 기능이 발표되었다. 기존에 이미 GitHub과 연동해서 서드파티 서비스를 이용하면서 개발 워크플로우를 자동화하고 있었지만, 대부분의 커스터마이징할 수 있는 워크플로우는 CI가 중심에 있었다. 예를 들어 코딩 관례 검사, 테스트, 빌드 등을 테스트하고 Docker나 팩캐지를 배포하거나 릴리스를 만드는 작업을 CI를 이용해서 했다면 이러한 워크플로우를 직접 다룰 수 있는 기능이 Actions라는 이름으로 GitHub이 직접 지원하기 시작한 것이다.

좋은 서비스들이 많이 있지만 각 서비스가 모든 기능을 지원하는 것은 아니므로 상당 부분 원하는 대로 사용하려면 CI에서 직접 스크립트를 작성해야 했는데 GitHub이 직접 이러한 워크플로우를 제어할 수 있도록 지원하기 시작한 것이다. 실제로 얼마나 편한지는 다양하게 사용해 봐야겠지만 데모에서는 코드를 푸시하면 npm에 패키지를 배포하거나 Docker Hub에 이미지를 배포하거나 AWS, GCP, netlify에 서비스를 배포하는 작업을 GitHub에서 바로 할 수 있다.

아직은 GitHub Actions는 Beta로만 공개된 상태이고 신청을 하고 허가가 나야 사용할 수 있다. 정확히 베타가 얼마나 공개되었는지 알 수 없지만, 현재 베타 기간에는 Private 저장소에만 제공하고 있으므로 간단히 GitHub Actions가 어떻게 동작하는지 살펴보려고 한다.

GitHub Actions are currently available as a limited public beta, which means you should avoid using it for high-value workflows and content during this beta period. Creating workflows that use GitHub Actions is limited to private repositories during the limited public beta.

GitHub Actions

퍼블릭 베타에 초대받고 나니 Private 저장소에서는 "Actions" 탭이 활성화되었다.

사용자 삽입 이미지

Workflow 생성을 누르면 .github/main.workflow를 만들기 위한 GUI 에디터가 나타난다. Actions의 워크플로우는 .workflow 확장자를 가지게 된다.

사용자 삽입 이미지

첫 이벤트는 기본으로는 on push인데 수정을 누르면 create, deployment, fork, gollum, issue_comment 등 GitHub의 다양한 이벤트를 기반으로 워크플로우를 시작할 수 있다.

사용자 삽입 이미지

첫 이벤트의 파란 점을 아래로 연결하면 워크플로우를 연결할 다른 액션을 선택할 수 있다.

사용자 삽입 이미지

현재 지원하는 액션에는 GitHub Action for npm, Filters for GitHub Actions, GitHub Action for Google Cloud, GitHub Action for AWS, Docker Registry, GitHub Action for Zeit, GitHub Action for Heroku 등의 액션이 있다. 아직 기본 제공하는 액션이 다양하지는 않다.

사용자 삽입 이미지

액션을 선택하면 시크릿 환경변수나 환경변수를 지정할 수 있다. GITHUB_TOKEN은 기본으로 지정되고 추가로 원하는 설정을 할 수 있고 대부분의 액션은 Docker 기반이라서 ENTRYPOINTCMD를 커스터마이징 할 수 있는 것으로 보이는데 어느 정도 활용할 수 있는지는 좀 더 살펴봐야 알 수 있을 것 같다. 환경변수를 몇 가지 추가해 보았는데 기본적으로 한 워크플로우의 모든 액션에 체크만 하면 추가로 지정하지 않고도 사용할 수 있도록 공유된다.

사용자 삽입 이미지

이렇게 만든 워크플로우는 실제로는 HCL로 작성된 파일로 저장된다. 에디터보다 코드로 작성하는게 편해지려면 약간 시간이 필요할 것 같다.

사용자 삽입 이미지

지금 테스트에서는 on push에 트리거를 걸었으므로 워크플로우 수정사항을 저장하거나 새로운 커밋을 올리면 워크플로우가 시작된다. 워크플로우는 CI처럼 진행 중과 성공/실패의 최종 결과가 표시되어서 예상했던 느낌대로 CI의 많은 부분을 대체할 수 있다고 생각한다.

사용자 삽입 이미지

워크플로우가 성공하면 아래처럼 각 단계의 성공상태가 나타나고 로그도 볼 수 있다.

사용자 삽입 이미지

앞에서 얘기한 대로 CI와 경쟁 구도가 되지 않을까 생각했지만 실행된 로그를 보면 Travis CI와 연동해서 워크플로우가 동작하는 것으로 보이고(예상) 로그를 보면 도커를 기반으로 돌아가는 걸을 알 수 있다. 도커 자체가 독립적으로 실행할 수 있는 환경이기는 하지만 여기서는 테스트로 제공된 것만 그냥 연결해 본 것이고 실제 원하는 워크플로우를 만들려고 할 때 디버그하거나 로그를 확인할 때 얼마나 편할지는 사용해봐야 알 것 같다.

사용자 삽입 이미지

워크플로우는 일렬로만 연결할 수 있는 것은 아니고 병렬로 늘려서 여러 작업을 동시에 수행할 수도 있다.

사용자 삽입 이미지

기존 개발 관련 워크플로우를 CI나 서드파티 서비스로 대부분 소화하고 있었기에 당장 Actions로 어떤 부분을 대체할지 아직 생각나는 부분은 없다. 이미 CI로 작성해 놓은 스크립트를 굳이 바꾸는 것도 귀찮기도 하고... 그래도 GitHub에서 기본으로 제공하는 기능의 편의성이 있으니 활용할 수 있는 부분을 좀 더 고민해 봐야겠다.

2018/11/27 04:37 2018/11/27 04:37

기술 뉴스 #114 : 18-11-16

웹개발 관련

  • HTTP/3 : HTTP-over-QUIC이 공식적으로 HTTP/3가 되었다.(영어)
  • A Netflix Web Performance Case Study : Netflix가 비로그인 사용자를 위한 랜딩페이지의 성능을 개선한 이야기이다. 기능이 많지 않아서 React가 필요 없을 것 같아 바닐라 JavaScript로 갈아타서 time-to-interaction 시간을 반 이상 줄이고 용량도 200kB 이상 줄였다. 다른 페이지에서는 여전히 React를 사용하고 있고 이 페이지에서 필요한 리소스를 미리 로딩해서 이후 페이지 성능도 향상했다.(영어)
  • PINTEREST 프로그래시브 웹 앱 성능 케이스 스터디 : A Pinterest Progressive Web App Performance Case Study의 번역글이다. Pinterest 웹사이트를 React, Redux, Webpack을 이용해서 PWA로 개선한 과정을 설명하고 있다. 개편 결과 광고수익이 증가하고 사용자도 더 오래 머물게 되었고 동작하기까지 23초가 걸리던 상황을 5.6초까지 줄였다. 이렇게 성능 개선을 하면서 고민한 부분이 잘 나와 있다.(한국어)
  • React에서 Redux 전에 배워야 할 8가지 : 8 things to learn in React before using Redux의 번연글로 상태관리에 Redux나 MobX를 사용하기 전에 알아야 할 부분을 설명하고 있다. 상태관리 라이브러리가 필요한 때도 있고 아닌 때도 있으므로 컴포넌트에서 어떻게 상태를 관리하는 것이 좋고 문제가 되는 상황을 코드로 보여주면서 라이브러리를 도입하기 전에 상태관리에서 어려운 부분을 이해하기를 권하고 있다.(한국어)
  • ANNOUNCING TEST262 REPORT : ECMA-262의 Test Suite를 매일 실행해서 엔진별 구현 정도를 보여주는 Test262 Report를 bocoup에서 공개했다.(영어)
  • web.dev : Lighthouse를 이용해서 웹사이트를 분석해서 성능, PWA, 접근성, SEO의 점수를 평가하고 개선 방법을 알려주는 사이트를 Google에서 Beta로 공개했다. 추가로 PageSpeed Insights도 Lighthouse 기반으로 바뀌었다.(영어)

그 밖의 프로그래밍 관련

  • Amazon Corretto : Amazon에서 무료로 멀티플랫폼을 지원하는 OpenJDK의 배포판을 공개했다. 이미 Amazon 내부 프로덕션 서비스에서 사용하고 있고 Amazon이 장기지원(LTS)을 한다고 한다.(영어)
  • Faster async functions and promises : V8 엔진에서 비동기에 사용하는 async/awaitPromise의 성능을 어떻게 개선하고 있는지 설명한 글이다. Turbofan이 포함된 Node.js 8부터 10까지 성능이 몇 배나 빨라졌는지 보여주고 JavaScript의 tasksmicrotasks의 개념 내에서 async/await가 동작하는 방식을 설명하고 있다. 뒷부분에서는 V8 엔진 내에서 어떻게 처리하는지 설명하고 있는데 Promise를 포함해서 async/await가 동작하는 구조를 이해할 수 있다.(영어)
  • The Illustrated TLS 1.3 Connection: Every Byte Explained : TLS 1.3의 연결과정을 단계별로 자세히 설명하는 웹 페이지이다. 단계별 코드와 바이트의 의미를 상세하게 설명한다.(영어)

볼만한 링크

  • A Seasonal Report on Developer Trends in the Cloud: Open Source Edition : DigitalOcean에서 오픈소스 20년을 기념하면서 오픈소스 트랜드의 설문 조사 결과를 공개했다. 이 자료에는 오픈소스에 어떻게/왜 참여하고 있고 어떤 언어와 플랫폼을 이용하는지, 어떤 부분 때문에 오픈소스 참여가 어려운지 등이 나와 있다.(영어)
  • 테크니컬 리더십: 시작하기 : Slack의 Technical Leadership: Getting Started의 번역 글이다. 본인이 리더쉽을 배우면서 중요하다고 생각하는 부분을 "방향 맞추기", "전문가 되기", "공유하기", "일관되게 실행하기", "효과적인 의사소통하기"로 나누어서 왜 중요한지를 설명하고 있다.(한국어)
  • How to write a killer Software Engineering résumé : 해외 이력서는 국내와 달라서 어렵기 마련인데 예시 이력서를 보여주면서 이력서를 어떻게 구성하는 게 좋고 단락별로 누구를 대상으로 하고 어떤 내용을 적으면 좋은지 보여주어서 유용하다.(영어)

IT 업계 뉴스

프로젝트

  • Eva Icons : 웹, iOS, Android에서 사용할 수 있는 오픈소스 아이콘 세트.
  • Rawact : Webpack을 만든 사람이 만든 아직 실험적인 플러그인으로 React 컴포넌트를 Native DOM으로 컴파일해서 React의 모든 기능이 필요 없는 곳에서 성능을 높일 수 있는 Babel 플러그인.
  • Day.js : Moment.js와 같은 API를 가지는 2KB의 날짜 라이브러리.
  • enquirer : Node.js로 인터렉티브한 터미널 프로그램을 만들 수 있는 라이브러리.
  • Squoosh : 이미지를 압축해주는 웹 애플리케이션.

버전 업데이트

2018/11/16 03:48 2018/11/16 03:48