Utilizzo dei reindirizzamenti

I reindirizzamenti permettono a un server Web di reinstradare la navigazione da un URL a un altro. I motivi più comuni per utilizzare i reindirizzamenti includono la personalizzazione dell'aspetto di un URL, l'evitare collegamenti interrotti, lo spostamento della posizione di hosting di un'app o di un sito senza modificarne l'indirizzo e la modifica di un URL richiesto nel modulo richiesto da un'app Web.

Tipi di reindirizzamenti

Amplify supporta i seguenti tipi di reindirizzamento nella console.

Permanent redirect (301) (Reindirizzamento permanente (301))

I reindirizzamenti 301 sono intesi per modifiche durature alla destinazione di un indirizzo Web. La cronologia di classificazione dei motori di ricerca per l'indirizzo originale è applicabile al nuovo indirizzo di destinazione. Il reindirizzamento si verifica lato client; una barra di navigazione del browser mostra l'indirizzo di destinazione dopo il reindirizzamento.

Le comuni motivazioni per l'utilizzo dei reindirizzamenti 301 includono:

• Per evitare un collegamento interrotto quando l'indirizzo di una pagina cambia.

• Per evitare un collegamento interrotto quando un utente inserisce un refuso prevedibile in un indirizzo.

Reindirizzamento temporaneo (302)

I reindirizzamenti 302 servono per modifiche temporanee alla destinazione di un indirizzo Web. La cronologia del posizionamento nei motori di ricerca dell'indirizzo originale non si applica al nuovo indirizzo di destinazione. Il reindirizzamento si verifica lato client; una barra di navigazione del browser mostra l'indirizzo di destinazione dopo il reindirizzamento.

Le comuni motivazioni per l'utilizzo dei reindirizzamenti 302 includono:

• Per fornire una destinazione di deviazione, mentre si tengono riparazioni sull'indirizzo originale.

• Fornire pagine di prova per il confronto A/B di un'interfaccia utente.

  Nota

  Se la tua app restituisce una risposta 302 inaspettata, l'errore è probabilmente causato dalle modifiche che hai apportato al reindirizzamento dell'app e alla configurazione personalizzata dell'intestazione. Per risolvere il problema, verifica che le intestazioni personalizzate siano valide, quindi riattiva la regola di riscrittura 404 predefinita per l'app.

Rewrite (200)

I reindirizzamenti 200 (riscritture) servono per mostrare contenuti dall'indirizzo di destinazione, come se venissero forniti dall'indirizzo originale. La cronologia di classificazione dei motori di ricerca continua a essere applicata all'indirizzo originale. Il reindirizzamento si verifica lato server; una barra di navigazione del browser mostra l'indirizzo originale dopo il reindirizzamento. Le comuni motivazioni per l'utilizzo dei reindirizzamenti 200 includono:

• Per reindirizzare un intero sito in un nuovo percorso di hosting senza modificare l'indirizzo del sito.

• Per reindirizzare tutto il traffico in un'applicazione Web a singola pagina (SPA) alla sua pagina index.html per la gestione da parte di una funzione di router lato client.

Not Found (404) (Non trovato (404))

I reindirizzamenti 404 si verificano quando una richiesta punta a un indirizzo che non esiste. Viene visualizzata la pagina di destinazione di un 404 invece di quella richiesta. Le comuni motivazioni per un reindirizzamento 404 includono:

• Per evitare un messaggio collegamento interrotto quando un utente inserisce un URL sbagliato.

• Per far puntare le richieste a pagine inesistenti di un'applicazione Web sulla pagina index.html, per la gestione da una funzione router lato client.

Creazione e modifica dei reindirizzamenti

Puoi creare e modificare i reindirizzamenti per un'app nella console Amplify. Prima di iniziare, avrai bisogno delle seguenti informazioni sulle parti di un reindirizzamento.

Un indirizzo originale

L'indirizzo richiesto dall'utente.

Un indirizzo di destinazione

L'indirizzo che serve effettivamente il contenuto visualizzato dall'utente.

Un tipo di reindirizzamento

