<div id="readability-page-1" class="page"><div><div><p><a href="https://junghan92.medium.com/?source=post_page-----7a181a0b4a8f-----------------------------------" rel="noopener follow"><img alt="Jung Han" src="https://miro.medium.com/fit/c/96/96/1*ZDiWlHECCXT15gXTRngnNg.jpeg" width="48" height="48"></a></p></div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/0*GCZwisL6GrotWkSl.png" width="700" height="236" role="presentation"></p></div></figure><p id="32c4"><a rel="noopener" href="/jung-han/toast-ui-grid에-github-actions가-함께한다면-388677297ccc">지난 글</a>에서는 github actions를 이용해 workflow를 만드는 법을 소개했다. 이번 시간은 <a href="https://github.com/marketplace?type=actions" rel="noopener ugc nofollow" target="_blank">Github Market place</a>에 등록되어있는 액션들처럼 쉽게 가져다가 쓸 수 있는 액션을 만들어보려고 한다.</p><p id="2492">마켓에 등록하는 액션을 만드는 것은 기존 workflow를 만드는 것과는 방법이 다르다. 하나의 범용적인 step이나 job을 만든다고 생각할 수 있다. 코드에 대한 설명보다는 어떤 것들을 사용할 수 있는지 위주로 소개하겠다.</p><h2 id="d77e">굳이 Action을 만들어야 하나?</h2><p id="22bf">만약 프로젝트가 하나라면 직접 workflow에 포함하는 것이 훨~씬 간단하긴 하다. 하지만 관리해야 하는 저장소가 50개 100개라면 이야기가 달라진다. TOAST UI에서 확인이 필요한 상품들의 브라우저 지원 범위는 모두 다르고 코드에 수정이 필요하다고 하면 끔찍한 일이 벌어질 수 있다. 최대한 APP에서만 수행할 수 있는 일을 제외하고 액션화를 시킨다면 한 저장소에서 관리가 가능해지고 사용이 훨씬 편리해지리라 생각해 액션을 만들었다.</p><h2 id="d20e">시작하기 전에, workflow + 환경 살펴보기</h2><p id="e799">시작하기 전에 개발 환경과 workflow를 빠르게 적어보겠다.</p><p id="5d6d">✔️ <code>Node.js</code>를 활용할 것이다. <code>도커</code>를 활용하는 방법 또한 존재하는 것 같으니 편한 것을 쓰자.<br>✔️ <a href="https://github.com/nhn/toast-ui.doc" rel="noopener ugc nofollow" target="_blank">TOAST UI doc</a>으로 생성된 API 페이지들이 에러없이 노출되고 있는지를 확인할 것이다.<br>✔️ 하루에 한 번 정도 Action을 활성화할 것이다.<br>✔️ <code>tuidoc.config.js</code> 라는 TOAST UI Doc config 파일을 보고 url을 생성해야 한다.</p><p id="be86">위 환경을 고려해서 workflow를 적어보면</p><p id="c188">1️⃣ <code>tuidoc.config.js</code>를 참고해 url을 생성해준다.<br>2️⃣ url을 기준으로 셀레니윰과 browserstack을 이용해 방문한다.<br>3️⃣ 각 page를 방문해 에러가 발생했는지 확인한다.<br>4️⃣ 결과를 확인하고 메일로 리포팅한다.</p><p id="1446">여기서 2, 3번째 스텝을 공통 액션화 할 것이다.</p><h2 id="1d9a">액션 만들기</h2><p id="34f4">처음 액션을 만들어본다면 이 <a href="https://help.github.com/en/actions/building-actions/creating-a-javascript-action" rel="noopener ugc nofollow" target="_blank">튜토리얼</a>을 따라 해보는 것을 추천한다. 이 튜토리얼 순서대로 작성해보겠다.</p><h2 id="4651">저장소 환경 만들기</h2><ol><li id="a5d0">튜토리얼에 나온 것처럼 <code>node12</code> 버전을 이용해 <code>npm init -y</code>로 초기화했다.</li><li id="891c">루트 경로에 메타데이터를 명시하는 파일인 <code>action.yml</code>을 만든다. 이 <a href="https://help.github.com/en/actions/building-actions/metadata-syntax-for-github-actions" rel="noopener ugc nofollow" target="_blank">링크</a>를 확인해보면 어떤 것들이 메타데이터로 들어가는지 알 수 있다.</li></ol><figure><figcaption>action.yml</figcaption></figure><ul><li id="6e5d"><code>name</code>: 액션 이름</li><li id="6717"><code>description</code>: 액션 설명</li><li id="f93a"><code>inputs</code>: 액션에서 사용될 변수 값<br>☑️ default 값과 반드시 있어야 하는 값인지, 설명을 작성할 수 있다.<br>☑️<code>inputs</code>은 반드시 <code>문자열</code>이여야 한다. 만약 배열로 넘기고 싶은 값이 있다면 문자열로 작성한 뒤 사용하는 곳에서 분리해 사용해야 한다.<br>☑️링크: <a href="https://help.github.com/en/actions/building-actions/metadata-syntax-for-github-actions#inputsinput_id" rel="noopener ugc nofollow" target="_blank">https://help.github.com/en/actions/building-actions/metadata-syntax-for-github-actions#inputsinput_id</a></li><li id="bbb7"><code>outputs</code>: 출력값을 나타낸다.</li><li id="b6e9"><code>runs</code>: 수행되는 환경을 명시한다.</li><li id="e050"><code>branding</code>: 이후에 마켓에 등록할 때 로고나, 색깔을 지정할 수 있다.<br>☑️색은 white, yellow, blue, green, orange, red, purple, gray-dark 만 가능하다.<br>☑️로고는 <a href="https://feathericons.com/%EC%97%90" rel="noopener ugc nofollow" target="_blank">https://feathericons.com/에</a> 등록된 아이콘만 가능하다.</li></ul><h2 id="8b80">입력, 출력, 실패</h2><p id="090f">잠깐 이 액션을 사용하는 곳의 workflow를 상상해보자. 우리는 이 workflow를 실행할 액션을 만드는 것이 목표다.</p><figure></figure><p id="5f75"><code>uses</code>로 액션을 명시하고 <code>with</code>로 액션에서 사용할 값을 넘겨줄 것이다. browserstack에서 사용할 <code>USERNAME</code>과 <code>ACCESS_KEY</code>도 저장소에서 넘겨줄 것이다. 이제 이렇게 넘겨준 값들은 어떻게 받아서 사용하는지 살펴보자.</p><p id="55b5">main에 작성한 <code>index.js</code>에 액션에서 수행할 코드를 작성한다. 액션을 생성하기 위해 깃헙에서는 여러 가지 <a href="https://github.com/actions/toolkit" rel="noopener ugc nofollow" target="_blank">toolkit</a>을 제공한다. input, output, logging 등 기본적인 기능을 사용하기 위한 <code><a href="https://github.com/actions/toolkit/tree/master/packages/core" rel="noopener ugc nofollow" target="_blank">@action/core</a></code>나 cli로 함수를 실행하기 위해 사용하는 <code><a href="https://github.com/actions/toolkit/tree/master/packages/exec" rel="noopener ugc nofollow" target="_blank">@actions/exec</a></code>, 현재 수행 중인 깃헙의 컨텍스트에 접근하는 <code><a href="https://github.com/actions/toolkit/tree/master/packages/github" rel="noopener ugc nofollow" target="_blank">@actions/github</a></code>등을 제공한다. 우리는 단순하게 <code>input</code>과 로깅이 필요하기 때문에 <code>@actions/core</code>만 사용했다.</p><pre><span id="e2c5">$ npm i @actions/core</span></pre><p id="5b41">그럼 workflow에서 <code>with</code>를 통해 넘겨줄 입력값을 받아 코드에서 사용해보자. core의 <code>getInput</code>을 통해 입력값을 받을 수 있다. 이름은 위 <code>action.yml</code>에서 작성한 이름 그대로 사용한다. 출력값은 <code>setOutput</code>을 통해 정할 수 있다.</p><figure></figure><p id="aec5"><code>env</code>로 넘겨준 값들은 <code>process.env</code>로 접근할 수 있다.</p><p id="bb8b">제일 중요한 것은 <code>setFailed</code>다. <code>setFailed</code>는 해당 액션이 실패했다는 것을 알려준다. 만약 setFailed를 작성하지 않는다면 해당 스텝은 실패했더라도 통과한 것으로 노출이 되니 반드시 작성해줘야 한다.</p><p id="2f0d">이게 전부다! 값들을 받아 작업을 수행하고 실패 조건을 명시해줬다. 그럼, 이 액션을 배포해보자.</p><h2 id="206d"><code>zeit/ncc</code>로 번들링 해서 배포하기</h2><ul><li id="00f5"><a href="https://github.com/zeit/ncc" rel="noopener ugc nofollow" target="_blank">https://github.com/zeit/ncc</a></li></ul><p id="7450"><code>ncc</code>는 노드로 작성된 파일을 의존까지 함께 하나의 파일로 컴파일 해주는 CLI다. 노드 모듈파일을 전부 올리는건 비효율적이기 떄문에 하나의 파일로 만들어서 사용했다.</p><pre><span id="0377">$ npm i -g @zeit/ncc<br>$ ncc build index.js</span></pre><p id="762e">ncc를 이용하여 컴파일을 하면 하나의 index.js 파일이 <code>dist</code> 경로에 생겼다. 기존에 <code>action.yml</code>에 작성했던 <code>env.main</code>를 <code>index.js</code> 대신 <code>dist/index.js</code>로 바꿔준다.</p><pre><span id="e987"># config<br>runs:<br>  using: 'node12'<br>  main: 'dist/index.js'</span></pre><p id="1c6a">그럼 변경된 내용을 저장소에 푸시하자. 이렇게 될 경우 모든 저장소에서 해당 액션을 사용할 수 있게 된다. 또한, git에 태그로 버전을 명시해준다면 workflow에서 액션을 사용할 때 버전별로 선택해 사용할 수 있다.</p><pre><span id="e1c3">$ git tag v1.0.0<br>$ git push origin v1.0.0</span></pre><h2 id="ce7d">사용하기</h2><p id="5bd3">workflow에서 생성한 저장소를 가리키면 사용이 가능하다. 만약 <code>jung-han</code> 계정에 <code>browserstack-actions</code>라는 저장소라면 아래처럼 사용할 수 있다. <code>@</code>뒤에 버전을 명시해 버전별로 선택해 사용할 수 있다.</p><figure></figure><h2 id="3035">marketplace에 등록하기</h2><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/0*dL-w3ulfE6mkWUGB.png" width="700" height="62" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/0*dL-w3ulfE6mkWUGB.png?q=20"></p></div></figure><p id="58e5">작업이 끝났다면 위 이미지가 저장소에서 보일 것이다.마켓에 등록할 때 필요한 작업이 있다. <a href="https://help.github.com/en/actions/building-actions/publishing-actions-in-github-marketplace" rel="noopener ugc nofollow" target="_blank">링크</a>에 들어가 확인해도 좋다.</p><ol><li id="8092">계정을 two-factor authentification 등록해야 한다. <a href="https://help.github.com/en/github/authenticating-to-github/configuring-two-factor-authentication" rel="noopener ugc nofollow" target="_blank">링크</a>를 참고해서 등록하자</li><li id="dba7">메타 정보에 필요한 값들을 전부 등록해야 한다. <code>name</code>, <code>description</code>, <code>icon</code>, <code>color</code>가 필요하다.</li><li id="95bc"><a href="http://readme.md/" rel="noopener ugc nofollow" target="_blank">README.md</a> 또한 작성해야 한다.</li></ol><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/0*R6csdMdhP5DaiBS_.png" width="700" height="504" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/0*R6csdMdhP5DaiBS_.png?q=20"></p></div></figure><p id="c936">4. 카테고리와 태그를 지정해주면 끝이다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/0*kxCSPscBdh5WnMel.png" width="700" height="314" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/0*kxCSPscBdh5WnMel.png?q=20"></p></div></figure><p id="7ea6">5. 완료가 되면 release에서 <code>marketplace</code> 딱지가 생긴것을 볼 수 있다.</p><figure><div><p><img alt="" src="https://miro.medium.com/max/1390/0*LkXdiYNktA2-2O-g.png" width="695" height="204" sizes="695px" role="presentation" data-old-src="https://miro.medium.com/max/60/0*LkXdiYNktA2-2O-g.png?q=20"></p></div></figure><p id="c9fb">6. 마켓에 들어가보면 성공적으로 등록된 것을 볼 수 있다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/0*6DIGlbEouqPL41g1.png" width="700" height="112" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/0*6DIGlbEouqPL41g1.png?q=20"></p></div></figure><h2 id="36d4">끝</h2><p id="5854">액션을 만들어서 IE8 부터 edge, safari 등등 여러 브라우저의 에러 체킹을 자동화했다. 읽어보면 알겠지만 사실 액션을 만들고 배포하는 것은 어렵지 않다. (더 효율적으로 작성하는 방법이 있을 수 있을 것이다) 글에서 잘못된 내용이 있다면 언제든지 댓글 바란다!🙆‍♂️</p><ul><li id="c2f5">저장소: <a href="https://github.com/nhn/toast-ui.detect-runtime-error-actions" rel="noopener ugc nofollow" target="_blank">https://github.com/nhn/toast-ui.detect-runtime-error-actions</a></li><li id="71b9">마켓: <a href="https://github.com/marketplace/actions/toast-ui-detect-runtime-error-actions" rel="noopener ugc nofollow" target="_blank">https://github.com/marketplace/actions/toast-ui-detect-runtime-error-actions</a></li></ul></div></div>

