Menggunakan pengalihan

Pengalihan memungkinkan server web untuk mengubah rute navigasi dari satu URL ke URL lainnya. Alasan umum untuk menggunakan pengalihan termasuk untuk menyesuaikan tampilan URL, untuk menghindari tautan rusak, untuk memindahkan lokasi hosting aplikasi atau situs tanpa mengubah alamatnya, dan untuk mengubah URL yang diminta ke formulir yang dibutuhkan oleh aplikasi web.

Jenis pengalihan

Amplify mendukung jenis pengalihan berikut di konsol.

Pengalihan permanen (301)

Pengalihan 301 ditujukan untuk perubahan permanen pada tujuan alamat web. Riwayat peringkat mesin pencari alamat asli berlaku untuk alamat tujuan baru. Pengalihan terjadi di sisi klien sehingga bilah navigasi peramban menunjukkan alamat tujuan setelah pengalihan.

Alasan umum penggunaan pengalihan 301 meliputi:

• Untuk menghindari tautan rusak ketika alamat halaman berubah.

• Untuk menghindari tautan rusak ketika pengguna membuat kesalahan ketik yang dapat diprediksi di alamat.

Pengalihan sementara (302)

Pengalihan 302 ditujukan untuk perubahan sementara pada tujuan alamat web. Riwayat peringkat mesin pencari alamat asli tidak berlaku untuk alamat tujuan baru. Pengalihan terjadi di sisi klien sehingga bilah navigasi peramban menunjukkan alamat tujuan setelah pengalihan.

Alasan umum penggunaan pengalihan 302 meliputi:

• Untuk memberikan tujuan detour saat perbaikan dilakukan ke alamat asli.

• Untuk menyediakan halaman uji untuk perbandingan A/B dari antarmuka pengguna.

  catatan

  Jika aplikasi Anda menampilkan respons 302 yang tidak terduga, kesalahan kemungkinan disebabkan oleh perubahan yang Anda buat pada konfigurasi pengalihan dan header khusus aplikasi Anda. Untuk mengatasi masalah ini, verifikasi bahwa header kustom Anda valid, lalu aktifkan kembali aturan penulisan ulang 404 default untuk aplikasi Anda.

Menulis ulang (200)

Pengalihan 200 (penulisan ulang) ditujukan untuk menampilkan konten dari alamat tujuan seolah-olah ditampilkan dari alamat asli. Riwayat peringkat mesin pencari terus berlaku untuk alamat asli. Pengalihan terjadi di sisi server sehingga bilah navigasi peramban menunjukkan alamat asli setelah pengalihan. Alasan umum penggunaan pengalihan 200 meliputi:

• Untuk mengalihkan seluruh situs ke lokasi hosting baru tanpa mengubah alamat situs.

• Untuk mengalihkan semua lalu lintas ke aplikasi web halaman tunggal (SPA) ke halaman index.html agar ditangani oleh fungsi router sisi klien.

Tidak Ditemukan (404)

Pengalihan 404 terjadi ketika permintaan mengarah ke alamat yang tidak ada. Halaman tujuan 404 ditampilkan, alih-alih halaman yang diminta. Alasan umum terjadinya pengalihan 404 meliputi:

• Untuk menghindari pesan tautan rusak ketika pengguna memasukkan URL buruk.

• Untuk mengarahkan permintaan ke halaman yang tidak ada di aplikasi web ke halaman index.html agar ditangani oleh fungsi router sisi klien.

Membuat dan mengedit pengalihan

Anda dapat membuat dan mengedit pengalihan untuk aplikasi di konsol Amplify. Sebelum memulai, Anda memerlukan informasi berikut tentang bagian-bagian pengalihan.

Alamat asli

Alamat yang diminta pengguna.

Alamat tujuan

Alamat yang benar-benar menyajikan konten yang dilihat pengguna.

Jenis pengalihan

Jenis termasuk pengalihan permanen (301), pengalihan sementara (302), penulisan ulang (200), atau tidak ditemukan (404).

Kode negara dua huruf (opsional)

Nilai yang dapat Anda sertakan untuk mengelompokkan pengalaman pengguna aplikasi berdasarkan wilayah geografis.

Untuk membuat pengalihan di konsol Amplify

1. Masuk ke AWS Management Console dan buka konsol Amplify.

2. Pilih aplikasi yang ingin Anda buat pengalihan.

3. Di panel navigasi, pilih Hosting, lalu pilih Menulis ulang dan mengarahkan ulang.

4. Pada halaman Menulis ulang dan mengarahkan ulang, pilih Kelola pengalihan.

5. Prosedur untuk menambahkan pengalihan bervariasi tergantung pada apakah Anda ingin menambahkan aturan satu per satu atau melakukan pengeditan massal:

   • Untuk membuat pengalihan individual, pilih Tambahkan penulisan ulang.

     1. Untuk alamat Sumber, masukkan alamat asli yang diminta pengguna.

     2. Untuk alamat Target, masukkan alamat tujuan yang merender konten ke pengguna.

     3. Untuk Jenis, pilih jenis pengalihan dari daftar.

     4. (Opsional) Untuk kode Negara, masukkan kondisi kode negara dua huruf.

   • Untuk mengedit pengalihan massal, pilih Buka editor teks.

     1. Tambahkan atau perbarui pengalihan secara manual di Menulis ulang dan mengarahkan editor JSON.

