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

# 사용자 지정 헤더 설정
<a name="setting-custom-headers"></a>

Amplify 앱에 사용자 지정 HTTP 헤더를 지정하는 방법은 두 가지가 있습니다. Amplify 콘솔에서 헤더를 지정하거나 앱의 `customHttp.yml` 파일을 다운로드하고 편집한 후 프로젝트의 루트 디렉터리에 저장하여 헤더를 지정할 수 있습니다.

**앱에 대한 사용자 지정 헤더를 설정하고 콘솔에 저장하려면**

1. 에 로그인 AWS Management Console 하고 [Amplify 콘솔](https://console.aws.amazon.com/amplify/)을 엽니다.

1. 사용자 지정 헤더를 설정할 앱을 선택합니다.

1. 탐색 창에서 **호스팅**을 선택한 다음 **사용자 지정 헤더**를 선택합니다.

1. **사용자 지정 헤더** 페이지에서 **편집**을 선택합니다.

1. **사용자 지정 헤더 편집** 창에서 [사용자 지정 헤더 YAML 형식](custom-header-YAML-format.md)을 사용하여 사용자 지정 헤더의 정보를 입력합니다.

   1. `pattern`에 일치시킬 패턴을 입력합니다.

   1. `key`에 사용자 지정 헤더의 이름을 입력합니다.

   1. `value`에 사용자 지정 헤더의 값을 입력합니다.

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

1. 앱을 재배포하여 새 사용자 지정 헤더를 적용합니다.
   + CI/CD 앱의 경우, 배포할 브랜치로 이동한 다음 **이 버전 재배포**를 선택합니다. Git 리포지토리에서 새 빌드를 수행할 수도 있습니다.
   + 수동 배포 앱의 경우, Amplify 콘솔에서 앱을 다시 배포합니다.

**앱에 대한 사용자 지정 헤더를 설정하고 리포지토리의 루트에 저장하려면**

1. 에 로그인 AWS Management Console 하고 [Amplify 콘솔](https://console.aws.amazon.com/amplify/)을 엽니다.

1. 사용자 지정 헤더를 설정할 앱을 선택합니다.

1. 탐색 창에서 **호스팅**을 선택한 다음 **사용자 지정 헤더**를 선택합니다.

1. **사용자 지정 헤더** 페이지에서 **YML 다운로드**를 선택합니다.

1. 다운로드한 `customHttp.yml` 파일을 선택한 코드 편집기에서 열고 [사용자 지정 헤더 YAML 형식](custom-header-YAML-format.md)을 사용하여 사용자 지정 헤더에 대한 정보를 입력합니다.

   1. `pattern`에 일치시킬 패턴을 입력합니다.

   1. `key`에 사용자 지정 헤더의 이름을 입력합니다.

   1. `value`에 사용자 지정 헤더의 값을 입력합니다.

1. 편집된 `customHttp.yml` 파일을 프로젝트의 루트 디렉터리에 저장합니다. 모노레포로 작업하는 경우, 리포지토리의 루트에 `customHttp.yml` 파일을 저장합니다.

1. 앱을 재배포하여 새 사용자 지정 헤더를 적용합니다.
   + CI/CD 앱의 경우, 새 `customHttp.yml` 파일이 포함된 Git 리포지토리에서 새 빌드를 수행합니다.
   + 수동 배포 앱의 경우, Amplify 콘솔에서 앱을 다시 배포하고 업로드하는 아티팩트와 함께 새 `customHttp.yml` 파일을 포함합니다.

**참고**  
`customHttp.yml` 파일에 설정되고 앱의 루트 디렉터리에 배포된 사용자 지정 헤더는 Amplify 콘솔의 **사용자 지정 헤더** 섹션에 정의된 사용자 지정 헤더를 재정의합니다.

## 보안 사용자 지정 헤더 예제
<a name="example-security-headers"></a>

사용자 지정 보안 헤더는 HTTPS 실행, XSS 공격 예방 및 클릭재킹으로부터 브라우저 보호를 활성화합니다. 다음 YAML 구문을 사용하여 앱에 사용자 지정 보안 헤더를 적용할 수 있습니다.

```
customHeaders:
  - pattern: '**'
    headers:
      - key: 'Strict-Transport-Security'
        value: 'max-age=31536000; includeSubDomains'
      - key: 'X-Frame-Options'
        value: 'SAMEORIGIN'
      - key: 'X-XSS-Protection'
        value: '1; mode=block'
      - key: 'X-Content-Type-Options'
        value: 'nosniff'
      - key: 'Content-Security-Policy'
        value: "default-src 'self'"
```

## Cache-Control 사용자 지정 헤더 설정
<a name="example-cache-headers"></a>

Amplify로 호스팅되는 앱은 사용자가 정의하는 사용자 지정 헤더로 재정의하지 않는 한 오리진에서 전송되는 `Cache-Control` 헤더를 그대로 사용합니다. Amplify는 `200 OK` 상태 코드를 반환하는 성공적인 응답에 대해서만 Cache-Control 사용자 지정 헤더를 적용합니다. 이렇게 하면 오류 응답이 캐시되어 동일한 요청을 하는 다른 사용자에게 제공되는 것을 방지할 수 있습니다.

앱의 성능 및 배포 가용성을 더 잘 제어하도록 `s-maxage` 디렉티브를 수동으로 조정할 수 있습니다. 예를 들어 콘텐츠가 엣지에 캐시되는 시간을 늘리려면 `s-maxage`를 기본값인 600초(10분)보다 긴 값으로 업데이트하여 TTL(Time to Live)을 수동으로 늘릴 수 있습니다.

`s-maxage`에 사용자 지정 값을 지정하려면 다음 YAML 형식을 사용합니다. 이 예제에서는 관련 콘텐츠를 3,600초(1시간) 동안 엣지에 캐시된 상태로 유지합니다.

```
customHeaders:
  - pattern: '/img/*'
    headers:
      - key: 'Cache-Control' 
        value: 's-maxage=3600'
```

헤더로 애플리케이션 성능을 제어하는 방법에 대한 자세한 내용은 [Cache-Control 헤더를 사용하여 앱 성능 향상](Using-headers-to-control-cache-duration.md)을 참조하세요.