

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Perlindungan miring untuk penerapan Amplify
<a name="skew-protection"></a>

Perlindungan kemiringan penerapan tersedia untuk Amplify aplikasi untuk menghilangkan masalah kemiringan versi antara klien dan server dalam aplikasi web. Saat menerapkan perlindungan miring ke aplikasi Amplify, Anda dapat memastikan bahwa klien Anda selalu berinteraksi dengan versi aset sisi server yang benar, terlepas dari kapan penerapan terjadi. 

Versi miring adalah tantangan umum bagi pengembang web. Ini terjadi ketika browser web menjalankan versi aplikasi yang sudah ketinggalan zaman dan server menjalankan yang baru. Perbedaan ini dapat menyebabkan perilaku yang tidak terduga, kesalahan, dan pengalaman terdegradasi bagi pengguna aplikasi. Fitur perlindungan miring penerapan Amplify menyematkan klien yang berjalan di browser web ke penerapan tertentu. Ini memastikan bahwa Amplify selalu melayani aset untuk penerapan tertentu, menjaga klien dan server tetap disinkronkan.

Fitur perlindungan miring Amplify dapat mengurangi kesalahan bagi pengguna aplikasi Anda saat Anda merilis penerapan baru. Ini juga dapat meningkatkan pengalaman pengembang dengan mengurangi waktu yang dihabiskan untuk mengelola masalah kompatibilitas mundur dan maju.

Detail fitur perlindungan miring:

**Jenis aplikasi yang didukung**  
Anda dapat menambahkan perlindungan miring ke aplikasi statis dan SSR yang dibuat dengan kerangka kerja apa pun yang didukung Amplify. Aplikasi dapat digunakan dari repositori Git atau penerapan manual.  
Anda tidak dapat menambahkan perlindungan miring ke aplikasi yang diterapkan ke `WEB_DYNAMIC` platform (Next.js versi 11 atau lebih lama).

**Durasi**  
Untuk aplikasi statis, Amplify melayani penerapan selama satu minggu. Untuk aplikasi SSR, kami menjamin perlindungan miring hingga delapan penerapan sebelumnya.

**Biaya**  
Tidak ada biaya tambahan untuk menambahkan perlindungan miring ke aplikasi.

**Pertimbangan kinerja**  
Ketika perlindungan miring diaktifkan untuk aplikasi, Amplify harus memperbarui konfigurasi cache CDN-nya. Oleh karena itu, Anda harus mengharapkan penerapan pertama Anda setelah mengaktifkan perlindungan miring memakan waktu hingga sepuluh menit.

**Topics**
+ [Mengkonfigurasi proteksi kemiringan penerapan untuk aplikasi Amplify](configure-skew-protection.md)
+ [Cara kerja perlindungan miring](skew-protection-headers.md)

# Mengkonfigurasi proteksi kemiringan penerapan untuk aplikasi Amplify
<a name="configure-skew-protection"></a>

Anda dapat menambah atau menghapus perlindungan kemiringan penerapan untuk aplikasi menggunakan konsol Amplify, the, atau. AWS Command Line Interface SDKs Fitur ini diterapkan di tingkat cabang. Hanya penerapan baru, yang dibuat setelah perlindungan miring diaktifkan untuk cabang, yang akan dilindungi miring.

