JavaScript 작업 만들기

소개

이 가이드에서는 패키지된 JavaScript 작업을 만들고 사용하는 데 필요한 기본 구성 요소에 대해 알아봅니다. 작업을 패키지하는 데 필요한 구성 요소에 가이드의 초점을 맞추기 위해 작업 코드의 기능은 최소화됩니다. 사용자 지정 이름을 제공하면 로그에 "Hello World" 또는 "Hello [인사할 사람]"이 출력됩니다.

이 가이드에서는 GitHub Actions 도구 키트 Node.js 모듈을 사용하여 개발 속도를 향상합니다. 자세한 내용은 actions/toolkit 리포지토리를 참조하세요.

이 프로젝트를 완료하면 사용자 고유의 JavaScript 작업을 빌드하고 워크플로에서 테스트하는 방법을 이해하게 됩니다.

JavaScript 작업이 모든 GitHub 호스트된 실행기(Ubuntu, Windows 및 macOS)와 호환되도록 하려면 작성하는 패키지된 JavaScript 코드는 순수 JavaScript이고 다른 이진 파일에 의존하지 않아야 합니다. JavaScript 작업은 실행기에서 직접 실행되며 실행기 이미지에 이미 있는 이진 파일을 사용합니다.

필수 조건

시작하기 전에 Node.js를 다운로드하고 퍼블릭 GitHub 리포지토리를 만들어야 합니다.

1. npm을 포함하는 Node.js 20.x를 다운로드하여 설치합니다.

   https://nodejs.org/en/download/

2. GitHub에 새 퍼블릭 리포지토리를 만들고 "hello-world-javascript-action"이라고 합니다. 자세한 내용은 새 리포지토리 만들기을(를) 참조하세요.

3. 컴퓨터에 리포지토리를 복제합니다. 자세한 내용은 리포지토리 복제을(를) 참조하세요.

4. 터미널에서 디렉터리를 새 리포지토리로 변경합니다.

   Shell

   cd hello-world-javascript-action
   

5. 터미널에서 npm으로 디렉터리를 초기화하여 package.json 파일을 생성합니다.

   Shell

   npm init -y
   

작업 메타데이터 파일 만들기

다음 예제 코드를 사용하여 hello-world-javascript-action 디렉터리에 action.yml이라는 새 파일을 만듭니다. 자세한 내용은 메타데이터 구문 참조을(를) 참조하세요.

name: Hello World
description: Greet someone and record the time

inputs:
  who-to-greet: # id of input
    description: Who to greet
    required: true
    default: World

outputs:
  time: # id of output
    description: The time we greeted you

runs:
  using: node20
  main: dist/index.js

name: Hello World
description: Greet someone and record the time

inputs:
  who-to-greet: # id of input
    description: Who to greet
    required: true
    default: World

outputs:
  time: # id of output
    description: The time we greeted you

runs:
  using: node20
  main: dist/index.js

이 파일은 who-to-greet 입력 및 time 출력을 정의합니다. 또한 작업 실행기에서 JavaScript 작업 실행을 시작하는 방법을 알려줍니다.

작업 도구 키트 패키지 추가

작업 도구 키트는 더 일관적으로 JavaScript 작업을 빠르게 빌드할 수 있는 Node.js 패키지의 컬렉션입니다.

도구 키트 @actions/core 패키지는 워크플로 명령, 입력 및 출력 변수, 종료 상태, 디버그 메시지에 대한 인터페이스를 제공합니다.

도구 키트는 또한 인증된 Octokit REST 클라이언트와 GitHub Actions 컨텍스트에 대한 액세스를 반환하는 @actions/github 패키지도 제공합니다.

도구 키트는 core 및 github 패키지 이상을 제공합니다. 자세한 내용은 actions/toolkit 리포지토리를 참조하세요.

터미널에서 작업 도구 키트 core 및 github 패키지를 설치합니다.

npm install @actions/core @actions/github

npm install @actions/core @actions/github

이제 설치된 모든 종속성과 종속성의 버전을 추적하는 node_modules 디렉터리와 package-lock.json 파일이 표시됩니다. node_modules 디렉터리를 리포지토리에 커밋해서는 안 됩니다.

작업 코드 작성

이 작업은 도구 키트를 사용하여 작업의 메타데이터 파일에 필요한 who-to-greet 입력 변수를 가져오고 로그의 디버그 메시지에 "Hello [who-to-greet]"를 출력합니다. 다음으로 스크립트는 현재 시간을 가져오고 나중에 작업에서 실행되는 작업에서 사용할 수 있는 출력 변수로 설정합니다.

GitHub Actions는 웹후크 이벤트, Git ReFS, 워크플로, 작업, 워크플로를 트리거한 사람에 대한 컨텍스트 정보를 제공합니다. 컨텍스트 정보에 액세스하려면 github 패키지를 사용할 수 있습니다. 작성할 작업은 웹후크 이벤트 페이로드를 로그에 출력합니다.

다음 코드를 사용하여 src/index.js라는 새 파일을 추가합니다.