I tipi includono un reindirizzamento permanente (301), un reindirizzamento temporaneo (302), una riscrittura (200) o un reindirizzamento non trovato (404).

Un codice del paese di due lettere (opzionale)

Un valore che puoi includere per segmentare l'esperienza utente della tua app per area geografica.

Per creare un reindirizzamento nella console Amplify

1. Accedi AWS Management Console e apri la console Amplify.

2. Scegli l'app per cui desideri creare un reindirizzamento.

3. Nel riquadro di navigazione, scegli Impostazioni app, quindi scegli Riscritture e reindirizzamenti.

4. Nella sezione Riscritture e reindirizzamenti, scegli Modifica.

5. La procedura per aggiungere un reindirizzamento varia a seconda che si desideri aggiungere le regole singolarmente o apportare una modifica collettiva:

   • Per creare un reindirizzamento individuale, scegli Aggiungi regola.

     1. Per Indirizzo di origine, inserisci l'indirizzo originale richiesto dall'utente.

     2. Per Indirizzo di destinazione, inserisci l'indirizzo di destinazione che invia il contenuto all'utente.

     3. Per Tipo, scegli il tipo di reindirizzamento dall'elenco.

     4. (Facoltativo) Per Codice Paese, inserite una condizione relativa al prefisso internazionale di due lettere.

   • Per modificare in blocco i reindirizzamenti, scegli Apri editor di testo.

     1. Aggiungi o aggiorna manualmente i reindirizzamenti nell'editor JSON per aggiungere riscritture e reindirizzamenti in blocco.

6. Seleziona Salva.

Ordine dei reindirizzamenti

I reindirizzamenti vengono eseguiti partendo dall'inizio dell'elenco. Controllare che l'ordinamento abbia l'effetto inteso. Ad esempio, il seguente ordine di reindirizzamenti causa il reindirizzamento di tutte le richieste per uno specifico percorso sotto a /docs/ nello stesso percorso sotto a /documents/, tranne /docs/specific-filename.html che viene reindirizzato su /documents/different-filename.html:

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

Il seguente ordine di reindirizzamenti ignora il reindirizzamento di specific-filename.html su different-filename.html:

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

Parametri di query

Puoi utilizzare i parametri di query per un maggiore controllo sulle corrispondenze degli URL. Amplify inoltra tutti i parametri della query al percorso di destinazione per i reindirizzamenti 301 e 302, con le seguenti eccezioni:

• Se l'indirizzo originale include una stringa di query impostata su un valore specifico, Amplify non inoltra i parametri di query. In questo caso, il reindirizzamento si applica solo alle richieste all'URL di destinazione con il valore di query specificato.

• Se l'indirizzo di destinazione per la regola di corrispondenza ha parametri di query, i parametri di query non vengono inoltrati. Ad esempio, se l'indirizzo di destinazione per il reindirizzamento èhttps://example-target.com?q=someParam, i parametri di query non vengono trasmessi.

Reindirizzamenti e riscritture semplici

In questa sezione sono inclusi codici di esempio per i più comuni scenari di reindirizzamento.

È possibile utilizzare il seguente codice di esempio per reindirizzare definitivamente una pagina specifica a un nuovo indirizzo.

Indirizzo originale	Indirizzo di destinazione	Tipo di reindirizzamento	Codice del paese
/original.html	/destination.html	permanent redirect (301)

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

Il seguente codice di esempio può essere utilizzato anche per reindirizzare un percorso di una cartella allo stesso percorso con una cartella diversa.

Indirizzo originale	Indirizzo di destinazione	Tipo di reindirizzamento	Codice del paese
/docs/<*>	/documents/<*>	permanent redirect (301)

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

Il seguente codice di esempio serve per reindirizzare tutto il traffico su index.html, come riscrittura. In questo scenario, la riscrittura fa credere all'utente di aver raggiunto l'indirizzo originale.

Indirizzo originale	Indirizzo di destinazione	Tipo di reindirizzamento	Codice del paese
/<*>	/index.html	rewrite (200)

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

Il seguente codice di esempio serve per l'utilizzo di una riscrittura, utile a modificare il sottodominio visualizzato all'utente.

