파이프라인 위저드

파이프라인 위저드는 Vue 프론트엔드 컴포넌트로, 사용자가 입력 필드를 사용하여 파이프라인을 생성하는 데 도움을 주는 도구입니다. 입력 필드의 유형 및 최종 파이프라인 형식은 YAML 템플릿에 의해 구성됩니다.

파이프라인 위저드는 사용자 흐름을 구성하는 단일 템플릿 파일을 기대합니다. 위저드는 파일의 내용에 대해 중립적이므로 다양한 흐름을 표시하는 데 위저드를 사용할 수 있습니다. 예를 들어 정적 사이트, Docker 이미지, 모바일 앱을 위한 각각의 템플릿 파일이 있을 수 있습니다. 처음에는 이러한 템플릿들이 GitLab 소스 코드의 일부로 구성됩니다.

템플릿 파일은 여러 단계를 정의합니다. 사용자에게 표시되는 마지막 단계는 항상 커밋이며, 템플릿 정의의 일부가 아닙니다. 이상적인 사용자 경험은 2~3개의 단계로, 총 3~4개의 단계가 사용자에게 표시됩니다.

사용 예시

Vue 컴포넌트

<!-- ~/my_feature/my_component.vue -->

<script>
  import PipelineWizard from '~/pipeline_wizard/pipeline_wizard.vue'
  import template from '~/pipeline_wizard/templates/my_template.yml';
  
  export default {
    name: "MyComponent",
    components: { PipelineWizard },
    data() {
      return { template }
    },
    methods: {
      onDone() {
        // 리디렉션
      }
     }
  }
</script>

<template>
  <pipeline-wizard :template="template"
                   project-path="foo/bar"
                   default-branch="main"
                   @done="onDone" />
</template>

템플릿

# ~/pipeline_wizard/templates/my_template.yml
id: gitlab/my-template
title: 나의 특정 기술 파이프라인 설정하기
description: 이 위저드가 설정할 내용을 사용자가 이해하는 데 도움이 되는 두세 문장을 여기에 작성해 주세요.
steps:
  # 단계 1
  - inputs:
      # 첫 번째 입력 위젯
      - label: 빌드 이미지 선택
        description: 사용할 도커 이미지로 여러분의 이미지를 빌드하기 위해 사용할 이미지
        placeholder: node:lts
        widget: text
        target: $BUILD_IMAGE
        required: true
        pattern: "^(?:(?=[^:\/]{1,253})(?!-)[a-zA-Z0-9-]{1,63}(?<!-)(?:\.(?!-)[a-zA-Z0-9-]{1,63}(?<!-))*(?::[0-9]{1,5})?\/)?((?![._-])(?:[a-z0-9._-]*)(?<![._-])(?:\/(?![._-])[a-z0-9._-]*(?<![._-]))*)(?::(?![.-])[a-zA-Z0-9_.-]{1,128})?$"
        invalid-feedback: 유효한 도커 이미지를 입력해 주세요.
      
      # 두 번째 입력 위젯
      - label: 설치 단계
        description: "로컬 빌드 환경을 설정하는  실행해야 하는 단계, 예를 들어 의존성 설치"
        placeholder: npm ci
        widget: list
        target: $INSTALLATION_STEPS
    
    # 위 사용자 입력으로 채워진 최종 파이프라인 파일을 복사하고 업데이트하는 템플릿
    template:
      my-job:
        # 앱을 빌드하는 데 사용될 도커 이미지
        image: $BUILD_IMAGE
        
        before_script: $INSTALLATION_STEPS
        
        artifacts:
          paths:
            - foo
  
  # 단계 2
  - inputs:
      # 이 단계의 유일한 입력 위젯
      - label: 설치 단계
        description: "로컬 빌드 환경을 설정하는  실행해야 하는 단계, 예를 들어 의존성 설치"
        placeholder: npm ci
        widget: list
        target: $INSTALLATION_STEPS
    
    template:
      # 빌드 스크립트 실행 전에 실행해야 하는 기능
      before_script: $INSTALLATION_STEPS

결과

  1. 단계 1
  2. 단계 2
  3. 단계 3

커밋 단계

위저드의 마지막 단계는 항상 커밋 단계입니다. 사용자는 위저드의 프롭에서 정의된 리포지터리로 새로 생성된 파일을 커밋할 수 있습니다. 사용자는 커밋할 브랜치를 변경할 수 있습니다. 향후 버전에서는 MR을 생성할 수 있는 기능이 추가될 예정입니다.

컴포넌트 API 참조

프롭스

  • template (필수): 미파싱된 문자열 형태의 템플릿 내용. 자세한 내용은 템플릿 파일 위치를 참조하세요.
  • project-path (필수): 커밋할 최종 파일의 전체 경로
  • default-branch (필수): 커밋 단계 중 사전 선택된 브랜치. 사용자가 변경할 수 있습니다.
  • default-filename (옵션, 기본값: .gitlab-ci.yml): 파일에 사용될 파일 이름. 템플릿 파일에서 재정의될 수 있습니다.

이벤트

  • done - 파일이 커밋된 후 발생합니다. 예를 들어 사용자를 파이프라인으로 리디렉션하는 데 사용할 수 있습니다.

템플릿 파일 위치

템플릿 파일은 보통 ~/pipeline_wizard/templates/에 YAML 파일로 저장됩니다.