import * as core from "@actions/core";
import * as github from "@actions/github";

try {
  // `who-to-greet` input defined in action metadata file
  const nameToGreet = core.getInput("who-to-greet");
  core.info(`Hello ${nameToGreet}!`);

  // Get the current time and set it as an output variable
  const time = new Date().toTimeString();
  core.setOutput("time", time);

  // Get the JSON webhook payload for the event that triggered the workflow
  const payload = JSON.stringify(github.context.payload, undefined, 2);
  core.info(`The event payload: ${payload}`);
} catch (error) {
  core.setFailed(error.message);
}

import * as core from "@actions/core";
import * as github from "@actions/github";

try {
  // `who-to-greet` input defined in action metadata file
  const nameToGreet = core.getInput("who-to-greet");
  core.info(`Hello ${nameToGreet}!`);

  // Get the current time and set it as an output variable
  const time = new Date().toTimeString();
  core.setOutput("time", time);

  // Get the JSON webhook payload for the event that triggered the workflow
  const payload = JSON.stringify(github.context.payload, undefined, 2);
  core.info(`The event payload: ${payload}`);
} catch (error) {
  core.setFailed(error.message);
}

위 index.js 예제에서 오류가 throw되면 core.setFailed(error.message);는 작업 도구 키트 @actions/core 패키지를 사용하여 메시지를 기록하고 실패한 종료 코드를 설정합니다. 자세한 내용은 작업의 종료 코드 설정을(를) 참조하세요.

추가 정보 만들기

사람들에게 작업을 사용하는 방법을 알리기 위해 추가 정보 파일을 만들 수 있습니다. 추가 정보는 작업을 공개적으로 공유하려는 경우에 가장 유용하지만 사용자 또는 팀에게 작업 사용 방법을 알려주는 좋은 방법이기도 합니다.

hello-world-javascript-action 디렉터리에서 다음 정보를 지정하는 README.md 파일을 만듭니다.

• 작업이 수행하는 작업에 대한 자세한 설명입니다.
• 필수 입력 및 출력 인수입니다.
• 선택적 입력 및 출력 인수입니다.
• 작업에서 사용하는 비밀입니다.
• 작업에서 사용하는 환경 변수입니다.
• 워크플로에서 작업을 사용하는 방법의 예입니다.

# Hello world JavaScript action

This action prints "Hello World" or "Hello" + the name of a person to greet to the log.

## Inputs

### `who-to-greet`

**Required** The name of the person to greet. Default `"World"`.

## Outputs

### `time`

The time we greeted you.

## Example usage

```yaml
uses: actions/hello-world-javascript-action@e76147da8e5c81eaf017dede5645551d4b94427b
with:
  who-to-greet: Mona the Octocat
```

# Hello world JavaScript action

This action prints "Hello World" or "Hello" + the name of a person to greet to the log.

## Inputs

### `who-to-greet`

**Required** The name of the person to greet. Default `"World"`.

## Outputs

### `time`

The time we greeted you.

## Example usage

```yaml
uses: actions/hello-world-javascript-action@e76147da8e5c81eaf017dede5645551d4b94427b
with:
  who-to-greet: Mona the Octocat
```

작업을 커밋, 태그 지정, 푸시

GitHub는 런타임 중에 워크플로에서 실행되는 각 작업을 다운로드하고 전체 코드 패키지로 실행한 후 run과 같은 워크플로 명령을 사용하여 실행기 머신과 상호 작용을 할 수 있습니다. 즉, JavaScript 코드를 실행하는 데 필요한 패키지 종속성을 포함해야 합니다. 예를 들어, 이 작업에서는 @actions/core 및 @actions/github 패키지를 사용합니다.

node_modules 디렉터리를 체크 인하면 문제가 발생할 수 있습니다. 다른 방법으로, rollup.js 또는 @vercel/ncc 등의 도구를 사용하여 코드와 종속성을 하나의 파일에 결합하여 배포할 수 있습니다.

1. 터미널에서 이 명령을 실행하여 rollup 및 해당 플러그인을 설치하세요.

   npm install --save-dev rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve

2. 다음 코드를 사용하여 rollup.config.js라는 새 파일을 리포지토리 루트에 만듭니다.

   JavaScript

   import commonjs from "@rollup/plugin-commonjs";
   import { nodeResolve } from "@rollup/plugin-node-resolve";
   
   const config = {
     input: "src/index.js",
     output: {
       esModule: true,
       file: "dist/index.js",
       format: "es",
       sourcemap: true,
     },
     plugins: [commonjs(), nodeResolve({ preferBuiltins: true })],
   };
   
   export default config;
   

3. dist/index.js 파일을 컴파일합니다.

   rollup --config rollup.config.js

   코드와 종속성이 포함된 새 dist/index.js 파일이 표시됩니다.

4. 터미널에서 업데이트를 커밋합니다.

   Shell

   git add src/index.js dist/index.js rollup.config.js package.json package-lock.json README.md action.yml
   git commit -m "Initial commit of my first action"
   git tag -a -m "My first action release" v1.1
   git push --follow-tags
   

