프런트엔드 마법사를 사용하여 청사진 기능 수정

의 청사진 선택 마법사 CodeCatalyst 는 blueprint.ts 파일의 Options 인터페이스에서 자동으로 생성됩니다. 프런트엔드 마법사는 스타일 설명 및 태그 를 Options 사용하여 블루프린트의 수정 및 기능을 지원합니다. JSDOC JSDOC 스타일 설명과 태그를 사용하여 작업을 수행할 수 있습니다. 예를 들어 옵션 위에 표시된 텍스트를 선택하거나 입력 검증과 같은 기능을 활성화하거나 옵션을 축소할 수 있습니다. 마법사는 Options 인터페이스의 TypeScript 유형에서 생성된 추상 구문 트리(AST)를 해석하여 작동합니다. 마법사는 가능한 한 가장 잘 설명된 유형으로 자동으로 구성합니다. 일부 유형은 지원되지 않습니다. 지원되는 다른 유형에는 리전 선택기와 환경 선택기가 포함됩니다.

다음은 블루프린트 에서 JSDOC 주석과 태그를 사용하는 마법사의 예입니다Options.


export interface Options {
  /**
   * What do you want to call your new blueprint?
   * @validationRegex /^[a-zA-Z0-9_]+$/
   * @validationMessage Must contain only upper and lowercase letters, numbers and underscores
   */
  blueprintName: string;

  /**
   * Add a description for your new blueprint.
   */
   description?: string;

   /**
    * Tags for your Blueprint:
    * @collapsed true
    */
  tags?: string[];
}

Options 인터페이스의 각 옵션 표시 이름은 camelCase 기본적으로 에 표시됩니다. JSDOC 스타일 설명의 일반 텍스트는 마법사의 옵션 위에 텍스트로 표시됩니다.

지원되는 태그

다음 JSDOC 태그는 프런트 엔드 마법사의 사용자 지정 블루프린트Options에서 지원됩니다.

@inlinePolicy ./path/to/policy/file.json

필수 - 를 유형으로 선택할 수 있습니다Role.
사용량 - 역할에 필요한 인라인 정책을 전달할 수 있습니다. policy.json 경로는 소스 코드 아래에 있을 것으로 예상됩니다. 역할에 대한 사용자 지정 정책이 필요한 경우 이 태그를 사용합니다.
종속성 - blueprint-cli 0.1.12 이상
예 - @inlinePolicy ./deployment-policy.json


environment: EnvironmentDefinition{
    awsAccountConnection: AccountConnection{
      /**
       * @inlinePolicy ./path/to/deployment-policy.json
       */
      cdkRole: Role[];
    };
   };

@trustPolicy ./path/to/policy/file.json

필수 - 를 유형으로 선택할 수 있습니다Role.
사용량 - 역할에 필요한 신뢰 정책을 전달할 수 있습니다. policy.json 경로는 소스 코드 아래에 있을 것으로 예상됩니다. 역할에 대한 사용자 지정 정책이 필요한 경우 이 태그를 사용합니다.
종속성 - blueprint-cli 0.1.12 이상
예 - @trustPolicy ./trust-policy.json


environment: EnvironmentDefinition{
    awsAccountConnection: AccountConnection{
      /**
       * @trustPolicy ./path/to/trust-policy.json
       */
      cdkRole: Role[];
    };
   };

@validationRegex Regex 표현식

필수 - 문자열이 되는 옵션입니다.
사용량 - 지정된 정규식 표현식을 사용하여 옵션에 대한 입력 검증을 수행하고 를 표시합니다@validationMessage.
예 - @validationRegex /^[a-zA-Z0-9_]+$/
권장 사항 - 와 함께 사용합니다@validationMessage. 검증 메시지는 기본적으로 비어 있습니다.

@validationMessage string

사용량을 검토하려면 또는 @validationRegex 기타 오류가 필요합니다.
사용량 - @validation* 실패 시 검증 메시지를 표시합니다.
예 - @validationMessage Must contain only upper and lowercase letters, numbers, and underscores.
권장 사항 - 와 함께 사용합니다@validationMessage. 검증 메시지는 기본적으로 비어 있습니다.

@축소된 부울(선택 사항)

필수 - 해당 없음
사용량 - 하위 옵션을 축소할 수 있도록 허용하는 부울입니다. 축소된 주석이 있는 경우 기본값은 true입니다. 값을 로 설정하면 처음에 열려 있는 축소 가능한 섹션이 @collapsed false 생성됩니다.
예 - @collapsed true

