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

# Amazon Simple Storage Service와 구성 요소 및 자동화의 상호 작용
<a name="automations-s3"></a>

App Studio 앱에서 다양한 Amazon S3 작업을 호출할 수 있습니다. 예를 들어 간단한 관리자 패널을 생성하여 사용자 및 주문을 관리하고 Amazon S3에서 미디어를 표시할 수 있습니다. 간접 호출 작업을 사용하여 모든 Amazon S3 작업을 **간접 호출 AWS**할 수 있지만, Amazon S3 버킷 및 객체에서 공통 작업을 수행하기 위해 앱의 자동화에 추가할 수 있는 4개의 전용 Amazon S3 작업이 있습니다. 네 가지 작업과 해당 작업은 다음과 같습니다.
+ **객체 넣기**: `Amazon S3 PutObject` 작업을 사용하여 Amazon S3 버킷에 객체를 추가합니다.
+ **객체 가져오기**: `Amazon S3 GetObject` 작업을 사용하여 Amazon S3 버킷에서 객체를 검색합니다.
+ **객체 나열**: `Amazon S3 ListObjects` 작업을 사용하여 Amazon S3 버킷의 객체를 나열합니다.
+ **객체 삭제**: `Amazon S3 DeleteObject` 작업을 사용하여 Amazon S3 버킷에서 객체를 삭제합니다.

작업 외에도 애플리케이션의 페이지에 추가할 수 있는 **S3 업로드** 구성 요소가 있습니다. 사용자는이 구성 요소를 사용하여 업로드할 파일을 선택할 수 있으며 구성 요소는를 호출`Amazon S3 PutObject`하여 구성된 버킷 및 폴더에 파일을 업로드합니다. 이 자습서에서는 독립 실행형 **Put Object** 자동화 작업 대신이 구성 요소를 사용합니다. (독립 실행형 작업은 업로드 전후에 수행할 추가 로직 또는 작업이 포함된 보다 복잡한 시나리오에서 사용해야 합니다.)

## 사전 조건
<a name="automations-s3-prerequisites"></a>

이 안내서에서는 다음 사전 조건을 완료했다고 가정합니다.

1. Amazon S3를 App Studio와 성공적으로 통합하기 위해 Amazon S3 버킷, IAM 역할 및 정책, Amazon S3 커넥터를 생성하고 구성했습니다. 커넥터를 생성하려면 관리자 역할이 있어야 합니다. 자세한 내용은 [Amazon Simple Storage Service(Amazon S3)에 연결](connectors-s3.md) 단원을 참조하십시오.

## 빈 애플리케이션 생성
<a name="automations-s3-create-app"></a>

다음 단계를 수행하여이 가이드 전체에서 사용할 빈 애플리케이션을 생성합니다.

**빈 애플리케이션을 생성하려면**

1. 탐색 창에서 **내 애플리케이션을** 선택합니다.

1. **\+ 앱 생성을** 선택합니다.

1. **앱 생성** 대화 상자에서 애플리케이션에 이름을 지정하고 **처음부터 시작**을 선택한 **다음 다음을** 선택합니다.

1. **기존 데이터에 연결** 대화 상자에서 **건너뛰기를** 선택하여 애플리케이션을 생성합니다.

1. 새 **앱의 캔버스로 이동할 앱 편집**을 선택하면 구성 요소, 자동화 및 데이터를 사용하여 애플리케이션의 모양과 기능을 구성할 수 있습니다.

## 페이지 생성
<a name="automations-s3-create-pages"></a>

애플리케이션에서 3페이지를 생성하여 정보를 수집하거나 표시합니다.

**페이지를 생성하려면**

1. 필요한 경우 캔버스 상단의 **페이지** 탭을 선택합니다.

1. 왼쪽 탐색에는 앱으로 생성된 단일 페이지가 있습니다. **\+ 추가**를 두 번 선택하여 두 개의 페이지를 더 생성합니다. 탐색 창에 총 3개의 페이지가 표시되어야 합니다.