코드를 커밋하고 푸시할 때, 업데이트된 리포지토리는 다음과 같이 표시됩니다.

hello-world-javascript-action/
├── action.yml
├── dist/
│   └── index.js
├── package.json
├── package-lock.json
├── README.md
├── rollup.config.js
└── src/
    └── index.js

워크플로에서 작업 테스트

이제 워크플로에서 작업을 테스트할 준비가 되었습니다.

퍼블릭 작업은 모든 리포지토리의 워크플로에서 사용할 수 있습니다. 작업이 프라이빗 또는 내부 리포지토리에 있는 경우 리포지토리 설정은 동일한 리포지토리 내에서만 작업을 사용할 수 있는지 또는 동일한 조직 또는 엔터프라이즈에서 소유한 다른 리포지토리에서도 사용 가능한지 여부를 지정합니다. 자세한 내용은 리포지토리에 대한 GitHub Actions 설정 관리을(를) 참조하세요.

퍼블릭 작업을 사용하는 예제

이 예제에서는 외부 리포지토리 내에서 새 퍼블릭 작업을 실행할 수 있는 방법을 보여줍니다.

다음 YAML을 .github/workflows/main.yml의 새 파일에 복사하고 위에서 만든 퍼블릭 리포지토리의 이름과 사용자 이름으로 uses: octocat/hello-world-javascript-action@1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b 줄을 업데이트합니다. who-to-greet 입력을 자신의 이름으로 바꿀 수도 있습니다.

on:
  push:
    branches:
      - main

jobs:
  hello_world_job:
    name: A job to say hello
    runs-on: ubuntu-latest

    steps:
      - name: Hello world action step
        id: hello
        uses: octocat/hello-world-javascript-action@1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b
        with:
          who-to-greet: Mona the Octocat

      # Use the output from the `hello` step
      - name: Get the output time
        run: echo "The time was ${{ steps.hello.outputs.time }}"

on:
  push:
    branches:
      - main

jobs:
  hello_world_job:
    name: A job to say hello
    runs-on: ubuntu-latest

    steps:
      - name: Hello world action step
        id: hello
        uses: octocat/hello-world-javascript-action@1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b
        with:
          who-to-greet: Mona the Octocat

      # Use the output from the `hello` step
      - name: Get the output time
        run: echo "The time was ${{ steps.hello.outputs.time }}"

이 워크플로가 트리거되면 실행기는 퍼블릭 리포지토리에서 hello-world-javascript-action 작업을 다운로드한 다음 실행합니다.

프라이빗 작업을 사용하는 예제

작업 리포지토리의 .github/workflows/main.yml 파일에 워크플로 코드를 복사합니다. who-to-greet 입력을 자신의 이름으로 바꿀 수도 있습니다.

on:
  push:
    branches:
      - main

jobs:
  hello_world_job:
    name: A job to say hello
    runs-on: ubuntu-latest

    steps:
      # To use this repository's private action,
      # you must check out the repository
      - name: Checkout
        uses: actions/checkout@v4

      - name: Hello world action step
        uses: ./ # Uses an action in the root directory
        id: hello
        with:
          who-to-greet: Mona the Octocat

      # Use the output from the `hello` step
      - name: Get the output time
        run: echo "The time was ${{ steps.hello.outputs.time }}"

on:
  push:
    branches:
      - main

jobs:
  hello_world_job:
    name: A job to say hello
    runs-on: ubuntu-latest

    steps:
      # To use this repository's private action,
      # you must check out the repository
      - name: Checkout
        uses: actions/checkout@v4

      - name: Hello world action step
        uses: ./ # Uses an action in the root directory
        id: hello
        with:
          who-to-greet: Mona the Octocat

      # Use the output from the `hello` step
      - name: Get the output time
        run: echo "The time was ${{ steps.hello.outputs.time }}"

리포지토리에서 작업 탭을 클릭하고 최신 워크플로 실행을 선택합니다. 작업 아래 또는 시각화 그래프에서 인사할 작업을 클릭합니다.

Hello world 동작 단계 클릭하면 “Hello Mona Octocat” 또는 who-to-greet 입력에 사용한 이름이 로그에 표시되어야 합니다.. 타임스탬프를 보려면 출력 시간 가져오기를 클릭합니다.

JavaScript 작업을 만들기 위한 템플릿 리포지토리

GitHub은(는) JavaScript 및 TypeScript 작업을 만들기 위한 템플릿 리포지토리를 제공합니다. 이러한 템플릿을 사용하여 테스트, Linting 및 기타 권장 사례를 포함하는 새 작업 만들기를 빠르게 시작할 수 있습니다.

• javascript-action 템플릿 리포지토리
• typescript-action 템플릿 리포지토리

GitHub.com의 JavaScript 작업 예제

GitHub.com에서 JavaScript 작업의 많은 예를 찾을 수 있습니다.

• DevExpress/testcafe-action
• duckduckgo/privacy-configuration