@displayName string

필수 - 해당 없음
사용량 - 옵션 표시 이름을 변경합니다. camelCase 표시 이름 이외의 형식을 허용합니다.
예 - @displayName Blueprint Name

@displayName string

필수 - 해당 없음
사용량 - 옵션 표시 이름을 변경합니다. camelCase 표시 이름 이외의 형식을 허용합니다.
예 - @displayName Blueprint Name

@defaultEntropy number

필수 - 문자열이 되는 옵션입니다.
사용량 - 지정된 길이의 무작위 배정된 영숫자 문자열을 옵션에 추가합니다.
예 - @defaultEntropy 5

@placeholder 문자열(선택 사항)

필수 - 해당 없음
사용량 - 기본 텍스트 필드 자리 표시자를 변경합니다.
예 - @placeholder type project name here

@textArea number(선택 사항)

필수 - 해당 없음
사용량 - 문자열 입력을 더 큰 텍스트 섹션의 텍스트 영역 구성 요소로 변환합니다. 숫자를 추가하면 행 수가 정의됩니다. 기본값은 5개 행입니다.
예 - @textArea 10

@hidden 부울(선택 사항)

필수 - 해당 없음
사용량 - 검증 확인에 실패하지 않는 한 사용자로부터 파일을 숨깁니다. 기본값은 true입니다.
예 - @hidden

@button 부울(선택 사항)

필수 - 해당 없음
사용량 - 주석은 부울 속성에 있어야 합니다. 선택하면 true로 합성되는 버튼을 추가합니다. 토글이 아닙니다.

예 - buttonExample: boolean;


/**
  * @button
  */
buttonExample: boolean;

@showName boolean(선택 사항)

필수 - 해당 없음
사용량 - 계정 연결 유형에서만 사용할 수 있습니다. 숨겨진 이름 입력을 표시합니다. 기본값은 default_environment입니다.

예 - @showName true


/**
  * @showName true
  */
accountConnection: AccountConnection<{
    ...
}>;

@showEnvironmentType boolean(선택 사항)

필수 - 해당 없음
사용량 - 계정 연결 유형에서만 사용할 수 있습니다. 숨겨진 환경 유형 드롭다운 메뉴를 표시합니다. 모든 연결은 기본적으로 입니다production. 옵션은 비프로덕션 또는 프로덕션 입니다.

예 - @showEnvironmentType true


/**
  * @showEnvironmentType true
  */
accountConnection: AccountConnection<{
    ...
}>;

@forceDefault boolean(선택 사항)

필수 - 해당 없음
사용량 - 이전에 사용자가 사용한 값 대신 청사진 작성자가 제공한 기본값을 사용합니다.

예 - forceDeafultExample: any;


/**
  * @forceDefault
  */
forceDeafultExample: any;

@필수 blueprintName

필수 - Options 인터페이스에 주석을 지정합니다.
사용량 - 현재 청사진의 요구 사항으로 blueprintName 프로젝트에 지정된 를 추가하도록 사용자에게 경고합니다.

예 - @requires '@amazon-codecatalyst/blueprints.blueprint-builder'


/*
 * @requires '@amazon-codecatalyst/blueprints.blueprint-builder'
 */
export interface Options extends ParentOptions {
...

@filter 정규식

필수 - Selector 또는 MultiSelect 인터페이스에 주석을 지정합니다.
사용량 - 마법사의 드롭다운을 지정된 정규식과 일치하는 옵션으로 필터링합니다.

예 - @filter /blueprintPackageName/