1. 다음 단계를 수행하여 **Page1** 페이지의 이름을 업데이트합니다.

   1. 줄임표 아이콘을 선택하고 **페이지 속성을** 선택합니다.

   1. 오른쪽 **속성** 메뉴에서 연필 아이콘을 선택하여 이름을 편집합니다.

   1. **FileList**를 입력하고 **Enter** 키를 누릅니다.

1. 이전 단계를 반복하여 다음과 같이 두 번째 및 세 번째 페이지를 업데이트합니다.
   + **Page2**의 이름을 로 바꿉니다**UploadFile**.
   + **Page3**의 이름을 로 바꿉니다**FailUpload**.

이제 앱에는 왼쪽 페이지 패널에 표시된 **FileList**, **UploadFile** 및 **FailUpload**라는 세 페이지가 있어야 **합니다**.

다음으로 Amazon S3와 상호 작용하는 자동화를 생성하고 구성합니다.

## 자동화 생성 및 구성
<a name="automations-s3-automations"></a>

Amazon S3와 상호 작용하는 애플리케이션의 자동화를 생성합니다. 다음 절차에 따라 다음 자동화를 생성합니다.
+ 테이블 구성 요소를 채우는 데 사용되는 Amazon S3 버킷의 객체를 나열하는 **getFiles** 자동화입니다.
+ 테이블 구성 요소에 삭제 버튼을 추가하는 데 사용되는 Amazon S3 버킷에서 객체를 삭제하는 **deleteFile** 자동화입니다.
+ Amazon S3 버킷에서 객체를 가져와 표시하는 **viewFile** 자동화로, 테이블 구성 요소에서 선택한 단일 객체에 대한 세부 정보를 표시하는 데 사용됩니다.

### `getFiles` 자동화 생성
<a name="automations-s3-get-files"></a>

지정된 Amazon S3 버킷의 파일을 나열하는 자동화를 생성합니다.

1. 캔버스 상단의 **자동화** 탭을 선택합니다.

1. **\+ 자동화 추가**를 선택합니다.

1. 오른쪽 패널에서 **속성을** 선택합니다.

1. 연필 아이콘을 선택하여 자동화 이름을 업데이트합니다. **getFiles**를 입력하고 **Enter** 키를 누릅니다.

1. 다음 단계를 수행하여 **객체 나열** 작업을 추가합니다.

   1. 오른쪽 패널에서 **작업을** 선택합니다.

   1. **객체 나열**을 선택하여 작업을 추가합니다. 작업의 이름은 이어야 합니다`ListObjects1`.

1. 다음 단계를 수행하여 작업을 구성합니다.

   1. 캔버스에서 작업을 선택하여 오른쪽 **속성** 메뉴를 엽니다.

   1. **커넥터**에서 사전 요구 사항에서 생성한 Amazon S3 커넥터를 선택합니다.

   1. **구성**에 다음 텍스트를 입력하고 {{bucket\_name}}을 사전 조건에서 생성한 버킷으로 바꿉니다.

      ```
      {
        "Bucket": "{{bucket_name}}",
        "Prefix": ""
      }
      ```
**참고**  
`Prefix` 필드를 사용하여 지정된 문자열로 시작하는 객체에 대한 응답을 제한할 수 있습니다.

1. 이 자동화의 출력은 테이블 구성 요소를 Amazon S3 버킷의 객체로 채우는 데 사용됩니다. 그러나 자동화는 기본적으로 출력을 생성하지 않습니다. 다음 단계를 수행하여 자동화 출력을 생성하도록 자동화를 구성합니다.

   1. 왼쪽 탐색에서 **getFiles** 자동화를 선택합니다.

   1. 오른쪽 **속성** 메뉴의 **자동화 출력**에서 **\+ 출력 추가**를 선택합니다.

   1. **출력**에를 입력합니다**\{\{results.ListObjects1.Contents\}\}**. 이 표현식은 작업의 내용을 반환하며 이제 테이블 구성 요소를 채우는 데 사용할 수 있습니다.

