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

# Amplify 배포를 위한 스큐 보호
<a name="skew-protection"></a>

배포 스큐 보호는 Amplify 애플리케이션에서 웹 애플리케이션의 클라이언트와 서버 간 버전 불일치 문제를 해결하기 위해 제공됩니다. Amplify 애플리케이션에 스큐 보호를 적용하면, 배포 시점과 관계없이 클라이언트가 항상 올바른 서버 측 자산 버전과 상호 작용하도록 보장할 수 있습니다.

버전 스큐는 웹 개발자들이 흔히 겪는 문제입니다. 이는 웹 브라우저가 오래된 애플리케이션 버전을 실행하는 동안 서버가 새로운 버전을 실행할 때 발생합니다. 이러한 불일치로 인해 예기치 않은 동작, 오류, 사용자 경험 저하를 초래할 수 있습니다. Amplify 배포 스큐 보호 기능은 웹 브라우저에서 실행되는 클라이언트를 특정 배포에 고정합니다. 이를 통해 Amplify는 항상 해당 배포에 대한 자산을 제공하며, 클라이언트와 서버를 동기화된 상태로 유지합니다.

Amplify의 스큐 보호 기능은 새로운 배포를 릴리스할 때 애플리케이션 사용자에게 발생할 수 있는 오류를 줄일 수 있습니다. 또한 개발자가 이전 버전과 새로운 버전 간 호환성 문제를 관리하는 데 소요되는 시간을 줄여 개발 경험을 개선할 수 있습니다.

스큐 보호 기능 세부 정보:

**지원되는 애플리케이션 유형**  
Amplify가 지원하는 모든 프레임워크로 생성된 정적 애플리케이션과 SSR 애플리케이션에 스큐 보호를 추가할 수 있습니다. 애플리케이션은 Git 리포지토리에서 배포하거나 수동 배포 방식으로 배포할 수 있습니다.  
`WEB_DYNAMIC` 플랫폼(Next.js 버전 11 이하)에 배포된 애플리케이션에는 스큐 보호를 추가할 수 없습니다.

**지속 시간**  
정적 애플리케이션의 경우, Amplify는 1주일간의 배포를 대상으로 보호합니다. SSR 애플리케이션의 경우, 최대 8개의 이전 배포에 대해 스큐 보호를 보장합니다.

**비용**  
애플리케이션에 스큐 보호를 추가해도 추가 비용은 발생하지 않습니다.

**성능 고려 사항**  
애플리케이션에 스큐 보호를 활성화하면 Amplify가 CDN 캐시 구성을 업데이트해야 합니다. 따라서 스큐 보호 활성화 후 첫 배포는 최대 10분 정도 소요될 수 있습니다.

**Topics**
+ [Amplify 애플리케이션의 배포 스큐 보호 구성](configure-skew-protection.md)
+ [스큐 보호 작동 방식](skew-protection-headers.md)

# Amplify 애플리케이션의 배포 스큐 보호 구성
<a name="configure-skew-protection"></a>