 /**
     * @filter /myPackageName/
     */
    blueprintInstantiation?: Selector<BlueprintInstantiation>;
...

지원되는 TypeScript 유형

다음 TypeScript 유형은 프런트 엔드 마법사의 사용자 지정 청사진Options에서 지원됩니다.

숫자

필수 - 를 유형으로 선택할 수 있습니다number.
사용량 - 숫자 입력 필드를 생성합니다.
예 - age: number


{
  age: number
  ...
}

String

필수 - 를 유형으로 선택할 수 있습니다string.
사용량 - 문자열 입력 필드를 생성합니다.
예 - name: string


{
  age: string
  ...
}

문자열 목록

필수 - 유형의 배열인 옵션입니다string.
사용량 - 문자열 목록 입력을 생성합니다.
예 - isProduction: boolean


{
  isProduction: boolean
  ...
}

Checkbox

필수 - 가 되는 옵션입니다boolean.
사용량 - 확인란을 생성합니다.
예 - isProduction: boolean


{
  isProduction: boolean
  ...
}

라디오

필수 - 3개 이하의 문자열을 결합할 수 있는 옵션입니다.
사용량 - 선택한 라디오를 생성합니다.

참고
4개 이상의 항목이 있는 경우 이 유형은 드롭다운으로 렌더링됩니다.
예 - color: 'red' | 'blue' | 'green'


{
  color: 'red' | 'blue' | 'green'
  ...
}

필수 - 4개 이상의 문자열을 조합하는 옵션입니다.
사용량 - 드롭다운을 생성합니다.
예 - runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'


{
  runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'
  ...
}

확장 가능한 섹션

필수 - 객체가 되는 옵션입니다.
사용량 - 확장 가능한 섹션을 생성합니다. 객체의 옵션은 마법사의 확장 가능한 섹션 내에 중첩됩니다.
예 -


{
     expandableSectionTitle: {
         nestedString: string;
         nestedNumber: number;
     }
}

튜플

필수 - 유형 의 옵션입니다Tuple.
사용량 - 키 값 유료 입력을 생성합니다.
예 - tuple: Tuple[string, string]>


{
    tuple: Tuple[string, string]>;
    ...
}

Tuple 목록

필수 - 유형의 배열이 되는 옵션입니다Tuple.
사용량 - 튜플 목록 입력을 생성합니다.
예 - tupleList: Tuple[string, string]>[]


{
  tupleList: Tuple[string, string]>[];
  ...
}

Selector

필수 - 유형 의 옵션입니다Selector.
사용량 - 프로젝트에 적용된 소스 리포지토리 또는 청사진의 드롭다운을 생성합니다.
예 - sourceRepo: Selector<SourceRepository>


{
    sourceRepo: Selector<SourceRepository>;
    sourceRepoOrAdd: Selector<SourceRepository | string>;
    blueprintInstantiation: Selector<BlueprintInstantiation>;
  ...
}

다중 선택

필수 - 유형 의 옵션입니다Selector.
사용량 - 다중 선택 입력을 생성합니다.
예 - multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>


{
  multiselect: MultiSelect['A' | 'B' | 'C' | 'D' | 'E']>;
  ...
}

합성 중 사용자와 통신

블루프린트 작성자는 검증 메시지 외에 사용자에게 다시 통신할 수 있습니다. 예를 들어 스페이스 멤버는 명확하지 않은 청사진을 생성하는 옵션의 조합을 볼 수 있습니다. 사용자 지정 청사진은 합성을 호출하여 오류 메시지를 사용자에게 다시 전달하는 기능을 지원합니다. 기본 청사진은 명확한 오류 메시지를 기대하는 throwSynthesisError(...) 함수를 구현합니다. 다음을 사용하여 메시지를 호출할 수 있습니다.


//blueprint.ts
this.throwSynthesisError({
   name: BlueprintSynthesisErrorTypes.BlueprintSynthesisError,
   message: 'hello from the blueprint! This is a custom error communicated to the user.'
})

javascript가 브라우저에서 비활성화되거나 사용이 불가합니다.

AWS 설명서를 사용하려면 Javascript가 활성화되어야 합니다. 지침을 보려면 브라우저의 도움말 페이지를 참조하십시오.

문서 규칙

프로젝트 요구 사항을 충족하기 위한 사용자 지정 청사진 개발

입력 생성 및 프런트엔드 마법사 요소 다시 렌더링

프런트엔드 마법사를 사용하여 청사진 기능 수정

주제

지원되는 태그

@inlinePolicy ./path/to/policy/file.json

@trustPolicy ./path/to/policy/file.json

@validationRegex Regex 표현식

@validationMessage string

@축소된 부울(선택 사항)

@displayName string

@displayName string

@defaultEntropy number

@placeholder 문자열(선택 사항)

@textArea number(선택 사항)

@hidden 부울(선택 사항)

@button 부울(선택 사항)

@showName boolean(선택 사항)

@showEnvironmentType boolean(선택 사항)

@forceDefault boolean(선택 사항)

@필수 blueprintName

@filter 정규식

지원되는 TypeScript 유형

숫자

String

문자열 목록

Checkbox

라디오

참고

Dropdown

확장 가능한 섹션

튜플

Tuple 목록

Selector

다중 선택

합성 중 사용자와 통신