PR에 doggos를 전달하기 위해 내 Github 작업 빌드

오랫동안 기다려온 GitHub Action 기능이 마침내 베타 버전을 벗어나 모든 리포지토리에 제공될 준비가 되었습니다. GitHub는 사람들이 더 훌륭하고 유용한 작업을 만들도록 장려하기 위해 3월 내내 조직화a Hackathon했습니다. 제출물을 탐색하는 동안 풀 리퀘스트에 고양이 gif를 게시하는 것을 발견했습니다a cool GitHub Action. 쿨하게 Ruairidh에게 인사
아이디어 👏👏👏.

개를 인도하는 조치가 있는 경우에만 개에게 정의를 내릴 것입니다.
우리 PR들에게 좋은 소년들. 그 순간 나는 내 다음 Github Action 프로젝트가 무엇인지 정확히 알았습니다. 일할 시간입니다.

GitHub Action 생성 요령

GitHub actions은 기본적으로 GitHub 워크플로우(Travis의 빌드를 생각해 보십시오)에 사용되는 사전 제작된(❤️ 포함) 작업 단위입니다. Github 작업은 Docker containers 또는 JS/TS scripts 으로 빌드할 수 있습니다. JS/TS로 GitHub 작업을 생성할 때의 이점은 GitHub toolkit에서 모듈을 쉽게 사용할 수 있다는 것입니다. 이러한 통합으로
지원, GitHub 서비스와 연결하는 것이 훨씬 쉽습니다(C'mon 🙄 Who wanna write curl command to make API call). TypeScript action template 로 가는게 당연합니다 .

그 결정이 내려지면 글쓰기로 넘어 갑시다 action-dogs .

기본 실행 파일

JS/TS GitHub 작업에서 워크로드는 기본 진입점에서 시작됩니다(웹 애플리케이션 등을 위한 노드 프로세스를 시작하기 위해 실행node src/index.js을 생각해 보십시오). 액션 독의 경우 이것이 메인 프로그램의 기본 설정입니다.

import * as core from "@actions/core";
import * as github from "@actions/github";
import { generate } from "./doggo/generator";

(async function run(): Promise<void> {
  try {
    const ctx = github.context;
    if (!ctx.payload.pull_request) {
      throw new Error("Not in the context of a PR!");
    }

    const ghCli = new github.GitHub(core.getInput("github-token"));
    const doggo = generate();
    ghCli.issues.createComment({
      ...ctx.repo,
      issue_number: ctx.payload.pull_request.number,
      body: `![Doggo](${doggo})`
    });
  } catch (e) {
    core.setFailed(e.message);
  }
})();

GitHub 워크플로를 트리거할 수 있는 이벤트 중에 @actions/github 모듈을 통해 액세스할 수 있는 컨텍스트 개체가 제공됩니다. 이를 사용하여 내 페이로드가 pull_request에서 오는지 여부를 확인하고 그렇지 않으면 거부할 수 있습니다. 다음으로, doggo gif 콘텐츠로 해당 풀 요청에 댓글을 게시해야 합니다. 내 doggo 생성기(다음 섹션에서 설명할 것임)가 제대로 작동하는 경우 doggo gif의 URL을 검색하여
끌어오기 요청에 대한 의견은 매우 간단합니다. 컨텍스트 개체와 PR 번호에서 저장소 정보를 전달하기만 하면 되기 때문입니다. 또한 이러한 작업 중에 오류가 발생하는 경우 core.setFailed(e.message)를 호출하면 오류 메시지와 함께 빌드가 실패한 것으로 표시됩니다.

도고 제너레이터

공개 API 중 하나를 사용하여 임의의 doggo gif를 얻으려는 의도로 많은 연구를 한 후 공개(예: dog.ceo ) 및 gif(예: GIPHY )를 제공하는 API를 찾을 수 없었습니다. action-dogs에서 사용하기 위해 내 GIPHY API 키를 안전하게 저장할 수 있는 방법이 없기 때문에 좋은 방법인 정적 JSON 배열로 되돌아갔습니다.

프로세스에서 API 키를 생성하지 않고 (❤️ GIPHY ❤️에서) doggo awesomeness로 가득 찬 어레이를 얻은 방법을 알고 싶습니까? 나는 실제로 GIPHY 사이트에 가서 doggoes를 검색하고 내 콘솔을 꺼내기 전에 많은 양의 "giffy-boys"가 렌더링될 때까지 아래로 스크롤했습니다.



그리고 이 몇 줄의 JS로

const dogsData = [];
document
  .querySelectorAll("a._2SwDiFPqIlZmUDkxHNOeqU")
  .forEach(e => dogsData.push(e.href));
var dataStr =
  "data:text/json;charset=utf-8," +
  encodeURIComponent(JSON.stringify(dogsData));
var dlAnchorElem = document.createElement("a");
dlAnchorElem.setAttribute("href", dataStr);
dlAnchorElem.setAttribute("download", "dogs.json");
dlAnchorElem.click();

기본적으로 검색 결과 페이지의 모든 "링크 복사"요소에서 값을 가져와href JSON 배열로 스트리밍하고 "다운로드"할 수 있도록 파일을 채웁니다. "생성"은 단순히 배열에서 임의의 URL을 선택하는 것입니다. .

import dogs from "./dogs.json";

export function generate(): string {
  return dogs[Math.floor(Math.random() * dogs.length)];
}

테스트

나는 jest를 사용하여 내 doggo 생성기에 대한 단위 테스트를 작성했습니다(하지만 실제로는 주로 재미있는 설명을 위한 수단으로 사용).

import { generate } from "../../src/doggo/generator";

describe("doggo generator", () => {
  test("to return a good boy", () => {
    Math.random = jest.fn().mockReturnValue(0);
    const good = "https://media3.giphy.com/media/mCRJDo24UvJMA/giphy.gif";
    const boy = generate();
    expect(boy).toBe(good);
  });
});

그러나 실제 테스트는 action-dogs 자체를 사용하는 워크플로입니다(예, 자체 저장소에서 GitHub 작업을 사용할 수 있습니다 🤯).

name: "doggo"

on: pull_request

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: stanleynguyen/action-dogs@master
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}

이제 a sample PR과 함께 작동하는 action-dogs를 볼 수 있습니다. 만세🙌🙌🙌!! 이제 안전하게 할 수 있습니다publish it on GitHub Marketplace .

아웃트로

재미와 학습을 위해 action-dogs를 만드는 제 이야기입니다. GitHub에서 바로 소스 코드를 찾을 수 있습니다. (글쎄요, 다른 곳은 🤷‍♂️) 및 action-dogs는 Marketplace에서 찾을 수 있습니다.