Amazon CodeCatalyst는 더 이상 신규 고객에게 공개되지 않습니다. 기존 고객은 정상적으로 서비스를 계속 이용할 수 있습니다. 자세한 내용은 [CodeCatalyst에서 마이그레이션하는 방법](migration.md) 단원을 참조하십시오. 기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # 프로젝트 요구 사항을 충족하기 위한 사용자 지정 블루프린트 개발 사용자 지정 블루프린트를 게시하기 전에 특정 요구 사항을 충족하도록 블루프린트를 개발할 수 있습니다. 사용자 지정 블루프린트를 개발하고 미리 볼 때 프로젝트를 생성하여 블루프린트를 테스트할 수 있습니다. 사용자 지정 블루프린트를 개발하여 특정 소스 코드, 계정 연결, 워크플로, 문제 또는 CodeCatalyst에서 생성할 수 있는 기타 구성 요소와 같은 프로젝트 구성 요소를 포함할 수 있습니다. **중요** 외부 소스의 블루프린트 패키지를 사용하려면, 해당 패키지로 인해 발생할 수 있는 위험을 고려하세요. 스페이스에 추가하는 사용자 지정 블루프린트와 해당 블루프린트가 생성하는 코드는 사용자의 책임입니다. **중요** CodeCatalyst 스페이스에서 사용자 지정 블루프린트를 개발하려면 스페이스에 **스페이스 관리자** 또는 **파워 유저** 역할이 있는 계정으로 로그인해야 합니다. **사용자 지정 블루프린트를 개발하거나 업데이트하려면** 1. 개발 환경을 재개합니다. 자세한 내용은 [개발 환경 재개](devenvironment-resume.md) 섹션을 참조하세요. 개발 환경이 없는 경우 먼저 환경을 생성해야 합니다. 자세한 내용은 [개발 환경 생성](devenvironment-create.md) 섹션을 참조하세요. 1. 개발 환경에서 작업 중인 터미널을 엽니다. 1. 블루프린트를 생성할 때 릴리스 워크플로를 옵트인하면 최신 블루프린트 버전이 자동으로 게시됩니다. 변경 사항을 가져와 `package.json` 파일에 증분 버전이 있는지 확인합니다. 다음 명령을 사용합니다. ``` git pull ``` 1. `src/blueprint.ts` 파일에서 사용자 지정 블루프린트의 옵션을 편집합니다. `Options` 인터페이스는 CodeCatalyst 마법사에 의해 동적으로 해석되어 선택 사용자 인터페이스(UI)를 생성합니다. 구성 요소 및 지원되는 태그를 추가하여 사용자 지정 블루프린트를 개발할 수 있습니다. 자세한 내용은 [프론트엔드 마법사를 사용하여 블루프린트 특성 수정](wizard-bp.md), [블루프린트에 환경 구성 요소 추가](comp-env-bp.md), [블루프린트에 리전 구성 요소 추가](region-comp-bp.md), [블루프린트에 리포지토리 및 소스 코드 구성 요소 추가](comp-repo-source-bp.md), [블루프린트에 워크플로 구성 요소 추가](comp-workflow-bp.md) 및 [블루프린트에 개발 환경 구성 요소 추가](comp-dev-env-bp.md) 섹션을 참조하세요. 사용자 지정 블루프린트를 개발할 때 추가 지원을 받기 위해 블루프린트 SDK 및 샘플 블루프린트를 볼 수도 있습니다. 자세한 내용은 [오픈소스 GitHub 리포지토리](https://github.com/aws/codecatalyst-blueprints)를 참조하세요. 사용자 지정 블루프린트는 성공적인 합성의 결과로 미리 보기 번들을 제공합니다. 프로젝트 번들은 프로젝트의 소스 코드, 구성 및 리소스를 나타내며 CodeCatalyst 배포 API 작업에서 프로젝트에 배포하는 데 사용됩니다. 사용자 지정 블루프린트를 계속 개발하려면 블루프린트 합성 프로세스를 다시 실행합니다. 자세한 내용은 [사용자 지정 블루프린트 개념](custom-bp-concepts.md) 섹션을 참조하세요. # 프론트엔드 마법사를 사용하여 블루프린트 특성 수정 CodeCatalyst의 블루프린트 선택 마법사는 `blueprint.ts` 파일의 `Options` 인터페이스에서 자동으로 생성됩니다. 프론트엔드 마법사는 [JSDOC 스타일 설명과 태그](https://jsdoc.app/about-getting-started.html)를 사용하여 블루프린트의 `Options` 수정 및 특성을 지원합니다. JSDOC 스타일의 설명과 태그를 사용하여 태스크를 수행할 수 있습니다. 예를 들어 옵션 위에 표시된 텍스트를 선택하거나, 입력 검증과 같은 기능을 활성화하거나, 옵션을 축소할 수 있습니다. 마법사는 `Options` 인터페이스의 TypeScript 유형에서 생성된 추상 구문 트리(AST)를 해석하여 작동합니다. 마법사는 가능한 한 가장 잘 설명된 유형으로 자동으로 구성합니다. 일부 유형은 지원되지 않습니다. 지원되는 다른 유형에는 리전 선택기와 환경 선택기가 포함됩니다. 다음은 블루프린트트의 `Options`와 함께 JSDOC 주석 및 태그를 사용하는 마법사의 예입니다. ``` 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 스타일 설명의 일반 텍스트는 마법사의 옵션 위에 텍스트로 표시됩니다. **Topics** + [지원되는 태그](#supported-tags-bp) + [지원되는 TypeScript 유형](#supported-typescript-bp) + [합성 중 사용자와 통신](#communication-mid-synthesis) ## 지원되는 태그 다음 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 정규식 + **필수** - 문자열로 선택할 수 있습니다. + **사용량** - 지정된 정규식을 사용하여 옵션에 대한 입력 검증을 수행하고 를 표시합니다`@validationMessage`. + **예시** - `@validationRegex /^[a-zA-Z0-9_]+$/` + **권장 사항** - `@validationMessage`와 함께 사용합니다. 검증 메시지는 기본적으로 비어 있습니다. ### @validationMessage 문자열 + **필수** - 사용량을 검토할 `@validationRegex` 또는 기타 오류 + **사용량** - `@validation*` 실패 시 검증 메시지를 표시합니다. + **예시**: - `@validationMessage Must contain only upper and lowercase letters, numbers, and underscores` + **권장 사항** - `@validationMessage`와 함께 사용합니다. 검증 메시지는 기본적으로 비어 있습니다. ### @collapsed boolean(선택 사항) + **필수** - 해당 없음 + **사용량** - 하위 옵션을 축소할 수 있는 부울입니다. 축소된 주석이 있는 경우 기본값은 true입니다. 값을 `@collapsed false`로 설정하면 처음에 열려 있는 축소 가능한 섹션이 생성됩니다. + **예시** - `@collapsed true` ### @displayName 문자열 + **필수** - 해당 없음 + **사용량** - 옵션 표시 이름을 변경합니다. 표시 이름에 camelCase 이외의 형식을 허용합니다. + **예시** - `@displayName Blueprint Name` ### @displayName 문자열 + **필수** - 해당 없음 + **사용량** - 옵션 표시 이름을 변경합니다. 표시 이름에 [camelCase](https://en.wikipedia.org/wiki/Camel_case) 이외의 형식을 허용합니다. + **예시** - `@displayName Blueprint Name` ### @defaultEntropy 번호 + **필수** - 문자열로 선택할 수 있습니다. + **사용량** - 지정된 길이의 무작위 배정된 영숫자 문자열을 옵션에 추가합니다. + **예시** - `@defaultEntropy 5` ### @placeholder 문자열(선택 사항) + **필수** - 해당 없음 + **사용량** - 기본 텍스트 필드 자리 표시자를 변경합니다. + **예시** - `@placeholder type project name here` ### @textArea 번호(선택 사항) + **필수** - 해당 없음 + **사용량** - 문자열 입력을 더 큰 텍스트 섹션의 텍스트 영역 구성 요소로 변환합니다. 숫자를 추가하면 행 수가 정의됩니다. 기본값은 모든 행입니다. + **예시** - `@textArea 10` ### @hidden 부울(선택 사항) + **필수** - 해당 없음 + **사용량** - 검증 확인에 실패하지 않는 한 사용자로부터 파일을 숨깁니다. 기본값은 true입니다. + **예시** - `@hidden` ### @button 부울(선택 사항) + **필수** - 해당 없음 + **사용량** - 설명은 부울 속성에 있어야 합니다. 선택하면 true로 합성되는 버튼을 추가합니다. 토글이 아닙니다. + **예시** - `buttonExample: boolean;` ``` /** * @button */ buttonExample: boolean; ``` ### @showName 부울(선택 사항) + **필수** - 해당 없음 + **사용량** - 계정 연결 유형에서만 사용할 수 있습니다. 숨겨진 이름 입력을 표시합니다. 기본값은 `default_environment`입니다. + **예시** - `@showName true` ``` /** * @showName true */ accountConnection: AccountConnection<{ ... }>; ``` ### @showEnvironmentType 부울(선택 사항) + **필수** - 해당 없음 + **사용량** - 계정 연결 유형에서만 사용할 수 있습니다. 숨겨진 환경 유형 드롭다운 메뉴를 표시합니다. 모든 연결은 기본적으로 `production`입니다. 옵션은 **비프로덕션** 또는 **프로덕션**입니다. + **예시** - `@showEnvironmentType true` ``` /** * @showEnvironmentType true */ accountConnection: AccountConnection<{ ... }>; ``` ### @forceDefault boolean(선택 사항) + **필수** - 해당 없음 + **사용량** - 이전에 사용자가 사용한 값 대신 블루프린트 작성자가 제공한 기본값을 사용합니다. + **예시** - `forceDeafultExample: any;` ``` /** * @forceDefault */ forceDeafultExample: any; ``` ### @requires 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; ... ``` ## 지원되는 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 ... } ``` ### Radio + **필수** - 3개 이하의 문자열을 결합할 수 있는 옵션입니다. + **사용량** - 선택한 라디오를 생성합니다. **참고** 4개 이상의 항목이 있는 경우 이 유형은 드롭다운으로 렌더링됩니다. + **예시** - `color: 'red' | 'blue' | 'green'` ``` { color: 'red' | 'blue' | 'green' ... } ``` ### Dropdown + **필수** - 4개 이상의 문자열을 결합할 수 있는 옵션입니다. + **사용량** - 드롭다운을 생성합니다. + **예시** - `runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby'` ``` { runtimes: 'nodejs' | 'python' | 'java' | 'dotnetcore' | 'ruby' ... } ``` ### Expandable section + **필수** - 객체로 선택할 수 있습니다. + **사용량** - 확장 가능한 섹션을 생성합니다. 객체의 옵션은 마법사의 확장 가능한 섹션 내에 중첩됩니다. + **예시** - ``` { expandableSectionTitle: { nestedString: string; nestedNumber: number; } } ``` ### Tuple + **필수** - `Tuple` 유형으로 선택할 수 있습니다. + **사용량** - 키 값 유료 입력을 생성합니다. + **예시** - `tuple: Tuple[string, string]>` ``` { tuple: Tuple[string, string]>; ... } ``` ### Tuple list + **필수** - `Tuple` 유형의 배열로 선택할 수 있습니다. + **사용량** - tuple 목록 입력을 생성합니다. + **예시** - `tupleList: Tuple[string, string]>[]` ``` { tupleList: Tuple[string, string]>[]; ... } ``` ### Selector + **필수** - `Selector` 유형으로 선택할 수 있습니다. + **사용량** - 프로젝트에 적용된 소스 리포지토리 또는 블루프린트트의 드롭다운을 생성합니다. + **예시** - `sourceRepo: Selector` ``` { sourceRepo: Selector; sourceRepoOrAdd: Selector; blueprintInstantiation: Selector; ... } ``` ### Multiselect + **필수** - `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.' }) ``` # 입력 생성 및 프론트엔드 마법사 요소 다시 렌더링 DynamicKVInput을 사용하여 마법사 입력을 생성하고 사용자 지정 블루프린트에 대한 프론트엔드 마법사 요소를 동적으로 생성할 수 있습니다. **Topics** + [개발 환경 생성](#dynamickvinput-bp) + [동적으로 마법사 요소 생성](#create-wizard-elements-bp) ## 개발 환경 생성 DynamicKVInput 유형을 사용하여 사용자 지정 bluerpint의 기본값을 사용하여 프론트엔드 마법사 입력을 생성할 수 있습니다. 최신 스키마를 보려면 [DynamicKVInput 정의](https://github.com/aws/codecatalyst-blueprints/blob/main/packages/blueprints/blueprint/src/ui-selectors/dynamic-kv-input.ts)를 참조하세요. 다음 예시에서는 `Options`를 사용하여 객체를 형성하는 방법을 보여줍니다. ``` import { DynamicKVInput } from '@amazon-codecatalyst/blueprints.blueprint'; export interface Options extends ParentOptions { parameters: DynamicKVInput[]; } ``` 다음 예시에서는 여러 속성을 사용하여 기본 파라미터를 설정하는 방법을 보여줍니다. ``` { "parameters": [ { "key": "AWS_REGION", "value": "us-west-2", "displayType": "region", "possibleValues": [ "us-west-1", "us-west-2", "us-east-1", "us-east-2" ], "displayName": "AWS Region", "description": "AWS Region to deploy the solution to." }, { "key": "SchedulingActive", "value": "Yes", "displayType": "dropdown", "possibleValues": [ "Yes", "No" ], "displayName": "Scheduling Active", "description": "Activate or deactivate scheduling." }, { "key": "ScheduledServices", "value": "Both", "displayType": "dropdown", "possibleValues": [ "EC2", "RDS", "Both" ], "displayName": "Scheduled Services", "description": "Services to schedule." }, { "key": "ScheduleRdsClusters", "value": "No", "displayType": "dropdown", "possibleValues": [ "Yes", "No" ], "displayName": "Schedule RDS Clusters", "description": "Enable scheduling of Aurora clusters for RDS service." }, { "key": "CreateRdsSnapshot", "value": "No", "displayType": "dropdown", "possibleValues": [ "Yes", "No" ], "displayName": "Create RDS Snapshot", "description": "Create snapshot before stopping RDS instances (does not apply to Aurora Clusters)." }, { "key": "MemorySize", "value": "128", "displayType": "dropdown", "possibleValues": [ "128", "384", "512", "640", "768", "896", "1024", "1152", "1280", "1408", "1536" ], "displayName": "Memory Size", "description": "Size of the Lambda function running the scheduler, increase size when processing large numbers of instances." }, { "key": "UseCloudWatchMetrics", "value": "No", "displayType": "dropdown", "possibleValues": [ "Yes", "No" ], "displayName": "Use CloudWatch Metrics", "description": "Collect instance scheduling data using CloudWatch metrics." }, { "key": "LogRetentionDays", "value": "30", "displayType": "dropdown", "possibleValues": [ "1", "3", "5", "7", "14", "30", "60", "90", "120", "150", "180", "365", "400", "545", "731", "1827", "3653" ], "displayName": "Log Retention Days", "description": "Retention days for scheduler logs." }, { "key": "Trace", "value": "No", "displayType": "dropdown", "possibleValues": [ "Yes", "No" ], "displayName": "Trace", "description": "Enable debug-level logging in CloudWatch logs." }, { "key": "EnableSSMMaintenanceWindows", "value": "No", "displayType": "dropdown", "possibleValues": [ "Yes", "No" ], "displayName": "Enable SSM Maintenance Windows", "description": "Enable the solution to load SSM Maintenance Windows, so that they can be used for EC2 instance Scheduling." }, { "key": "DefaultTimezone", "value": "UTC", "displayType": "string", "displayName": "Default Timezone", "description": "Default timezone to use for scheduling." }, { "key": "Regions", "value": "us-west-2", "displayType": "string", "displayName": "Regions", "description": "List of regions in which instances should be scheduled, leave blank for current region only." }, { "key": "UsingAWSOrganizations", "value": "No", "displayType": "dropdown", "possibleValues": [ "Yes", "No" ], "displayName": "Using AWS Organizations", "description": "Use AWS Organizations to automate spoke account registration." }, { "key": "Principals", "displayType": "string", "optional": false, "displayName": "Principals", "description": "(Required) If using AWS Organizations, provide the Organization ID. Eg. o-xxxxyyy. Else, provide a comma separated list of spoke account ids to schedule. Eg.: 1111111111, 2222222222 or {param: ssm-param-name}" }, { "key": "Namespace", "value": "Default", "displayType": "string", "displayName": "Namespace", "description": "Provide unique identifier to differentiate between multiple solution deployments (No Spaces). Example: Dev" }, { "key": "SchedulerFrequency", "value": 5, "displayType": "number", "displayName": "Scheduler Frequency", "description": "Scheduler running frequency in minutes." } ] } ``` ## 동적으로 마법사 요소 생성 마법사 입력을 생성하는 것과 동일한 스키마를 사용하여 합성 중에 마법사를 동적으로 다시 렌더링할 수 있습니다. 필요한 경우 사용자의 후속 질문을 처리하는 데 사용할 수 있습니다. ``` //blueprint.ts export interface Options extends ParentOptions { ... dynamicOptions: OptionsSchemaDefinition<'optionsIdentifier', KVSchema>; } ``` 그런 다음 `Options` 구성 요소를 사용하여 합성 기간 중에 마법사를 설정할 수 있습니다. ``` import { OptionsSchemaDefinition, OptionsSchema, } from '@amazon-codecatalyst/blueprints.blueprint'; ... // dynamically renders a number in the place where 'optionsIdentifier' was set in the original options type. new OptionsSchema(this, 'optionsIdentifier', [ { "key": "SchedulerFrequency", "value": 5, "displayType": "number", "displayName": "Scheduler Frequency", "description": "Scheduler running frequency in minutes." } ]); ``` # 블루프린트에 환경 구성 요소 추가 사용자 지정 블루프린트 마법사는 마법사를 통해 노출된 `Options` 인터페이스에서 동적으로 생성됩니다. 블루프린트는 노출된 유형에서 사용자 인터페이스(UI) 구성 요소 생성을 지원합니다. **Amazon CodeCatalyst 블루프린트 환경 구성 요소를 가져오려면** 다음을 `blueprint.ts` 파일에 추가합니다. ``` import {...} from '@amazon-codecatalyst/codecatalyst-environments' ``` **Topics** + [개발 환경 생성](#create-dev-env-bp) + [환경 목록](#list-env-bp) + [모의 인터페이스 예시](#examples-comp-env-bp) ## 개발 환경 생성 다음 예시에서는 애플리케이션을 클라우드에 배포하는 방법을 보여줍니다. ``` export interface Options extends ParentOptions { ... myNewEnvironment: EnvironmentDefinition{ thisIsMyFirstAccountConnection: AccountConnection{ thisIsARole: Role['lambda', 's3', 'dynamo']; }; }; } ``` 인터페이스는 단일 계정 연결(`thisIsMyFirstAccountConnection`)을 사용하여 새 환경(`myNewEnvironment`)을 요청하는 UI 구성 요소를 생성합니다. 계정 연결(`thisIsARole`)의 역할도 최소 필수 역할 기능으로서 `['lambda', 's3', 'dynamo']`를 사용하여 생성됩니다. 모든 사용자에게 계정 연결이 있는 것은 아니므로 사용자가 계정을 연결하지 않거나 계정을 역할에 연결하지 않는 경우를 확인해야 합니다. 역할에는 `@inlinePolicies`로 주석을 달 수도 있습니다. 자세한 내용은 [@inlinePolicy ./path/to/policy/file.json](wizard-bp.md#inline-policy-tag) 섹션을 참조하세요. 환경 구성 요소에는 `name` 및 `environmentType`가 필요합니다. 다음 코드는 최소 필수 기본 셰이프입니다. ``` { ... "myNewEnvironment": { "name": "myProductionEnvironment", "environmentType": "PRODUCTION" }, } ``` 그러면 UI 구성 요소에 다양한 필드가 표시됩니다. 필드를 채우면 블루프린트가 완전히 확장된 모양이 됩니다. 테스트 및 개발 목적으로 `defaults.json` 파일에 전체 모의를 포함하는 것이 도움이 될 수 있습니다. ## 환경 목록 `EnvironmentDefinition` 유형 배열을 지정하면 마법사 UI에 환경 목록이 생성됩니다. ``` export interface Options extends ParentOptions { ... /** @showName readOnly */ myEnvironments: EnvironmentDefinition<{ thisIsMyFirstAccountConnection: AccountConnection<{ thisIsARole: Role<['lambda', 's3', 'dynamo']>; }>; }>[]; } ``` 다음 예시에서는 환경 목록의 기본값을 보여줍니다. ``` { ... "myEnvironments": [ { "name": "myProductionEnvironment", "environmentType": "PRODUCTION" }, { "name": "myDevelopmentEnvironment", "environmentType": "DEVELOPMENT" }, ] } ``` ## 모의 인터페이스 예시 ### 간단한 모의 인터페이스 ``` { ... "thisIsMyEnvironment": { "name": "myProductionEnvironment", "environmentType": "PRODUCTION", "thisIsMySecondAccountConnection": { "id": "12345678910", "name": "my-account-connection-name", "secondAdminRole": { "arn": "arn:aws:iam::12345678910:role/ConnectedQuokkaRole", "name": "ConnectedQuokkaRole", "capabilities": [ "lambda", "s3", "dynamo" ] } } } } ``` ### 복잡한 모의 인터페이스 ``` export interface Options extends ParentOptions { /** * The name of an environment * @displayName This is a Environment Name * @collapsed */ thisIsMyEnvironment: EnvironmentDefinition{ /** * comments about the account that is being deployed into * @displayName This account connection has an overriden name * @collapsed */ thisIsMyFirstAccountConnection: AccountConnection{ /** * Blah blah some information about the role that I expect * e.g. here's a copy-pastable policy: [to a link] * @displayName This role has an overriden name */ adminRole: Role['admin', 'lambda', 's3', 'cloudfront']; /** * Blah blah some information about the second role that I expect * e.g. here's a copy-pastable policy: [to a link] */ lambdaRole: Role['lambda', 's3']; }; /** * comments about the account that is being deployed into */ thisIsMySecondAccountConnection: AccountConnection{ /** * Blah blah some information about the role that I expect * e.g. here's a copy-pastable policy: [to a link] */ secondAdminRole: Role['admin', 'lambda', 's3', 'cloudfront']; /** * Blah blah some information about the second role that I expect * e.g. here's a copy-pastable policy: [to a link] */ secondLambdaRole: Role['lambda', 's3']; }; }; } ``` ### 전체 모의 인터페이스 ``` { ... "thisIsMyEnvironment": { "name": "my-production-environment", "environmentType": "PRODUCTION", "thisIsMySecondAccountConnection": { "id": "12345678910", "name": "my-connected-account", "secondAdminRole": { "name": "LambdaQuokkaRole", "arn": "arn:aws:iam::12345678910:role/LambdaQuokkaRole", "capabilities": [ "admin", "lambda", "s3", "cloudfront" ] }, "secondLambdaRole": { "name": "LambdaQuokkaRole", "arn": "arn:aws:iam::12345678910:role/LambdaQuokkaRole", "capabilities": [ "lambda", "s3" ] } }, "thisIsMyFirstAccountConnection": { "id": "12345678910", "name": "my-connected-account", "adminRole": { "name": "LambdaQuokkaRole", "arn": "arn:aws:iam::12345678910:role/LambdaQuokkaRole", "capabilities": [ "admin", "lambda", "s3", "cloudfront" ] }, "lambdaRole": { "name": "LambdaQuokkaRole", "arn": "arn:aws:iam::12345678910:role/LambdaQuokkaRole", "capabilities": [ "lambda", "s3" ] } } }, } ``` # 블루프린트에 보안 암호 구성 요소 추가 CodeCatalyst에서 보안 암호를 사용하여 워크플로에서 참조할 수 있는 민감한 데이터를 저장할 수 있습니다. 사용자 지정 블루프린트에 보안 암호를 추가하고 워크플로에서 참조할 수 있습니다. 자세한 내용은 [보안 암호를 사용하여 데이터 마스킹](workflows-secrets.md) 섹션을 참조하세요. **Amazon CodeCatalyst 블루프린트 리전 유형을 가져오려면** 다음을 `blueprint.ts` 파일에 추가합니다. ``` import { Secret, SecretDefinition } from '@amazon-codecatalyst/blueprint-component.secrets' ``` **Topics** + [보안 암호 생성](#comp-create-secrets-bp) + [워크플로에서 보안 암호 참조](#comp-reference-secrets-bp) ## 보안 암호 생성 다음 예시에서는 사용자에게 보안 암호 값과 선택적 설명을 입력하라는 메시지를 표시하는 UI 구성 요소를 생성합니다. ``` export interface Options extends ParentOptions { ... mySecret: SecretDefinition; } export class Blueprint extends ParentBlueprint { constructor(options_: Options) { new Secret(this, options.secret); } ``` 보안 암호 구성 요소에는 `name`이 필요합니다. 다음 코드는 최소 필수 기본 셰이프입니다. ``` { ... "secret": { "name": "secretName" }, } ``` ## 워크플로에서 보안 암호 참조 다음 예시에서 블루프린트는 보안 암호와 보안 암호 값을 참조하는 워크플로를 생성합니다. 자세한 내용은 [워크플로에서 보안 암호 참조](workflows-secrets.using.md#workflows-using-secrets.using-identifier) 섹션을 참조하세요. ``` export interface Options extends ParentOptions { ... /** * * @validationRegex /^\w+$/ */ username: string; password: SecretDefinition; } export class Blueprint extends ParentBlueprint { constructor(options_: Options) { const password = new Secret(this, options_.password); const workflowBuilder = new WorkflowBuilder(this, { Name: 'my_workflow', }); workflowBuilder.addBuildAction({ actionName: 'download_files', input: { Sources: ['WorkflowSource'], }, output: { Artifacts: [{ Name: 'download', Files: ['file1'] }], }, steps: [ `curl -u ${options_.username}:${password.reference} https://example.com`, ], }); new Workflow( this, repo, workflowBuilder.getDefinition(), ); } ``` CodeCatalyst에서 보안 암호 사용에 대한 자세한 내용은 [보안 암호를 사용하여 데이터 마스킹](workflows-secrets.md) 섹션을 참조하세요. # 블루프린트에 리전 구성 요소 추가 리전 유형을 사용자 지정 블루프린트의 `Options` 인터페이스에 추가하여 블루프린트 마법사에서 구성 요소를 생성할 수 있습니다. 블루프린트 마법사에 하나 이상의 AWS 리전을 입력할 수 있습니다. 리전 유형은 `blueprint.ts` 파일의 기본 블루프린트에서 가져올 수 있습니다. 자세한 내용은 [AWS 리전](https://aws.amazon.com/about-aws/global-infrastructure/regions_az/) 섹션을 참조하세요. **Amazon CodeCatalyst 블루프린트 리전 유형을 가져오려면** 다음을 `blueprint.ts` 파일에 추가합니다. ``` import { Region } from '@amazon-codecatalyst/blueprints.blueprint' ``` 리전 유형 파라미터는 선택할 수 있는 AWS 리전 코드의 배열이거나 지원되는 모든 AWS 리전을 포함하는 데 `*`를 사용할 수 있습니다. **Topics** + [Annotations](#region-annotations-bp) + [리전 구성 요소 예시](#region-components-examples) ## Annotations JSDoc 태그를 `Options` 인터페이스의 각 필드에 추가하여 마법사에서 필드가 나타나고 동작하는 방식을 사용자 지정할 수 있습니다. 리전 유형에서 다음 태그가 지원됩니다. + `@displayName` 주석을 사용하여 마법사에서 필드의 레이블을 변경할 수 있습니다. 예시: `@displayName AWS Region` + `@placeholder` 주석을 사용하여 선택/다중 선택 구성 요소의 자리 표시자를 변경할 수 있습니다. 예시: `@placeholder Choose AWS Region` ## 리전 구성 요소 예시 ### 지정된 목록에서 리전 선택 ``` export interface Options extends ParentOptions { ... /** * @displayName Region */ region: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>; } ``` ### 지정된 목록에서 하나 이상의 리전 선택 ``` export interface Options extends ParentOptions { ... /** * @displayName Regions */ multiRegion: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>[]; } ``` ### AWS 리전 하나 선택 ``` export interface Options extends ParentOptions { ... /** * @displayName Region */ region: Region<['*']>; } ``` ### 지정된 목록에서 하나 이상의 리전 선택 ``` export interface Options extends ParentOptions { ... /** * @displayName Regions */ multiRegion: Region<['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2']>[]; } ``` # 블루프린트에 리포지토리 및 소스 코드 구성 요소 추가 Amazon CodeCatalyst는 리포지토리를 사용하여 코드를 저장합니다. 리포지토리는 이름을 입력으로 사용합니다. 대부분의 구성 요소는 소스 코드 파일, 워크플로 및 관리형 개발 환경(MDE)과 같은 기타 구성 요소와 같은 리포지토리에 저장됩니다. 소스 리포지토리 구성 요소는 파일 및 정적 자산 관리에 사용되는 구성 요소도 내보냅니다. 리포지토리에는 이름 제약이 있습니다. 자세한 내용은 [CodeCatalyst의 소스 리포지토리로 코드 저장 및 협업소스 리포지토리를 사용하여 코드 저장 및 협업](source.md) 섹션을 참조하세요. ``` const repository = new SourceRepository(this, { title: 'my-new-repository-title', }); ``` **Amazon CodeCatalyst 블루프린트 리포지토리 및 소스 코드 구성 요소를 가져오려면** 다음을 `blueprint.ts` 파일에 추가합니다. ``` import {...} from '@caws-blueprint-component/caws-source-repositories' ``` **Topics** + [파일 추가](#repo-add-file-bp) + [일반 파일 추가](#repo-add-generic-file-bp) + [파일 복사](#repo-copy-file-bp) + [여러 파일 대상으로 지정](#target-multiple-files-bp) + [새 리포지토리 생성 및 파일 추가](#repo-code-examples-bp) ## 파일 추가 `SourceFile` 구문을 사용하여 리포지토리에 텍스트 파일을 쓸 수 있습니다. 작업은 가장 일반적인 사용 사례 중 하나이며 리포지토리, 파일 경로 및 텍스트 콘텐츠를 사용합니다. 리포지토리 내에 파일 경로가 없는 경우 구성 요소는 필요한 모든 폴더를 생성합니다. ``` new SourceFile(repository, `path/to/my/file/in/repo/file.txt`, 'my file contents'); ``` **참고** 동일한 리포지토리 내의 동일한 위치에 두 파일을 쓰면 가장 최근의 구현이 이전 파일을 덮어씁니다. 이 기능을 사용하여 생성된 코드를 계층화할 수 있으며, 사용자 지정 블루프린트가 생성했을 수 있는 코드를 확장하는 데 특히 유용합니다. ## 일반 파일 추가 리포지토리에 임의 비트를 쓸 수 있습니다. 버퍼에서 읽고 `File` 구문을 사용할 수 있습니다. ``` new File(repository, `path/to/my/file/in/repo/file.img`, new Buffer(...)); new File(repository, `path/to/my/file/in/repo/new-img.img`, new StaticAsset('path/to/image.png').content()); ``` ## 파일 복사 스타터 코드를 복사하여 붙여넣은 다음 해당 베이스 위에 더 많은 코드를 생성하여 생성된 코드를 시작할 수 있습니다. `static-assets` 디렉터리 내에 코드를 배치한 다음 `StaticAsset` 구문으로 해당 코드를 대상으로 지정합니다. 이 경우 경로는 항상 `static-assets` 디렉터리의 루트에서 시작됩니다. ``` const starterCode = new StaticAsset('path/to/file/file.txt') const starterCodeText = new StaticAsset('path/to/file/file.txt').toString() const starterCodeRawContent = new StaticAsset('path/to/image/hello.png').content() const starterCodePath = new StaticAsset('path/to/image/hello.png').path() // starterCodePath is equal to 'path/to/image/hello.png' ``` `StaticAsset`의 하위 클래스는 `SubstitutionAsset`입니다. 하위 클래스는 정확히 동일한 함수를 사용하지만 대신 파일에서 콧수염 대체를 실행할 수 있습니다. 복사 및 교체 스타일 생성을 수행하는 데 유용할 수 있습니다. 정적 자산 대체는 머스타쉬 템플릿 엔진을 사용하여 생성된 소스 리포지토리에 시드되는 정적 파일을 렌더링합니다. 콧수염 템플릿 규칙은 렌더링 중에 적용되므로 모든 값은 기본적으로 HTML 인코딩됩니다. 이스케이프되지 않은 HTML을 렌더링하려면 `{{{name}}}` 트리플 머스타쉬 구문을 사용합니다. 자세한 내용은 [머스타쉬 템플릿 규칙](https://github.com/janl/mustache.js?tab=readme-ov-file#variables)을 참조하세요. **참고** 텍스트 해석이 불가능한 파일 대신 대체 파일을 실행하면 오류가 발생할 수 있습니다. ``` const starterCodeText = new SubstitionAsset('path/to/file/file.txt').subsitite({ 'my_variable': 'subbed value1', 'another_variable': 'subbed value2' }) ``` ## 여러 파일 대상으로 지정 정적 자산은 `StaticAsset` 및 그 하위 클래스 `findAll(...)`의 정적 함수를 통해 glob 타겟팅을 지원하며, 경로, 콘텐츠 등이 미리 로드된 정적 자산 목록을 반환합니다. 목록을 `File` 구문과 연결하여 `static-assets` 디렉터리에 콘텐츠를 복사하고 붙여넣을 수 있습니다. ``` new File(repository, `path/to/my/file/in/repo/file.img`, new Buffer(...)); new File(repository, `path/to/my/file/in/repo/new-img.img`, new StaticAsset('path/to/image.png').content()); ``` ## 새 리포지토리 생성 및 파일 추가 리포지토리 구성 요소를 사용하여 생성된 프로젝트에 새 리포지토리를 생성할 수 있습니다. 그런 다음 생성된 리포지토리에 파일 또는 워크플로를 추가할 수 있습니다. ``` import { SourceRepository } from '@amazon-codecatalyst/codecatalyst-source-repositories'; ... const repository = new SourceRepository(this, { title: 'myRepo' }); ``` 다음 예시에서는 기존 리포지토리에 파일 및 워크플로를 추가하는 방법을 보여줍니다. ``` import { SourceFile } from '@amazon-codecatalyst/codecatalyst-source-repositories'; import { Workflow } from '@amazon-codecatalyst/codecatalyst-workflows'; ... new SourceFile(repository, 'README.md', 'This is the content of my readme'); new Workflow(this, repository, {/**...workflowDefinition...**/}); ``` 두 코드 조각을 결합하면 이름이 `myRepo`인 단일 리포지토리가 소스 파일 `README.md` 및 루트의 CodeCatalyst 워크플로와 함께 생성됩니다. # 블루프린트에 워크플로 구성 요소 추가 워크플로는 Amazon CodeCatalyst 프로젝트에서 트리거를 기반으로 작업을 실행하는 데 사용됩니다. 워크플로 구성 요소를 사용하여 워크플로 YAML 파일을 빌드하고 통합할 수 있습니다. 자세한 내용은 [워크플로 YAML 정의](workflow-reference.md) 섹션을 참조하세요. **Amazon CodeCatalyst 블루프린트 워크플로 구성 요소를 가져오려면** 다음을 `blueprint.ts` 파일에 추가합니다. ``` import { WorkflowBuilder, Workflow } from '@amazon-codecatalyst/codecatalyst-workflows' ``` **Topics** + [워크플로 구성 요소 예시](#comp-workflows-examples-bp) + [환경에 연결](#comp-workflows-connect-env-bp) ## 워크플로 구성 요소 예시 ### WorkflowBuilder 구성 요소 클래스를 사용하여 워크플로 정의를 빌드할 수 있습니다. 리포지토리에서 렌더링하기 위해 워크플로 구성 요소에 정의를 부여할 수 있습니다. ``` import { WorkflowBuilder } from '@amazon-codecatalyst/codecatalyst-workflows' const workflowBuilder = new WorkflowBuilder({} as Blueprint, { Name: 'my_workflow', }); // trigger the workflow on pushes to branch 'main' workflowBuilder.addBranchTrigger(['main']); // add a build action workflowBuilder.addBuildAction({ // give the action a name actionName: 'build_and_do_some_other_stuff', // the action pulls from source code input: { Sources: ['WorkflowSource'], }, // the output attempts to autodiscover test reports, but not in the node modules output: { AutoDiscoverReports: { Enabled: true, ReportNamePrefix: AutoDiscovered, IncludePaths: ['**/*'], ExcludePaths: ['*/node_modules/**/*'], }, }, // execute some arbitrary steps steps: [ 'npm install', 'npm run myscript', 'echo hello-world', ], // add an account connection to the workflow environment: convertToWorkflowEnvironment(myEnv), }); ``` ### Workflow Projen 구성 요소 다음 예시에서는 Projen 구성 요소를 사용하여 워크플로 YAML을 리포지토리에 쓰는 방법을 보여줍니다. ``` import { Workflow } from '@amazon-codecatalyst/codecatalyst-workflows' ... const repo = new SourceRepository const blueprint = this; const workflowDef = workflowBuilder.getDefinition() // creates a workflow.yaml at .aws/workflows/${workflowDef.name}.yaml new Workflow(blueprint, repo, workflowDef); // can also pass in any object and have it rendered as a yaml. This is unsafe and may not produce a valid workflow new Workflow(blueprint, repo, {... some object ...}); ``` ## 환경에 연결 많은 워크플로가 AWS 계정 연결에서 실행되어야 합니다. 워크플로는 작업이 계정 및 역할 이름 사양이 있는 환경에 연결되도록 허용하여 이를 처리합니다. ``` import { convertToWorkflowEnvironment } from '@amazon-codecatalyst/codecatalyst-workflows' const myEnv = new Environment(...); // can be passed into a workflow constructor const workflowEnvironment = convertToWorkflowEnvironment(myEnv); // add a build action workflowBuilder.addBuildAction({ ... // add an account connection to the workflow environment: convertToWorkflowEnvironment(myEnv), }); ``` # 블루프린트에 개발 환경 구성 요소 추가 관리형 개발 환경(MDE)은 CodeCatalyst에서 MDE Workspaces를 생성하고 설정하는 데 사용됩니다. 구성 요소는 `devfile.yaml` 파일을 생성합니다. 자세한 내용은 [Devfile 소개](https://redhat-developer.github.io/devfile/) 및 [개발 환경용 리포지토리 devfile 편집](devenvironment-devfile-moving.md) 섹션을 참조하세요. ``` new Workspace(this, repository, SampleWorkspaces.default); ``` **Amazon CodeCatalyst 블루프린트 작업 영역 구성 요소를 가져오려면** 다음을 `blueprint.ts` 파일에 추가합니다. ``` import {...} from '@amazon-codecatalyst/codecatalyst-workspaces' ``` # 블루프린트에 문제 구성 요소 추가 CodeCatalyst 에서 특성, 작업, 버그 및 프로젝트와 관련된 기타 작업을 모니터링할 수 있습니다. 각 작업은 문제라는 고유한 레코드에 보관되어 있습니다. 각 문제에는 검색, 그룹화 및 필터링할 수 있는 설명, 담당자, 상태 및 기타 속성이 있을 수 있습니다. 기본 보기를 사용하여 문제를 보거나 사용자 지정 필터링, 정렬 또는 그룹화로 고유한 보기를 생성할 수 있습니다. 문제와 관련된 개념에 대한 자세한 내용은 [문제 개념](issues-concepts.md) 및 [CodeCatalyst 문제에 대한 할당량](issues-quotas.md) 섹션을 참조하세요. 문제 구성 요소는 문제에 대한 JSON 표현을 생성합니다. 구성 요소는 ID 필드와 문제 정의를 입력으로 사용합니다. **Amazon CodeCatalyst 블루프린트를 가져오려면 구성 요소를 발행합니다.** 다음을 `blueprint.ts` 파일에 추가합니다. ``` import {...} from '@amazon-codecatalyst/blueprint-component.issues' ``` **Topics** + [문제 구성 요소 예시](#comp-issues-examples-bp) ## 문제 구성 요소 예시 ### 문제 생성 ``` import { Issue } from '@amazon-codecatalyst/blueprint-component.issues'; ... new Issue(this, 'myFirstIssue', { title: 'myFirstIssue', content: 'This is an example issue.', }); ``` ### 우선 순위가 높은 문제 생성 ``` import { Workflow } from '@amazon-codecatalyst/codecatalyst-workflows' ... const repo = new SourceRepository const blueprint = this; const workflowDef = workflowBuilder.getDefinition() // Creates a workflow.yaml at .aws/workflows/${workflowDef.name}.yaml new Workflow(blueprint, repo, workflowDef); // Can also pass in any object and have it rendered as a yaml. This is unsafe and may not produce a valid workflow new Workflow(blueprint, repo, {... some object ...}); ``` ### 레이블을 사용하여 우선 순위가 낮은 문제 생성 ``` import { Issue } from '@amazon-codecatalyst/blueprint-component.issues'; ... new Issue(this, 'myThirdIssue', { title: 'myThirdIssue', content: 'This is an example of a low priority issue with a label.', priority: 'LOW', labels: ['exampleLabel'], }); ``` # 블루프린트 도구 및 CLI 작업 [블루프린트 CLI](https://www.npmjs.com/package/@amazon-codecatalyst/blueprint-util.cli)는 사용자 지정 블루프린트를 관리하고 작업할 수 있는 도구를 제공합니다. **Topics** + [블루프린트 도구 작업](#working-with-bp-cli) + [이미지 업로드 도구](#image-upload-tool) ## 블루프린트 도구 작업 **블루프린트 도구로 작업하려면** 1. [https://codecatalyst.aws/](https://codecatalyst.aws/)에서 CodeCatalyst 콘솔을 엽니다. 1. 개발 환경을 재개합니다. 자세한 내용은 [개발 환경 재개](devenvironment-resume.md) 섹션을 참조하세요. 개발 환경이 없는 경우 먼저 환경을 생성해야 합니다. 자세한 내용은 [개발 환경 생성](devenvironment-create.md) 섹션을 참조하세요. 1. 작동 중인 터미널에서 다음 명령을 실행하여 블루프린트 CLI를 설치합니다. ``` npm install -g @amazon-codecatalyst/blueprint-util.cli ``` 1. `blueprint.ts` 파일에서 사용할 도구를 다음 형식으로 가져옵니다. ``` import { } from '@amazon-codecatalyst/blueprint-util.cli/lib//; ``` **작은 정보** [https://github.com/aws/codecatalyst-blueprints/tree/main/packages/utils/blueprint-cli](https://github.com/aws/codecatalyst-blueprints/tree/main/packages/utils/blueprint-cli)에서 사용하려는 도구의 이름을 찾을 수 있습니다. **이미지 업로드 도구를 사용하려면 스크립트에 다음을 추가합니다.** ``` import { uploadImagePublicly } from '@amazon-codecatalyst/blueprint-util.cli/lib/image-upload-tool/upload-image-to-aws'; ``` **예시** + **게시 함수를 사용하려면 스크립트에 다음을 추가합니다.** ``` import { publish } from '@amazon-codecatalyst/blueprint-util.cli/lib/publish/publish'; ``` + **이미지 업로드 도구를 사용하려면 스크립트에 다음을 추가합니다.** ``` import { uploadImagePublicly } from '@amazon-codecatalyst/blueprint-util.cli/lib/image-upload-tool/upload-image-to-aws'; ``` 1. 함수를 직접적으로 호출합니다. **예시:** + **게시 함수를 사용하려면 스크립트에 다음을 추가합니다.** ``` await publish(logger, config.publishEndpoint, {}); ``` + **이미지 업로드 도구를 사용하려면 스크립트에 다음을 추가합니다.** ``` const {imageUrl, imageName} = await uploadImagePublicly(logger, 'path/to/image')); ``` ## 이미지 업로드 도구 이미지 업로드 도구를 사용하면 AWS 계정의 S3 버킷에 이미지를 업로드한 다음 CloudFront 뒤에 해당 이미지를 공개적으로 배포할 수 있습니다. 도구는 로컬 스토리지(및 선택적 버킷 이름)의 이미지 경로를 입력으로 가져와서 공개적으로 사용할 수 있는 이미지에 URL을 반환합니다. 자세한 내용은 [Amazon CloudFront란?](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) 및 [ Amazon S3란?](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html)을 참조하세요. **이미지 업로드 도구로 작업하려면** 1. 블루프린트 SDK 및 샘플 블루프린트에 대한 액세스를 제공하는 [오픈 소스 블루프린트 GitHub 리포지토리](https://github.com/aws/codecatalyst-blueprints)를 복제합니다. 작업 중인 터미널에서 다음 명령을 실행합니다. ``` git clone https://github.com/aws/codecatalyst-blueprints.git ``` 1. 다음 명령을 실행하여 블루프린트 GitHub 리포지토리로 이동합니다. ``` cd codecatalyst-blueprints ``` 1. 다음 명령을 실행하여 종속성을 설치합니다. ``` yarn && yarn build ``` 1. 다음 명령을 실행하여 최신 블루프린트 CLI 버전이 설치되어 있는지 확인합니다. ``` yarn upgrade @amazon-codecatalyst/blueprint-util.cli ``` 1. 이미지를 업로드하려는 S3 버킷을 사용하여 AWS 계정에 로그인합니다. 자세한 내용은 [AWS CLI 구성하기](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html) 및 [AWS 명령줄 인터페이스를 통해 로그인하기](https://docs.aws.amazon.com/signin/latest/userguide/command-line-sign-in.html)를 참조하세요. 1. CodeCatalyst 리포지토리의 루트에서 다음 명령을 실행하여 블루프린트 CLI를 사용하여 디렉터리로 이동합니다. ``` cd packages/utils/blueprint-cli ``` 1. 다음 명령을 실행하여 S3 버킷에 이미지를 업로드합니다. ``` yarn blueprint upload-image-public <./path/to/your/image> ``` 이미지의 URL이 생성됩니다. CloudFront 배포를 배포하는 데 시간이 다소 걸리므로 URL을 즉시 사용할 수 없습니다. 배포 상태를 확인하여 최신 배포 상태를 가져옵니다. 자세한 내용은 [배포 작업](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-working-with.html)을 참조하세요. # 스냅샷 테스트를 통한 인터페이스 변경 사항 평가 블루프린트의 여러 구성에서 생성된 스냅샷 테스트가 지원됩니다. 블루프린트는 블루프린트 작성자가 제공한 구성에 대한 [스냅샷 테스트](https://jestjs.io/docs/snapshot-testing)를 지원합니다. 구성은 블루프린트 루트에 있는 defaults.json 파일 위에 병합되는 부분 재정의입니다. 스냅샷 테스트가 활성화되고 구성되면 빌드 및 테스트 프로세스에서 지정된 구성을 합성하고 합성된 출력이 참조 스냅샷에서 변경되지 않았는지 확인합니다. 스냅샷 테스트 코드를 보려면 [CodeCatalyst blueprints GitHub repository](https://github.com/aws/codecatalyst-blueprints/blob/main/packages/utils/projen-blueprint/src/test-snapshot.ts#L12)를 참조하세요. **스냅샷 테스트 활성화** 1. `.projenrc.ts` 파일에서 스냅샷을 생성하려는 파일로 입력 객체를 ProjenBlueprint로 업데이트합니다. 예: ``` { .... blueprintSnapshotConfiguration: { snapshotGlobs: ['**', '!environments/**', '!aws-account-to-environment/**'], }, } ``` 1. 블루프린트를 재합성하여 블루프린트 프로젝트에서 TypeScript 파일을 생성합니다. 소스 파일은 Projen에서 유지 관리 및 재생성하므로 편집하지 마세요. 다음 명령을 사용합니다. ``` yarn projen ``` 1. `src/snapshot-configurations` 디렉터리로 이동하여 빈 객체가 있는 `default-config.json` 파일을 봅니다. 파일을 하나 이상의 자체 테스트 구성으로 업데이트하거나 교체합니다. 런 다음 각 테스트 구성은 프로젝트의 `defaults.json` 파일과 병합되어 합성되고 테스트할 때 스냅샷과 비교됩니다. 다음 명령을 사용하여 테스트합니다. ``` yarn test ``` 테스트 명령을 처음 사용하면 다음 메시지가 표시됩니다. `Snapshot Summary › NN snapshots written from 1 test suite` 후속 테스트 실행은 합성된 출력이 스냅샷에서 변경되지 않았는지 확인하고 다음 메시지를 표시합니다. `Snapshots: NN passed, NN total`. 의도적으로 블루프린트를 변경하여 다른 출력을 생성한 경우 다음 명령을 실행하여 참조 스냅샷을 업데이트합니다. ``` yarn test:update ``` 스냅샷은 각 실행 간에 합성된 출력이 일정할 것으로 기대합니다. 블루프린트가 다양한 파일을 생성하는 경우 스냅샷 테스트에서 해당 파일을 제외해야 합니다. `ProjenBluerpint` 입력 객체의 `blueprintSnapshotConfiguration` 객체를 업데이트하여 `snapshotGlobs` 속성을 추가합니다. `snapshotGlobs` 속성은 스냅샷 생성에 포함되거나 제외되는 파일을 결정하는 [globs](https://github.com/isaacs/node-glob#glob-primer) 배열입니다. **참고** globs의 기본 목록이 있습니다. 자체 목록을 지정하는 경우 기본 항목을 명시적으로 다시 가져와야 할 수 있습니다.