Indirizzo originale	Indirizzo di destinazione	Tipo di reindirizzamento	Codice del paese
https://mydomain.com	https://www.mydomain.com	rewrite (200)

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

È possibile utilizzare il seguente codice di esempio per reindirizzare a un dominio diverso con un prefisso di percorso.

Indirizzo originale	Indirizzo di destinazione	Tipo di reindirizzamento	Codice del paese
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}]}

Puoi utilizzare il seguente codice di esempio per reindirizzare i percorsi all'interno di una cartella non trovata verso una pagina 404 personalizzata.

Indirizzo originale	Indirizzo di destinazione	Tipo di reindirizzamento	Codice del paese
/<*>	/404.html	not found (404)

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

Reindirizzamenti per app Web a pagina singola (SPA)

La maggior parte dei framework SPA supporta l'istruzione history.pushState() di HTML5 per modificare la posizione del browser senza attivare una richiesta server. Funziona per gli utenti che iniziano il proprio percorso dalla root (o da /index.html), ma fallisce per gli utenti che accedono direttamente a qualsiasi altra pagina.

L'esempio seguente utilizza le espressioni regolari per impostare una riscrittura di 200 per tutti i file in index.html, ad eccezione delle estensioni di file specificate nell'espressione regolare.

Indirizzo originale	Indirizzo di destinazione	Tipo di reindirizzamento	Codice del paese
</^[^.]+$|\.(?!(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}]}

Riscrittura inversa del proxy

L'esempio seguente utilizza una riscrittura del contenuto proxy da un'altra posizione in modo che all'utente appaia che il dominio non è cambiato.

Indirizzo originale	Indirizzo di destinazione	Tipo di reindirizzamento	Codice del paese
/images/<*>	https://images.otherdomain.com/<*>	rewrite (200)

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

Barre finali e URL puliti

Per creare strutture URL pulite, come about anziché about.html, i generatori di siti statici, come Hugo, generano directory per le pagine con index.html (/about/index.html). Amplify crea automaticamente URL puliti aggiungendo una barra finale quando necessario. La tabella seguente illustra diversi scenari:

Input utente dal browser	URL nella barra degli indirizzi	Documento fornito
/about	/about	/about.html
/about (when about.html returns 404)	/about/	/about/index.html
/about/	/about/	/about/index.html

Placeholder

È possibile utilizzare il seguente codice di esempio per reindirizzare percorsi in una struttura di cartelle a una struttura corrispondente in un'altra cartella.

Indirizzo originale	Indirizzo di destinazione	Tipo di reindirizzamento	Codice del paese
/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}]}

Stringhe di query e parametri del percorso

Puoi utilizzare il seguente codice di esempio per reindirizzare un percorso a una cartella con un nome che corrisponda al valore dell'elemento stringa di query nell'indirizzo originale:

Indirizzo originale	Indirizzo di destinazione	Tipo di reindirizzamento	Codice del paese
/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}]}

Nota

Amplify inoltra tutti i parametri della stringa di query al percorso di destinazione per i reindirizzamenti 301 e 302. Tuttavia, se l'indirizzo originale include una stringa di query impostata su un valore specifico, come dimostrato in questo esempio, Amplify non inoltra i parametri di query. In questo caso, il reindirizzamento si applica solo alle richieste all'indirizzo di destinazione con il valore di query specificato. id

È possibile utilizzare il codice di esempio seguente per reindirizzare tutti i percorsi che non possono essere trovati a un determinato livello di una struttura di cartelle a index.html in una cartella specificata.

Indirizzo originale	Indirizzo di destinazione	Tipo di reindirizzamento	Codice del paese
/documents/<folder>/<child-folder>/<grand-child-folder>	/documents/index.html	404

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

Reindirizzamenti basati sulla regione

È possibile utilizzare il seguente codice di esempio per reindirizzare le richieste in base alla regione.

Indirizzo originale	Indirizzo di destinazione	Tipo di reindirizzamento	Codice del paese
/documents	/documents/us/	302	<US>

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