Pipeline Wizard

Pipeline Wizard Vue 컴포넌트의 구조, 사용법, 템플릿 정의, 위젯 레퍼런스 등 CI/CD 파이프라인 마법사 개발 방법을 설명합니다.

Pipeline Wizard는 사용자가 입력 필드를 사용하여 파이프라인을 만들 수 있도록 돕는 Vue 프론트엔드 컴포넌트입니다. 입력 필드의 유형과 최종 파이프라인의 형태는 YAML 템플릿으로 구성됩니다. Pipeline Wizard는 사용자 플로를 구성하는 단일 템플릿 파일을 필요로 합니다. Wizard는 파일의 내용과 독립적으로 동작하므로, 다양한 플로를 표시하는 데 사용할 수 있습니다. 예를 들어 정적 사이트용 템플릿 파일, Docker 이미지용 템플릿 파일, 모바일 앱용 템플릿 파일 등을 각각 만들 수 있습니다. 첫 번째 이터레이션으로서 이러한 템플릿들은 GitLab 소스 코드의 일부입니다. 템플릿 파일은 여러 단계(step)를 정의합니다. 사용자에게 표시되는 마지막 단계는 항상 커밋 단계이며, 이는 템플릿 정의에 포함되지 않습니다. 이상적인 사용자 경험은 2 3단계로 구성되어 사용자에게 총 3 4단계가 표시됩니다. 사용 예시 # 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: Set up my specific tech pipeline description: Here's two or three introductory sentences that help the user understand what this wizard is going to set up. steps: # Step 1 - inputs: # First input widget - label: Select your build image description: A Docker image that we can use to build your app placeholder: node:lts widget: text target: $BUILD_IMAGE required: true pattern: '^(?:(?=[^:\/]{1,253})(?!-)[a-zA-Z0-9-]{1,63}(?<!-)(?:\.(?!-