### `deleteFile` 자동화 생성
<a name="automations-s3-delete-file"></a>

지정된 Amazon S3 버킷에서 객체를 삭제하는 자동화를 생성합니다.

1. 왼쪽 **자동화** 패널에서 **\+ 추가**를 선택합니다.

1. **\+ 자동화 추가**를 선택합니다.

1. 오른쪽 패널에서 **속성을** 선택합니다.

1. 연필 아이콘을 선택하여 자동화 이름을 업데이트합니다. **deleteFile**를 입력하고 **Enter** 키를 누릅니다.

1. 다음 단계를 수행하여 자동화에 데이터를 전달하는 데 사용되는 자동화 파라미터를 추가합니다.

   1. 오른쪽 **속성** 메뉴의 **자동화 파라미터**에서 **\+ 추가**를 선택합니다.

   1. 연필 아이콘을 선택하여 자동화 파라미터를 편집합니다. 파라미터 이름을 로 업데이트**fileName**하고 **Enter** 키를 누릅니다.

1. 다음 단계를 수행하여 **객체 삭제** 작업을 추가합니다.

   1. 오른쪽 패널에서 **작업을** 선택합니다.

   1. **객체 삭제**를 선택하여 작업을 추가합니다. 작업의 이름은 이어야 합니다`DeleteObject1`.

1. 다음 단계를 수행하여 작업을 구성합니다.

   1. 캔버스에서 작업을 선택하여 오른쪽 **속성** 메뉴를 엽니다.

   1. **커넥터**에서 사전 요구 사항에서 생성한 Amazon S3 커넥터를 선택합니다.

   1. **구성**에 다음 텍스트를 입력하고 {{bucket\_name}}을 사전 조건에서 생성한 버킷으로 바꿉니다.

      ```
      {
        "Bucket": "{{bucket_name}}",
        "Key": params.fileName
      }
      ```

### `viewFile` 자동화 생성
<a name="automations-s3-view-file"></a>

지정된 Amazon S3 버킷에서 단일 객체를 검색하는 자동화를 생성합니다. 나중에 객체를 표시하도록 파일 뷰어 구성 요소로이 자동화를 구성합니다.

1. 왼쪽 **자동화** 패널에서 **\+ 추가**를 선택합니다.

1. **\+ 자동화 추가**를 선택합니다.

1. 오른쪽 패널에서 **속성을** 선택합니다.

1. 연필 아이콘을 선택하여 자동화 이름을 업데이트합니다. **viewFile**를 입력하고 **Enter** 키를 누릅니다.

1. 다음 단계를 수행하여 자동화에 데이터를 전달하는 데 사용되는 자동화 파라미터를 추가합니다.

   1. 오른쪽 **속성** 메뉴의 **자동화 파라미터**에서 **\+ 추가**를 선택합니다.

   1. 연필 아이콘을 선택하여 자동화 파라미터를 편집합니다. 파라미터 이름을 로 업데이트**fileName**하고 **Enter** 키를 누릅니다.

1. 다음 단계를 수행하여 **객체 가져오기** 작업을 추가합니다.

   1. 오른쪽 패널에서 **작업을** 선택합니다.

   1. **객체 가져오기**를 선택하여 작업을 추가합니다. 작업의 이름은 이어야 합니다`GetObject1`.

1. 다음 단계를 수행하여 작업을 구성합니다.

   1. 캔버스에서 작업을 선택하여 오른쪽 **속성** 메뉴를 엽니다.

   1. **커넥터**에서 사전 요구 사항에서 생성한 Amazon S3 커넥터를 선택합니다.

   1. **구성**에 다음 텍스트를 입력하고 {{bucket\_name}}을 사전 조건에서 생성한 버킷으로 바꿉니다.

      ```
      {
        "Bucket": "{{bucket_name}}",
        "Key": params.fileName
      }
      ```