PipelineWizard 컴포넌트는 template 프로퍼티를 미파싱된 String 형태로 기대하며, Webpack은 상기 폴더에서 .yml 파일을 문자열로 로드하도록 구성되어 있습니다. 다른 위치에서 파일을 로드해야 하는 경우 Webpack이 이를 객체로 파싱하지 않도록 주의하세요.

템플릿 참조

템플릿

템플릿 파일의 루트 요소에서 다음 속성을 정의할 수 있습니다:

이름 필수 여부 유형 설명
id 필수 string 고유한 템플릿 ID. 이 ID는 슬래시 /로 구분된 이름 공간 패턴을 따라야 합니다. GitLab 소스 코드에 커밋되는 템플릿은 항상 gitlab로 시작해야 합니다. 예: gitlab/my-template
title 필수 string 사용자에게 표시되는 페이지 제목. 위저드 상단에 h1 제목으로 표시됩니다.
description 필수 string 사용자에게 표시되는 페이지 설명.
filename 선택 string 생성되는 파일의 이름. 기본값은 .gitlab-ci.yml입니다.
steps 필수 list 단계 참조의 디렉터리

step 참조

단계는 다단계(또는 페이지) 프로세스의 한 페이지를 구성합니다. 이것은 최종 .gitlab-ci.yml의 일부를 구성하는 하나 이상의 관련 입력 필드로 구성됩니다.

단계에는 두 가지 속성이 포함됩니다:

이름 필수 여부 유형 설명
template Yes 최종 .gitlab-ci.yml에 딥-머지할 원시 YAML입니다. 이 템플릿 섹션에는 입력 필드에서 값으로 대체되는 $ 기호로 표시된 변수를 포함할 수 있습니다.
inputs Yes 디렉터리 input 참조 디렉터리입니다.

input 참조

각 단계는 하나 이상의 inputs를 포함할 수 있습니다. 이상적인 사용자 경험을 위해서는 세 개 이상의 내용을 포함해서는 안 됩니다.

입력의 모양과 느낌, 그리고 생성되는 YAML 유형(문자열, 디렉터리 등)은 사용된 widget에 따라 달라집니다. widget: text는 텍스트 입력을 나타내고 사용자의 입력을 문자열로 템플릿에 삽입합니다. widget: list는 하나 이상의 입력 필드를 나타내고 디렉터리을 삽입합니다.

모든 inputslabel, widget, 그리고 선택적으로 target이 있어야 하지만 대부분의 속성은 사용되는 위젯에 종속됩니다:

이름 필수 여부 유형 설명
label Yes 문자열 입력 필드의 레이블입니다.
widget Yes 문자열 이 입력에 사용할 widget 유형입니다.
target No 문자열 단계 템플릿 내부의 변수 이름으로, 예를 들어 입력 필드의 값으로 대체해야 하는 변수입니다. 예: $FOO.

위젯

텍스트

widget: text로 사용합니다. 이것은 YAML 파일에 string을 삽입합니다.

이름 필수 여부 유형 설명
label Yes 문자열 입력 필드의 레이블입니다.
description No 문자열 입력 필드와 관련된 도움말 텍스트입니다.
required No 부울 사용자가 다음 단계로 진행하기 전에 값을 제공해야 하는지 여부입니다. 정의되지 않은 경우 false입니다.
placeholder No 문자열 입력 필드의 자리 표시자입니다.
pattern No 문자열 사용자의 입력이 다음 단계로 진행하기 전에 일치해야 하는 정규 표현식입니다.
invalidFeedback No 문자열 패턴 유효성 검사에 실패할 경우 표시되는 도움말 텍스트입니다.
default No 문자열 필드의 기본값입니다.
id No 문자열 입력 필드 ID는 일반적으로 자동으로 생성되지만 이 속성을 제공하여 재정의할 수 있습니다.

디렉터리

widget: list로 사용합니다. 이것은 YAML 파일에 list를 삽입합니다.

이름 필수 여부 유형 설명
label Yes 문자열 입력 필드의 레이블입니다.
description No 문자열 입력 필드와 관련된 도움말 텍스트입니다.
required No 부울 사용자가 다음 단계로 진행하기 전에 값을 제공해야 하는지 여부입니다. 정의되지 않은 경우 false입니다.
placeholder No 문자열 입력 필드의 자리 표시자입니다.
pattern No 문자열 사용자의 입력이 다음 단계로 진행하기 전에 일치해야 하는 정규 표현식입니다.
invalidFeedback No 문자열 패턴 유효성 검사에 실패할 경우 표시되는 도움말 텍스트입니다.
default No 디렉터리 디렉터리의 기본값입니다.
id No 문자열 입력 필드 ID는 일반적으로 자동으로 생성되지만 이 속성을 제공하여 재정의할 수 있습니다.

체크리스트

widget: checklist로 사용합니다. 이것은 다음 단계로 진행하기 전에 체크해야 할 체크박스 디렉터리을 삽입합니다.

이름 필수 여부 유형 설명
title No 문자열 체크리스트 항목 위의 제목입니다.
items No 디렉터리 체크되어야 하는 항목의 디렉터리입니다. 각 항목은 하나의 체크박스에 해당하며 문자열 또는 checklist item일 수 있습니다.
체크리스트 항목
이름 필수 여부 유형 설명
text Yes 문자열 체크리스트 항목 위의 제목입니다.
help No 문자열 항목을 설명하는 도움말 텍스트입니다.
id No 문자열 입력 필드 ID는 일반적으로 자동으로 생성되지만 이 속성을 제공하여 재정의할 수 있습니다.