Amazon CodeCatalyst는 더 이상 신규 고객에게 공개되지 않습니다. 기존 고객은 정상적으로 서비스를 계속 이용할 수 있습니다. 자세한 내용은 [CodeCatalyst에서 마이그레이션하는 방법](migration.md) 단원을 참조하십시오.

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# 블루프린트에 환경 구성 요소 추가
<a name="comp-env-bp"></a>

사용자 지정 블루프린트 마법사는 마법사를 통해 노출된 `Options` 인터페이스에서 동적으로 생성됩니다. 블루프린트는 노출된 유형에서 사용자 인터페이스(UI) 구성 요소 생성을 지원합니다.

**Amazon CodeCatalyst 블루프린트 환경 구성 요소를 가져오려면**

다음을 `blueprint.ts` 파일에 추가합니다.

```
import {...} from '@amazon-codecatalyst/codecatalyst-environments'
```

**Topics**
+ [개발 환경 생성](#create-dev-env-bp)
+ [환경 목록](#list-env-bp)
+ [모의 인터페이스 예시](#examples-comp-env-bp)

## 개발 환경 생성
<a name="create-dev-env-bp"></a>

다음 예시에서는 애플리케이션을 클라우드에 배포하는 방법을 보여줍니다.

```
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` 파일에 전체 모의를 포함하는 것이 도움이 될 수 있습니다.

## 환경 목록
<a name="list-env-bp"></a>

`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"
  },
  ]
}
```

## 모의 인터페이스 예시
<a name="examples-comp-env-bp"></a>

### 간단한 모의 인터페이스
<a name="simple-comp-env-bp"></a>

```
{
    ...
    "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"
                ]
            }
        }
    }
}
```

### 복잡한 모의 인터페이스
<a name="complex-comp-env-bp"></a>

```
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'];
    };
  };
}
```

### 전체 모의 인터페이스
<a name="complete-comp-env-bp"></a>

```
{
  ...
  "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"
        ]
      }
    }
  },
}
```