1. 기본적으로 자동화는 출력을 생성하지 않습니다. 다음 단계를 수행하여 자동화 출력을 생성하도록 자동화를 구성합니다.

   1. 왼쪽 탐색에서 **viewFile** 자동화를 선택합니다.

   1. 오른쪽 **속성** 메뉴의 **자동화 출력**에서 **\+ 출력 추가**를 선택합니다.

   1. **출력**에를 입력합니다**\{\{results.GetObject1.Body.transformToWebStream()\}\}**. 이 표현식은 작업의 내용을 반환합니다.
**참고**  
다음과 같은 `S3 GetObject` 방법으로의 응답을 읽을 수 있습니다.  
`transformToWebStream`: 데이터를 검색하는 데 사용해야 하는 스트림을 반환합니다. 자동화 출력으로 사용되는 경우 자동화가 이를 처리하고 출력을 이미지 또는 PDF 뷰어 구성 요소의 데이터 소스로 사용할 수 있습니다. 와 같은 다른 작업에 대한 입력으로도 사용할 수 있습니다`S3 PutObject`.
`transformToString`: 자동화의 원시 데이터를 반환하며, 파일에 JSON 데이터와 같은 텍스트 콘텐츠가 포함된 경우 JavaScript 작업에 사용해야 합니다. 다음과 같이 대기해야 합니다. `await results.GetObject1.Body.transformToString();` 
`transformToByteArray`: 부호 없는 8비트 정수의 배열을 반환합니다. 이 응답은 바이너리 데이터의 저장 및 조작을 허용하는 바이트 배열의 목적을 수행합니다. 다음과 같이 대기해야 합니다. `await results.GetObject1.Body.transformToByteArray();` 

그런 다음 이전에 생성한 페이지에 구성 요소를 추가하고 사용자가 앱을 사용하여 파일을 보고 삭제할 수 있도록 자동화로 구성해야 합니다.

## 페이지 구성 요소 추가 및 구성
<a name="automations-s3-components"></a>

이제 앱의 비즈니스 로직과 기능을 정의하는 자동화를 생성했으므로 구성 요소를 생성하고 둘 다 연결합니다.

### **FileList** 페이지에 구성 요소 추가
<a name="automations-s3-components-filelist-page"></a>

이전에 생성한 **FileList** 페이지는 구성된 Amazon S3 버킷의 파일 목록과 목록에서 선택한 파일에 대한 세부 정보를 표시하는 데 사용됩니다. 이렇게 하려면 다음을 수행합니다.

1. 테이블 구성 요소를 생성하여 파일 목록을 표시합니다. 이전에 생성한 **getFiles** 자동화의 출력으로 채워지도록 테이블의 행을 구성합니다.

1. PDF 뷰어 구성 요소를 생성하여 단일 PDF를 표시합니다. 버킷에서 파일을 가져오기 위해 이전에 생성한 **viewFile** 자동화를 사용하여 테이블에서 선택한 파일을 보도록 구성 요소를 구성합니다.

****FileList** 페이지에 구성 요소를 추가하려면**

1. 캔버스 상단의 **페이지** 탭을 선택합니다.

1. 왼쪽 **페이지** 패널에서 **FileList** 페이지를 선택합니다.

1. 오른쪽 **구성 요소** 페이지에서 **테이블** 구성 요소를 찾아 캔버스 중앙으로 끕니다.

1. 페이지에 방금 추가한 테이블 구성 요소를 선택합니다.

1. 오른쪽 **속성** 메뉴에서 **소스** 드롭다운을 선택하고 **자동화**를 선택합니다.

1. **자동화** 드롭다운을 선택하고 **getFiles** 자동화를 선택합니다. 테이블은 **getFiles** 자동화의 출력을 콘텐츠로 사용합니다.