Untuk menambah atau menghapus perlindungan kemiringan penerapan menggunakan AWS CLI or SDKs, gunakan bidang dan`CreateBranch.enableSkewProtection`. `UpdateBranch.enableSkewProtection` Untuk informasi selengkapnya, lihat [CreateBranch](https://docs.aws.amazon.com/amplify/latest/APIReference/API_CreateBranch.html)dan [UpdateBranch](https://docs.aws.amazon.com/amplify/latest/APIReference/API_UpdateBranch.html)di dokumentasi *referensi Amplify API*. 

Jika Anda ingin menghapus penerapan tertentu sehingga tidak lagi dilayani, gunakan `DeleteJob` API. Untuk informasi selengkapnya, lihat [DeleteJob](https://docs.aws.amazon.com/amplify/latest/APIReference/API_DeleteJob.html)di dokumentasi *referensi Amplify API*. 



Pada saat ini, Anda hanya dapat mengaktifkan perlindungan miring pada aplikasi yang sudah digunakan untuk Amplify Hosting. Gunakan petunjuk berikut untuk menambahkan perlindungan miring ke cabang menggunakan konsol Amplify.

**Aktifkan perlindungan miring untuk cabang aplikasi Amplify**

1. Masuk ke Konsol Manajemen AWS dan buka konsol Amplify di. [https://console.aws.amazon.com/amplify/](https://console.aws.amazon.com/amplify/)

1. Di halaman **Semua aplikasi**, pilih nama aplikasi yang diterapkan untuk mengaktifkan perlindungan miring.

1. Di panel navigasi, pilih **Pengaturan aplikasi**, lalu pilih **Pengaturan cabang**.

1. Di bagian **Cabang**, pilih nama cabang yang akan diperbarui.

1. Pada menu **Tindakan**, pilih **Aktifkan perlindungan miring**.

1. Di jendela konfirmasi, pilih **Konfirmasi**. Perlindungan miring sekarang diaktifkan untuk cabang.

1. Menerapkan ulang cabang aplikasi Anda. Hanya penerapan yang dilakukan setelah perlindungan miring diaktifkan yang dilindungi miring.

Gunakan petunjuk berikut untuk menghapus perlindungan miring dari cabang aplikasi menggunakan konsol Amplify.

**Hapus perlindungan miring dari cabang aplikasi Amplify**

1. Masuk ke Konsol Manajemen AWS dan buka konsol Amplify di. [https://console.aws.amazon.com/amplify/](https://console.aws.amazon.com/amplify/)

1. Di halaman **Semua aplikasi**, pilih nama aplikasi yang digunakan untuk menghapus perlindungan miring.

1. Di panel navigasi, pilih **Pengaturan aplikasi**, lalu pilih **Pengaturan cabang**.

1. Di bagian **Cabang**, pilih nama cabang yang akan diperbarui.

1. Pada menu **Tindakan**, pilih **Nonaktifkan perlindungan miring**. Perlindungan miring sekarang dinonaktifkan untuk cabang dan hanya konten terbaru yang akan disajikan.

# Cara kerja perlindungan miring
<a name="skew-protection-headers"></a>

Dalam kebanyakan kasus, perilaku default cookie \$1dpl akan melayani kebutuhan perlindungan miring Anda. Namun, dalam skenario lanjutan berikut, perlindungan miring lebih baik diaktifkan menggunakan parameter `X-Amplify-Dpl` header dan `dpl` kueri.
+ Memuat situs web Anda di beberapa tab browser secara bersamaan
+ Menggunakan pekerja layanan

Amplify mengevaluasi permintaan yang masuk dalam urutan berikut saat menentukan konten yang akan disajikan kepada klien:

1. **`X-Amplify-Dpl`header** — Aplikasi dapat menggunakan header ini untuk mengarahkan permintaan ke penerapan Amplify tertentu. Header permintaan ini dapat diatur dengan menggunakan nilai`process.env.AWS_AMPLIFY_DEPLOYMENT_ID`.

1. **`dpl`parameter kueri** - Aplikasi Next.js akan secara otomatis mengatur parameter kueri \$1dpl untuk permintaan ke aset sidik jari (file.js dan.css).

1. **\$1dpl cookie** — Ini adalah default untuk semua aplikasi yang dilindungi miring. Untuk browser tertentu, cookie yang sama dikirim untuk setiap tab browser atau instance yang berinteraksi dengan domain.

   Ketahuilah bahwa jika tab browser yang berbeda memiliki versi situs web yang berbeda yang dimuat, cookie \$1dpl dibagikan oleh semua tab. Dalam skenario ini, tidak mungkin untuk mencapai perlindungan kemiringan total dengan cookie \$1dpl dan Anda harus mempertimbangkan untuk menggunakan `X-Amplify-Dpl` header untuk perlindungan miring.

## X-Amplify-Dpl contoh header
<a name="skew-protection-header-example"></a>

Contoh berikut menunjukkan kode untuk halaman SSR Next.js yang mengakses perlindungan miring melalui header. `X-Amplify-Dpl` Halaman merender kontennya berdasarkan salah satu rute apinya. Penerapan untuk melayani ke rute api ditentukan dengan menggunakan `X-Amplify-Dpl` header, yang diatur ke nilai. `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>
}
```