Stories by Jung Han on Medium

한정

지난 글에서는 github actions를 이용해 workflow를 만드는 법을 소개했다. 이번 시간은 Github Market place에 등록되어있는 액션들처럼 쉽게 가져다가 쓸 수 있는 액션을 만들어보려고 한다.
마켓에 등록하는 액션을 만드는 것은 기존 workflow를 만드는 것과는 방법이 다르다. 하나의 범용적인 step이나 job을 만든다고 생각할 수 있다. 코드에 대한 설명보다는 어떤 것들을 사용할 수 있는지 위주로 소개하겠다.
굳이 Action을 만들어야 하나?
만약 프로젝트가 하나라면 직접 workflow에 포함하는 것이 훨~씬 간단하긴 하다. 하지만 관리해야 하는 저장소가 50개 100개라면 이야기가 달라진다. TOAST UI에서 확인이 필요한 상품들의 브라우저 지원 범위는 모두 다르고 코드에 수정이 필요하다고 하면 끔찍한 일이 벌어질 수 있다. 최대한 APP에서만 수행할 수 있는 일을 제외하고 액션화를 시킨다면 한 저장소에서 관리가 가능해지고 사용이 훨씬 편리해지리라 생각해 액션을 만들었다.
시작하기 전에, workflow + 환경 살펴보기
시작하기 전에 개발 환경과 workflow를 빠르게 적어보겠다.
✔️ Node.js를 활용할 것이다. 도커를 활용하는 방법 또한 존재하는 것 같으니 편한 것을 쓰자.
✔️ TOAST UI doc으로 생성된 API 페이지들이 에러없이 노출되고 있는지를 확인할 것이다.
✔️ 하루에 한 번 정도 Action을 활성화할 것이다.
✔️ tuidoc.config.js 라는 TOAST UI Doc config 파일을 보고 url을 생성해야 한다.
위 환경을 고려해서 workflow를 적어보면
1️⃣ tuidoc.config.js를 참고해 url을 생성해준다.
2️⃣ url을 기준으로 셀레니윰과 browserstack을 이용해 방문한다.
3️⃣ 각 page를 방문해 에러가 발생했는지 확인한다.
4️⃣ 결과를 확인하고 메일로 리포팅한다.
여기서 2, 3번째 스텝을 공통 액션화 할 것이다.
액션 만들기
처음 액션을 만들어본다면 이 튜토리얼을 따라 해보는 것을 추천한다. 이 튜토리얼 순서대로 작성해보겠다.
저장소 환경 만들기
튜토리얼에 나온 것처럼 node12 버전을 이용해 npm init -y로 초기화했다.
루트 경로에 메타데이터를 명시하는 파일인 action.yml을 만든다. 이 링크를 확인해보면 어떤 것들이 메타데이터로 들어가는지 알 수 있다.
https://medium.com/media/d5ea14541c5c8bc9b787bf446854c2e4/href
name: 액션 이름
description: 액션 설명
inputs: 액션에서 사용될 변수 값
☑️ default 값과 반드시 있어야 하는 값인지, 설명을 작성할 수 있다.
☑️inputs은 반드시 문자열이여야 한다. 만약 배열로 넘기고 싶은 값이 있다면 문자열로 작성한 뒤 사용하는 곳에서 분리해 사용해야 한다.
☑️링크: https://help.github.com/en/actions/building-actions/metadata-syntax-for-github-actions#inputsinput_id
outputs: 출력값을 나타낸다.
runs: 수행되는 환경을 명시한다.
branding: 이후에 마켓에 등록할 때 로고나, 색깔을 지정할 수 있다.
☑️색은 white, yellow, blue, green, orange, red, purple, gray-dark 만 가능하다.
☑️로고는 https://feathericons.com/에 등록된 아이콘만 가능하다.
입력, 출력, 실패
잠깐 이 액션을 사용하는 곳의 workflow를 상상해보자. 우리는 이 workflow를 실행할 액션을 만드는 것이 목표다.
https://medium.com/media/6547a39664a1eb9d6564a03591598777/href
uses로 액션을 명시하고 with로 액션에서 사용할 값을 넘겨줄 것이다. browserstack에서 사용할 USERNAME과 ACCESS_KEY도 저장소에서 넘겨줄 것이다. 이제 이렇게 넘겨준 값들은 어떻게 받아서 사용하는지 살펴보자.
main에 작성한 index.js에 액션에서 수행할 코드를 작성한다. 액션을 생성하기 위해 깃헙에서는 여러 가지 toolkit을 제공한다. input, output, logging 등 기본적인 기능을 사용하기 위한 @action/core나 cli로 함수를 실행하기 위해 사용하는 @actions/exec, 현재 수행 중인 깃헙의 컨텍스트에 접근하는 @actions/github등을 제공한다. 우리는 단순하게 input과 로깅이 필요하기 때문에 @actions/core만 사용했다.
$ npm i @actions/core
그럼 workflow에서 with를 통해 넘겨줄 입력값을 받아 코드에서 사용해보자. core의 getInput을 통해 입력값을 받을 수 있다. 이름은 위 action.yml에서 작성한 이름 그대로 사용한다. 출력값은 setOutput을 통해 정할 수 있다.
https://medium.com/media/6499b8793ac76ad6cf78bc6f04381f08/href
env로 넘겨준 값들은 process.env로 접근할 수 있다.
제일 중요한 것은 setFailed다. setFailed는 해당 액션이 실패했다는 것을 알려준다. 만약 setFailed를 작성하지 않는다면 해당 스텝은 실패했더라도 통과한 것으로 노출이 되니 반드시 작성해줘야 한다.
이게 전부다! 값들을 받아 작업을 수행하고 실패 조건을 명시해줬다. 그럼, 이 액션을 배포해보자.
zeit/ncc로 번들링 해서 배포하기
https://github.com/zeit/ncc
ncc는 노드로 작성된 파일을 의존까지 함께 하나의 파일로 컴파일 해주는 CLI다. 노드 모듈파일을 전부 올리는건 비효율적이기 떄문에 하나의 파일로 만들어서 사용했다.
$ npm i -g @zeit/ncc
$ ncc build index.js
ncc를 이용하여 컴파일을 하면 하나의 index.js 파일이 dist 경로에 생겼다. 기존에 action.yml에 작성했던 env.main를 index.js 대신 dist/index.js로 바꿔준다.
# config
runs:
  using: 'node12'
  main: 'dist/index.js'