1. 파일 이름으로 채울 열을 추가합니다.

   1. 오른쪽 **속성** 메뉴의 **열** 옆에 있는 **\+ 추가**를 선택합니다.

   1. 방금 추가된 **Column1** 열 오른쪽에 있는 화살표 아이콘을 선택합니다.

   1. **열 레이블**의 경우 열의 이름을 로 바꿉니다**Filename**.

   1. **값**에 **\{\{currentRow.Key\}\}**를 입력합니다.

   1. 패널 상단의 화살표 아이콘을 선택하여 기본 **속성** 패널로 돌아갑니다.

1. 테이블 작업을 추가하여 행에서 파일을 삭제합니다.

   1. 오른쪽 **속성** 메뉴의 **작업** 옆에 있는 **\+ 추가**를 선택합니다.

   1. **작업**에서 **버튼**의 이름을 로 변경합니다**Delete**.

   1. 방금 이름이 변경된 **삭제** 작업 오른쪽에 있는 화살표 아이콘을 선택합니다.

   1. **클릭 시** **\+ 작업 추가**를 선택하고 **자동화 호출을** 선택합니다.

   1. 추가한 작업을 선택하여 구성합니다.

   1. **함수 이름**에 **DeleteRecord**를 입력합니다.

   1. **자동화 호출**에서를 선택합니다**deleteFile**.

   1. 파라미터 텍스트 상자에를 입력합니다**\{\{currentRow.Key\}\}**.

   1. **값**에 **\{\{currentRow.Key\}\}**를 입력합니다.

1. 오른쪽 패널에서 **구성 요소를** 선택하여 구성 요소 메뉴를 봅니다. 파일을 표시하는 두 가지 옵션이 있습니다.
   + `.png`, `.jpeg`또는 `.jpg` 확장자가 있는 파일을 볼 수 있는 **이미지 뷰어**입니다.
   + **PDF 파일을 볼 수 있는 PDF 뷰어** 구성 요소입니다.

   이 자습서에서는 **PDF 뷰어** 구성 요소를 추가하고 구성합니다.

1. **PDF 뷰어** 구성 요소를 추가합니다.

   1. 오른쪽 **구성 요소** 페이지에서 **PDF 뷰어** 구성 요소를 찾아 테이블 구성 요소 아래의 캔버스로 끕니다.

   1. 방금 추가된 **PDF 뷰어** 구성 요소를 선택합니다.

   1. 오른쪽 **속성** 메뉴에서 **소스** 드롭다운을 선택하고 **자동화**를 선택합니다.

   1. **자동화** 드롭다운을 선택하고 **viewFile** 자동화를 선택합니다. 테이블은 **viewFile** 자동화의 출력을 콘텐츠로 사용합니다.

   1. 파라미터 텍스트 상자에를 입력합니다**\{\{ui.table1.selectedRow["Filename"]\}\}**.

   1. 오른쪽 패널에는 **파일 이름** 필드도 있습니다. 이 필드의 값은 PDF 뷰어 구성 요소의 헤더로 사용됩니다. 이전 단계와 동일한 텍스트를 입력합니다**\{\{ui.table1.selectedRow["Filename"]\}\}**.

### **UploadFile** 페이지에 구성 요소 추가
<a name="automations-s3-components-uploadfile-page"></a>

**UploadFile** 페이지에는 구성된 Amazon S3 버킷에 파일을 선택하고 업로드하는 데 사용할 수 있는 파일 선택기가 포함되어 있습니다. 사용자가 파일을 선택하고 **업로드하는 데 사용할 수 있는 S3 ** 업로드 구성 요소를 페이지에 추가합니다.

1. 왼쪽 **페이지** 패널에서 **UploadFile** 페이지를 선택합니다.