6. Pilih Simpan.

Urutan pengalihan

Pengalihan diterapkan dari bagian atas daftar ke bawah. Pastikan bahwa urutan yang dibuat memberikan efek yang diinginkan. Sebagai contoh, urutan pengalihan berikut menyebabkan semua permintaan untuk path tertentu di /docs/ melakukan pengalihan ke path yang sama di /documents/, kecuali /docs/specific-filename.html yang melakukan pengalihan ke /documents/different-filename.html:

/docs/specific-filename.html /documents/different-filename.html 301
/docs/<*> /documents/<*>

Urutan pengalihan berikut mengabaikan pengalihan specific-filename.html ke different-filename.html:

/docs/<*> /documents/<*>
/docs/specific-filename.html /documents/different-filename.html 301

Parameter kueri

Anda dapat menggunakan parameter kueri untuk kontrol lebih besar atas kecocokan URL Anda. Amplify meneruskan semua parameter kueri ke jalur tujuan untuk pengalihan 301 dan 302, dengan pengecualian berikut:

• Jika alamat asli menyertakan string kueri yang disetel ke nilai tertentu, Amplify tidak meneruskan parameter kueri. Dalam hal ini, pengalihan hanya berlaku untuk permintaan ke URL tujuan dengan nilai kueri yang ditentukan.

• Jika alamat tujuan untuk aturan pencocokan memiliki parameter kueri, parameter kueri tidak diteruskan. Misalnya, jika alamat tujuan untuk pengalihan adalahhttps://example-target.com?q=someParam, parameter kueri tidak akan diteruskan.

Pengalihan dan penulisan ulang sederhana

Bagian ini mencakup kode contoh untuk skenario pengalihan umum.

catatan

Pencocokan domain alamat asli tidak peka huruf besar/kecil.

Anda dapat menggunakan kode contoh berikut untuk mengalihkan secara permanen suatu halaman ke alamat baru.

Alamat asli	Alamat Tujuan	Jenis Pengalihan	Kode Negara
/original.html	/destination.html	permanent redirect (301)

^{JSON [{"source": "/original.html", "status": "301", "target": "/destination.html", "condition": null}]}

Anda dapat menggunakan kode contoh berikut untuk mengalihkan path di suatu folder ke path yang sama di folder berbeda.

Alamat asli	Alamat Tujuan	Jenis Pengalihan	Kode Negara
/docs/<*>	/documents/<*>	permanent redirect (301)

^{JSON [{"source": "/docs/<*>", "status": "301", "target": "/documents/<*>", "condition": null}]}

Anda dapat menggunakan kode contoh berikut untuk mengalihkan semua lalu lintas ke index.html sebagai penulisan ulang. Dalam skenario ini, penulisan ulang menampilkan kepada pengguna bahwa pengguna telah sampai di alamat asli.

Alamat asli	Alamat Tujuan	Jenis Pengalihan	Kode Negara
/<*>	/index.html	rewrite (200)

^{JSON [{"source": "/<*>", "status": "200", "target": "/index.html", "condition": null}]}

Anda dapat menggunakan kode contoh berikut untuk menggunakan penulisan ulang guna mengubah subdomain yang ditampilkan kepada pengguna.

Alamat asli	Alamat Tujuan	Jenis Pengalihan	Kode Negara
https://mydomain.com	https://www.mydomain.com	rewrite (200)

^{JSON [{"source": "https://mydomain.com", "status": "200", "target": "https://www.mydomain.com", "condition": null}]}

Anda dapat menggunakan kode contoh berikut untuk mengarahkan ke domain yang berbeda dengan awalan jalur.

Alamat asli	Alamat Tujuan	Jenis Pengalihan	Kode Negara
https://mydomain.com	https://www.mydomain.com/documents	temporary redirect (302)

^{JSON [{"source": "https://mydomain.com", "status": "302", "target": "https://www.mydomain.com/documents/", "condition": null}]}

Anda dapat menggunakan kode contoh berikut untuk mengalihkan path di folder yang tidak dapat ditemukan ke halaman 404 kustom.

Alamat asli	Alamat Tujuan	Jenis Pengalihan	Kode Negara
/<*>	/404.html	not found (404)

^{JSON [{"source": "/<*>", "status": "404", "target": "/404.html", "condition": null}]}

Pengalihan untuk aplikasi web halaman tunggal (SPA)

Sebagian besar kerangka kerja SPA mendukung HTML5 history.pushState () untuk mengubah lokasi browser tanpa memulai permintaan server. Ini dapat digunakan untuk pengguna yang memulai perjalanan dari root (atau /index.html), tetapi tidak dapat digunakan untuk pengguna yang menavigasi langsung ke halaman lain.