그럼 변경된 내용을 저장소에 푸시하자. 이렇게 될 경우 모든 저장소에서 해당 액션을 사용할 수 있게 된다. 또한, git에 태그로 버전을 명시해준다면 workflow에서 액션을 사용할 때 버전별로 선택해 사용할 수 있다.
$ git tag v1.0.0
$ git push origin v1.0.0
사용하기
workflow에서 생성한 저장소를 가리키면 사용이 가능하다. 만약 jung-han 계정에 browserstack-actions라는 저장소라면 아래처럼 사용할 수 있다. @뒤에 버전을 명시해 버전별로 선택해 사용할 수 있다.
https://medium.com/media/c262dd420703b352313e57de2218e2ae/href
marketplace에 등록하기
작업이 끝났다면 위 이미지가 저장소에서 보일 것이다.마켓에 등록할 때 필요한 작업이 있다. 링크에 들어가 확인해도 좋다.
계정을 two-factor authentification 등록해야 한다. 링크를 참고해서 등록하자
메타 정보에 필요한 값들을 전부 등록해야 한다. name, description, icon, color가 필요하다.
README.md 또한 작성해야 한다.
4. 카테고리와 태그를 지정해주면 끝이다.
5. 완료가 되면 release에서 marketplace 딱지가 생긴것을 볼 수 있다.
6. 마켓에 들어가보면 성공적으로 등록된 것을 볼 수 있다.
끝
액션을 만들어서 IE8 부터 edge, safari 등등 여러 브라우저의 에러 체킹을 자동화했다. 읽어보면 알겠지만 사실 액션을 만들고 배포하는 것은 어렵지 않다. (더 효율적으로 작성하는 방법이 있을 수 있을 것이다) 글에서 잘못된 내용이 있다면 언제든지 댓글 바란다!🙆‍♂️
저장소: https://github.com/nhn/toast-ui.detect-runtime-error-actions
마켓: https://github.com/marketplace/actions/toast-ui-detect-runtime-error-actions
추가로 알면 좋은 것들
needs, if
workflow에서 해당 job이 실행이 되어야 할지 말지 분기문으로 결정 할 수 있다. 또한 이전 작업이 반드시 성공적으로 끝나야만 진행이 되어야 하는 job 들도 있다.
그럴때 if나 needs를 활용하면 된다.
jobs.<job_id>.if: https://help.github.com/en/actions/reference/workflow-syntax-for-github-actions#jobsjob_idif
jobs.<job_id>.needs: https://help.github.com/en/actions/reference/workflow-syntax-for-github-actions#jobsjob_idneeds
artifact
artifact는 워크 플로우 실행 중에 생성된 파일을 의미한다. artifact를 이용하면 작업이 끝난 뒤에도 데이터를 유지 할 수 있다. 이를 이용하면 workflow동안 데이터를 전달할 수 있다. actions/upload-artifact 액션을 통해 artifact를 업로드 할 수 있고 actions/download-artifact로 다운받아 사용할 수 있다. 또한 테스트 결과 report를 저장하거나 결과를 업로드해야 하는 경우에 편하게 사용할 수 있다.
링크: https://help.github.com/en/actions/configuring-and-managing-workflows/persisting-workflow-data-using-artifacts
env에 값 세팅하기
url을 만드는 함수를 수행한 뒤 그 결과를 다음 workflow에 사용했어야 했다. 이 값을 그대로 사용할 수 있는 방법을 찾아봤지만 찾지 못했다. 그래서 결과로 만든 url.txt를 쉘로 읽은 뒤 env에 할당한 뒤 꺼내 썼다. 다른 방법이 궁금하다면 링크를 들어가 보면 좋을 것 같다. 이에 관한 이야기가 있다.
https://medium.com/media/b90e1f1ab9c2e04a64507490ba0b847f/href
🎬 Github Action을 마켓에 등록해보자 was originally published in Jung-han on Medium, where people are continuing the conversation by highlighting and responding to this story.