1. 오른쪽 **구성 요소** 페이지에서 **S3 업로드** 구성 요소를 찾아 캔버스 중앙으로 끕니다.

1. 페이지에 방금 추가한 S3 업로드 구성 요소를 선택합니다.

1. 오른쪽 **속성** 메뉴에서 구성 요소를 구성합니다.

   1. **커넥터** 드롭다운에서 사전 요구 사항에서 생성된 Amazon S3 커넥터를 선택합니다.

   1. **버킷**에 Amazon S3 버킷의 이름을 입력합니다.

   1. **파일 이름**에 **\{\{ui.s3Upload1.files[0]?.nameWithExtension\}\}**를 입력합니다.

   1. **최대 파일 크기****5**에 텍스트 상자에를 입력하고 드롭다운에서 **MB**가 선택되어 있는지 확인합니다.

   1. **트리거** 섹션에서 다음 단계를 수행하여 업로드 성공 또는 실패 후 실행되는 작업을 추가합니다.

      업로드 성공 후 실행되는 작업을 추가하려면:

      1. **성공 시** **\+ 작업 추가**를 선택하고 **탐색**을 선택합니다.

      1. 추가한 작업을 선택하여 구성합니다.

      1. **탐색 유형**에서 **페이지를** 선택합니다.

      1. **이동에서**를 선택합니다**FileList**.

      1. 패널 상단의 화살표 아이콘을 선택하여 기본 **속성** 패널로 돌아갑니다.

      업로드 실패 후 실행되는 작업을 추가하려면:

      1. **실패 시** **\+ 작업 추가**를 선택하고 **탐색**을 선택합니다.

      1. 추가한 작업을 선택하여 구성합니다.

      1. **탐색 유형**에서 **페이지를** 선택합니다.

      1. **이동에서**를 선택합니다**FailUpload**.

      1. 패널 상단의 화살표 아이콘을 선택하여 기본 **속성** 패널로 돌아갑니다.

### **FailUpload** 페이지에 구성 요소 추가
<a name="automations-s3-components-failupload-page"></a>

**FailUpload** 페이지는 사용자에게 업로드 실패를 알리는 텍스트 상자가 포함된 간단한 페이지입니다.

1. 왼쪽 **페이지** 패널에서 **FailUpload** 페이지를 선택합니다.

1. 오른쪽 **구성 요소** 페이지에서 **텍스트** 구성 요소를 찾아 캔버스 중앙으로 끕니다.

1. 페이지에 방금 추가한 텍스트 구성 요소를 선택합니다.

1. 오른쪽 **속성** 메뉴의 **값에**를 입력합니다**Failed to upload, try again**.

## 앱 보안 설정 업데이트
<a name="automations-s3-components-app-security-settings"></a>

App Studio의 모든 애플리케이션에는 외부 미디어 또는 리소스를 제한하는 데 사용할 수 있는 콘텐츠 보안 설정 또는 객체를 업로드할 수 있는 Amazon S3의 도메인이 있습니다. 기본 설정은 모든 도메인을 차단하는 것입니다. 애플리케이션에서 Amazon S3에 객체를 업로드하려면 객체를 업로드할 도메인을 허용하도록 설정을 업데이트해야 합니다.

**도메인이 Amazon S3에 객체를 업로드하도록 허용하려면**

1. **앱 설정** 탭을 선택합니다.

1. **콘텐츠 보안 설정** 탭을 선택합니다.

1. **Connect 소스**에서 **모든 연결 허용**을 선택합니다.

1. **저장**을 선택합니다.

## 다음 단계: 테스트용 애플리케이션 미리 보기 및 게시
<a name="automations-s3-preview-publish-test"></a>

이제 애플리케이션을 테스트할 준비가 되었습니다. 애플리케이션 미리 보기 및 게시에 대한 자세한 내용은 섹션을 참조하세요[애플리케이션 미리 보기, 게시 및 공유](applications-preview-publish-share.md).