Contoh berikut menggunakan ekspresi reguler untuk mengatur penulisan ulang 200 untuk semua file ke index.html, kecuali untuk ekstensi file yang ditentukan dalam ekspresi reguler.

Alamat asli	Alamat Tujuan	Jenis Pengalihan	Kode Negara
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>	/index.html	200

^{JSON [{"source": "</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>", "status": "200", "target": "/index.html", "condition": null}]}

Penulisan ulang proksi balik

Contoh berikut menggunakan penulisan ulang ke konten proxy dari lokasi lain sehingga tampak bagi pengguna bahwa domain tidak berubah.

Alamat asli	Alamat Tujuan	Jenis Pengalihan	Kode Negara
/images/<*>	https://images.otherdomain.com/<*>	rewrite (200)

^{JSON [{"source": "/images/<*>", "status": "200", "target": "https://images.otherdomain.com/<*>", "condition": null}]}

Garis miring di belakang dan URL bersih

Untuk membuat struktur URL bersih, misalnya about, alih-alih about.html, generator situs statis, seperti Hugo, membuat direktori untuk halaman dengan index.html (/about/index.html). Amplify secara otomatis membuat URL bersih dengan menambahkan garis miring saat diperlukan. Tabel berikut menampilkan berbagai skenario:

Input pengguna di peramban	URL di bilah alamat	Dokumen ditampilkan
/about	/about	/about.html
/about (when about.html returns 404)	/about/	/about/index.html
/about/	/about/	/about/index.html

Placeholder

Anda dapat menggunakan kode contoh berikut untuk mengalihkan path di struktur folder tertentu ke struktur yang cocok di folder lain.

Alamat asli	Alamat Tujuan	Jenis Pengalihan	Kode Negara
/docs/<year>/<month>/<date>/<itemid>	/documents/<year>/<month>/<date>/<itemid>	permanent redirect (301)

^{JSON [{"source": "/docs/<year>/<month>/<date>/<itemid>", "status": "301", "target": "/documents/<year>/<month>/<date>/<itemid>", "condition": null}]}

String kueri dan parameter path

Anda dapat menggunakan kode contoh berikut untuk mengalihkan path ke folder dengan nama yang sesuai dengan nilai elemen string kueri di alamat asli:

Alamat asli	Alamat Tujuan	Jenis Pengalihan	Kode Negara
/docs?id=<my-blog-id-value	/documents/<my-blog-post-id-value>	permanent redirect (301)

^{JSON [{"source": "/docs?id=<my-blog-id-value>", "status": "301", "target": "/documents/<my-blog-id-value>", "condition": null}]}

catatan

Amplify meneruskan semua parameter string kueri ke jalur tujuan untuk pengalihan 301 dan 302. Namun, jika alamat asli menyertakan string kueri yang disetel ke nilai tertentu, seperti yang ditunjukkan dalam contoh ini, Amplify tidak meneruskan parameter kueri. Dalam hal ini, pengalihan hanya berlaku untuk permintaan ke alamat tujuan dengan nilai id kueri yang ditentukan.

Anda dapat menggunakan kode contoh berikut untuk mengalihkan semua path yang tidak dapat ditemukan di tingkat tertentu struktur folder ke index.html di folder tertentu.

Alamat asli	Alamat Tujuan	Jenis Pengalihan	Kode Negara
/documents/<folder>/<child-folder>/<grand-child-folder>	/documents/index.html	not found (404)

^{JSON [{"source": "/documents/<x>/<y>/<z>", "status": "404", "target": "/documents/index.html", "condition": null}]}

Pengalihan berbasis wilayah

Anda dapat menggunakan kode contoh berikut untuk mengalihkan permintaan berdasarkan wilayah.

Alamat asli	Alamat Tujuan	Jenis Pengalihan	Kode Negara
/documents	/documents/us/	temporary redirect (302)	<US>

^{JSON [{"source": "/documents", "status": "302", "target": "/documents/us/", "condition": "<US>"}]}

Ekspresi wildcard dalam pengalihan dan penulisan ulang

Anda dapat menggunakan ekspresi wildcard,<*>, di alamat asli untuk pengalihan atau penulisan ulang. Anda harus menempatkan ekspresi di akhir alamat asli, dan itu harus unik. Amplify mengabaikan alamat asli yang menyertakan lebih dari satu ekspresi wildcard, atau menggunakannya dalam penempatan yang berbeda.

Berikut ini adalah contoh pengalihan yang valid dengan ekspresi wildcard.

Alamat asli	Alamat Tujuan	Jenis Pengalihan	Kode Negara
/docs/<*>	/documents/<*>	permanent redirect (301)

Dua contoh berikut menunjukkan pengalihan yang tidak valid dengan ekspresi wildcard.

Alamat asli	Alamat Tujuan	Jenis Pengalihan	Kode Negara
/docs/<*>/content	/documents/<*>/content	permanent redirect (301)
/docs/<*>/content/<*>	/documents/<*>/content/<*>	permanent redirect (301)