파이프라인 마법사
파이프라인 마법사는 Vue 프론트엔드 컴포넌트로, 사용자가 입력 필드를 사용하여 파이프라인을 생성하는데 도움을 주는 기능입니다. 입력 필드의 유형 및 최종 파이프라인 형식은 YAML 템플릿으로 구성됩니다.
파이프라인 마법사는 사용자 흐름을 구성하는 단일 템플릿 파일을 기대합니다. 마법사는 파일의 내용에 대해 중립적이므로 여러 가지 다른 흐름을 표시하는 데 마법사를 사용할 수 있습니다. 예를 들어 정적 사이트용 템플릿 파일, 도커 이미지용 템플릿 파일, 모바일 앱용 템플릿 파일 등이 있을 수 있습니다. 첫 번째 반복에서는 이러한 템플릿이 GitLab 소스 코드의 일부입니다.
템플릿 파일은 여러 단계를 정의합니다. 사용자에게 표시되는 마지막 단계는 항상 커밋이며, 템플릿 정의의 일부가 아닙니다. 이상적인 사용자 경험은 총 3-4개 단계가 사용자에게 표시될 때 2-3개의 단계로 이루어집니다.
사용 예제
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() {
// redirect
}
}
}
</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
결과
커밋 단계
위자드의 마지막 단계는 항상 커밋 단계입니다. 사용자는 위자드의 속성에 정의된 저장소로 새로 생성된 파일을 커밋할 수 있습니다. 사용자는 커밋할 브랜치를 변경할 수 있습니다. 향후 반복에서는 여기서 MR(Merge Request)을 생성할 수 있는 기능이 추가될 예정입니다.
컴포넌트 API 참조
Props
-
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
| 필요 | 목록 | 단계 참조의 목록입니다. |
step
참조
한 단계는 다단계(또는 페이지) 프로세스에서 한 페이지를 구성합니다. 최종 .gitlab-ci.yml
의 일부를 구축하는 하나 이상의 관련 입력 필드로 구성됩니다.
단계에는 두 가지 속성이 포함됩니다:
이름 | 필수 여부 | 유형 | 설명 |
---|---|---|---|
template
| 필요 | 맵 | 최종 .gitlab-ci.yml 에 딥-머지할 레이프 YAML입니다. 이 템플릿 섹션에는 $ 기호로 표시된 변수를 포함할 수 있으며, 이는 입력 필드에서 값으로 대체됩니다.
|
inputs
| 필요 | 목록 | 입력 참조의 목록입니다. |
input
참조
각 단계에는 하나 이상의 inputs
가 포함될 수 있습니다. 이상적인 사용자 경험을 위해 세 개 이상 포함해서는 안 됩니다.
입력의 모양과 느낌 뿐만 아니라 생성되는 YAML 유형(문자열, 목록 등)은 사용되는 widget
에 따라 달라집니다. widget: text
는 텍스트 입력란을 표시하고 사용자의 입력을 문자열로 템플릿에 삽입합니다. widget: list
는 하나 이상의 입력 필드를 표시하고 목록을 삽입합니다.
모든 inputs
에는 label
, widget
및 선택적으로 target
가 있어야 하지만, 대부분의 속성들은 사용된 위젯에 따라 달라집니다:
이름 | 필수 여부 | 유형 | 설명 |
---|---|---|---|
label
| 필요 | string | 입력 필드의 레이블입니다. |
widget
| 필요 | string | 이 입력에 사용할 widget 유형입니다. |
target
| 아니오 | string | 입력 필드의 값으로 대체해야 하는 단계의 템플릿 내의 변수 이름입니다. 예: $FOO
|
위젯
텍스트
widget: text
로 사용합니다. 이것은 YAML 파일에 문자열
을 삽입합니다.
이름 | 필수 여부 | 유형 | 설명 |
---|---|---|---|
label
| 필요 | string | 입력 필드의 레이블입니다. |
description
| 아니오 | string | 입력 필드와 관련된 도움말 텍스트입니다. |
required
| 아니오 | boolean | 다음 단계로 진행하기 전에 사용자가 값을 제공해야 하는지 여부입니다. 정의되지 않으면 false 입니다.
|
placeholder
| 아니오 | string | 입력 필드의 자리 표시자입니다. |
pattern
| 아니오 | string | 사용자의 입력이 다음 단계로 진행하기 전에 일치해야 하는 정규 표현식입니다. |
invalidFeedback
| 아니오 | string | 패턴 유효성 검사에 실패한 경우에 표시되는 도움말 텍스트입니다. |
default
| 아니오 | string | 필드의 기본값입니다. |
id
| 아니오 | string | 입력 필드 ID는 일반적으로 자동으로 생성되지만, 이 속성을 제공하여 재정의할 수 있습니다. |
목록
widget: list
로 사용합니다. 이는 YAML 파일에 list
를 삽입합니다.
이름 | 필수 | 유형 | 설명 |
---|---|---|---|
label
| 예 | 문자열 | 입력 필드의 레이블입니다. |
description
| 아니오 | 문자열 | 입력 필드와 관련된 도움말 텍스트입니다. |
required
| 아니오 | 부울 | 사용자가 다음 단계로 진행하기 전에 값 제공 여부입니다. 정의되지 않으면 false 입니다.
|
placeholder
| 아니오 | 문자열 | 입력 필드의 자리 표시자입니다. |
pattern
| 아니오 | 문자열 | 사용자의 입력이 다음 단계로 진행하기 전에 일치해야 하는 정규 표현식입니다. |
invalidFeedback
| 아니오 | 문자열 | 패턴 유효성 검사 실패 시 표시되는 도움말 텍스트입니다. |
default
| 아니오 | 목록 | 목록의 기본 값입니다. |
id
| 아니오 | 문자열 | 입력 필드 ID는 일반적으로 자동으로 생성되지만 이 속성을 제공하여 재정의할 수 있습니다. |
체크리스트
widget: checklist
로 사용합니다. 이는 다음 단계로 진행하기 전에 확인해야 하는 체크박스 목록을 삽입합니다.
이름 | 필수 | 유형 | 설명 |
---|---|---|---|
title
| 아니오 | 문자열 | 체크리스트 항목 위의 제목입니다. |
items
| 아니오 | 목록 | 확인해야 하는 항목 목록입니다. 각 항목은 하나의 체크박스에 해당하며, 문자열이거나 체크리스트 항목일 수 있습니다. |
체크리스트 항목
이름 | 필수 | 유형 | 설명 |
---|---|---|---|
text
| 예 | 문자열 | 체크리스트 항목 위의 제목입니다. |
help
| 아니오 | 문자열 | 항목을 설명하는 도움말 텍스트입니다. |
id
| 아니오 | 문자열 | 입력 필드 ID는 일반적으로 자동으로 생성되지만 이 속성을 제공하여 재정의할 수 있습니다. |