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

Esistono diversi tipi di reindirizzamenti che supportano scenari specifici.

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 test per il confronto A/B di un'interfaccia utente.

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 di 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 che l'utente vede.

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 paese a 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. AccediAWS Management Console e apri la console Amplify.

2. Scegliere l'app per cui si desidera creare un reindirizzamento.

3. Nel riquadro di navigazione, scegliere Impostazioni app (Impostazioni), quindi selezionare 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 regole singolarmente o effettuare una modifica collettiva:

   • Per creare un reindirizzamento individuale, scegli Aggiungi regola.

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

     2. In Indirizzo di destinazione, inserisci l'indirizzo di destinazione che rende il contenuto all'utente.

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

     4. (Facoltativo) Per il codice del paese, inserisci una condizione per il codice del paese a due lettere.

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

     1. Aggiungi o aggiorna manualmente i reindirizzamenti nell'editor JSON Aggiungi 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

È possibile 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 della 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 della regola corrispondente contiene parametri di interrogazione, i parametri di interrogazione non vengono inoltrati. Ad esempio, se l'indirizzo di destinazione per il reindirizzamento èhttps://example-target.com?q=someParam, i parametri della query non vengono passati.

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}]}

Puoi utilizzare il seguente codice di esempio per reindirizzare i percorsi di una cartella che non può essere trovata a 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 del valore 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 [{"fonte»: «</^ [^.] +$|\. (?! (css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp) $) ([^.] +$) />», «status»: «200", «obiettivo»: "/index.html «, «condizione»: nullo}]}

Rxy xy xy xy xy xy xy xy

L'esempio seguente utilizza una riscrittura per inviare contenuti da un'altra posizione in modo che all'utente appaia che il dominio non è stato modificato.

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

^{JSON [{"source»: «/images/<*>», «status»: «200", «destinazione»: "https://images.otherdomain.com/ <*>», «condizione»: nullo}]}

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 interrogazione 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", «obiettivo»: «/documents/<my-blog-id-value >», «condizione»: nullo}]}

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 interrogazione specificatoid.

È possibile utilizzare il seguente codice di esempio per reindirizzare tutti i percorsi che non possono essere trovati a un determinato livello di 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>"}]}