Amplify 콘솔 AWS Command Line Interface, 또는 SDKs. 이 기능은 브랜치 단위로 적용됩니다. 스큐 보호는 해당 브랜치에 대해 스큐 보호가 활성화된 후의 신규 배포에만 적용됩니다.

 AWS CLI 또는 SDKs를 사용하여 배포 스큐 보호를 추가하거나 제거하려면 `CreateBranch.enableSkewProtection` 및 `UpdateBranch.enableSkewProtection` 필드를 사용합니다. 자세한 내용은 *Amplify API 참조* 설명서의 [CreateBranch](https://docs.aws.amazon.com/amplify/latest/APIReference/API_CreateBranch.html) and [UpdateBranch](https://docs.aws.amazon.com/amplify/latest/APIReference/API_UpdateBranch.html)를 참조하세요.

더 이상 제공되지 않도록 특정 배포를 제거하려면 `DeleteJob` API를 사용합니다. 자세한 내용은 *Amplify API 참조* 설명서의 [DeleteJob](https://docs.aws.amazon.com/amplify/latest/APIReference/API_DeleteJob.html)을 참조하세요.



현재 Amplify Hosting에 이미 배포된 애플리케이션에서만 스큐 보호를 활성화할 수 있습니다. 다음 지침에 따라 Amplify 콘솔을 사용하여 브랜치에 스큐 보호를 추가합니다.

**Amplify 애플리케이션의 브랜치에 대한 스큐 보호 활성화**

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

1. **모든 앱** 페이지에서 스큐 보호를 활성화할 배포된 앱의 이름을 선택합니다.

1. 탐색 창에서 **앱 설정**, **브랜치 설정**을 차례로 선택합니다.

1. **브랜치** 섹션에서 업데이트할 브랜치의 이름을 선택합니다.

1. **작업** 메뉴에서 **스큐 보호 활성화**를 선택합니다.

1. 확인 창에서 **확인**을 선택합니다. 이제 해당 브랜치에 스큐 보호가 활성화됩니다.

1. 애플리케이션 브랜치를 재배포합니다. 스큐 보호는 활성화된 후의 배포에만 적용됩니다.

다음 지침에 따라 Amplify 콘솔을 사용하여 애플리케이션의 브랜치에서 스큐 보호를 제거합니다.

**Amplify 애플리케이션의 브랜치에서 스큐 보호 제거**

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

1. **모든 앱** 페이지에서 스큐 보호를 제거할 배포된 앱의 이름을 선택합니다.

1. 탐색 창에서 **앱 설정**, **브랜치 설정**을 차례로 선택합니다.

1. **브랜치** 섹션에서 업데이트할 브랜치의 이름을 선택합니다.

1. **작업** 메뉴에서 **스큐 보호 비활성화**를 선택합니다. 이제 브랜치의 스큐 보호가 비활성화되며 최신 콘텐츠만 제공됩니다.

# 스큐 보호 작동 방식
<a name="skew-protection-headers"></a>

대부분의 경우, \$1dpl 쿠키의 기본 동작만으로도 스큐 보호 요구 사항을 충족할 수 있습니다. 그러나 다음과 같은 고급 시나리오에서는 `X-Amplify-Dpl` 헤더와 `dpl` 쿼리 파라미터를 사용하여 스큐 보호를 활성화하는 것이 더 적합합니다.
+ 여러 브라우저 탭에서 동시에 웹사이트를 로드하는 경우
+ 서비스 작업자를 사용하는 경우

Amplify는 클라이언트에 제공할 콘텐츠를 결정할 때 들어오는 요청을 다음 순서로 평가합니다:

1. **`X-Amplify-Dpl` 헤더** - 애플리케이션은 이 헤더를 사용하여 요청을 특정 Amplify 배포로 전달할 수 있습니다. 이 요청 헤더는 `process.env.AWS_AMPLIFY_DEPLOYMENT_ID` 값을 사용하여 설정할 수 있습니다.

1. **`dpl` 쿼리 파라미터** - Next.js 애플리케이션은 지문 자산(.js 및 .css 파일) 요청에 대해 자동으로 `\$1dpl` 쿼리 파라미터를 설정합니다.

1. **\$1dpl 쿠키 **- 모든 스큐 보호 애플리케이션의 기본 설정입니다. 특정 브라우저에서는 동일한 도메인과 상호작용하는 모든 브라우저 탭이나 인스턴스에 동일한 쿠키가 전송됩니다.

   브라우저 탭마다 로드된 웹 사이트의 버전이 다른 경우 \$1dpl 쿠키는 모든 탭에서 공유됩니다. 이 경우 \$1dpl 쿠키만으로 완전한 스큐 보호를 구현할 수 없으므로, 스큐 보호가 필요한 경우 `X-Amplify-Dpl` 헤더를 사용하는 것이 좋습니다.

## X-Amplify-Dpl 헤더 예제
<a name="skew-protection-header-example"></a>

다음 예제는 Next.js SSR 페이지에서 `X-Amplify-Dpl` 헤더를 통해 스큐 보호를 사용하는 코드를 보여줍니다. 이 페이지는 하나의 api 경로를 기반으로 콘텐츠를 렌더링합니다. api 경로에 제공할 배포를 지정할 때 `X-Amplify-Dpl` 헤더를 사용하며, 헤더 값은 `process.env.AWS_AMPLIFY_DEPLOYMENT_ID`로 설정됩니다.

```
import { useEffect, useState } from 'react';

export default function MyPage({deploymentId}) {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('/api/hello', {
            headers: {
                'X-Amplify-Dpl': process.env.AWS_AMPLIFY_DEPLOYMENT_ID
            },
        })
        .then(res => res.json())
        .then(data => setData(data))
        .catch(error => console.error("error", error)) 
    }, []);

    return <div>
        {data ? JSON.stringify(data) : "Loading ... " }
    </div>
}
```