Come posso utilizzare Amazon S3 per ospitare un sito web statico che utilizzi Gateway API come proxy?

Risoluzione

Per ospitare un sito web statico con Gateway API come proxy utilizzando Amazon S3, utilizza un'integrazione HTTP o un'integrazione del servizio AWS.

Utilizza un'integrazione HTTP

Se il sito web statico è accessibile pubblicamente, utilizza un'integrazione HTTP e fornisci l'URL del sito web statico di Amazon S3 per l'API.

Configura un sito web statico su Amazon S3. Quindi utilizza la console Gateway API per creare una REST API e un metodo per la risorsa root, quindi distribuisci la REST API.

Crea una REST API

Completa i seguenti passaggi:

1. Apri la console Gateway API.
2. Scegli Crea API.
3. Alla voce REST API, scegli Crea.
4. In Nome API, inserisci un nome per la REST API.
5. Nell'elenco a discesa Tipo di endpoint API, seleziona il tipo di endpoint, quindi scegli Crea API.
6. Nel pannello di navigazione, scegli Risorse sotto l'API.
7. Scegli Crea risorsa.
8. Per Percorso risorsa, mantieni /.
9. In Nome risorsa, inserisci un nome. Ad esempio, key.
10. Scegli Crea risorsa.

Crea il metodo per la risorsa root

Completa i seguenti passaggi:

1. Alla voce Risorse, seleziona la risorsa che hai creato. Ad esempio, /key.
2. Alla voce Metodi, scegli Crea metodo.
3. Nell'elenco a discesa Tipo di metodo, scegli GET.
4. Per Tipo di integrazione, scegli HTTP.
5. Seleziona l'integrazione del proxy HTTP.
6. Nell'elenco a discesa Metodo HTTP, scegli GET.
7. In URL endpoint, inserisci http://BUCKET_NAME.s3-website.REGION.amazonaws.com/key.<br id=hardline_break/> Nota: sostituisci BUCKET_NAME con il nome del tuo bucket, REGION con la Regione del tuo bucket e key con il nome della tua risorsa.
8. Scegli Crea metodo.

Distribuisci la REST API

Completa i seguenti passaggi:

1. Scegli Distribuisci l'API.
2. Nell'elenco a discesa Fase, scegli *New Stage*.
3. In Nome fase, inserisci un nome. Ad esempio, STAGE_NAME.
4. Scegli Distribuisci.
5. Alla voce Dettagli fase, annota l'URL di invocazione per eseguire un test dell'API.
6. Per eseguire un test del proxy API per il sito web S3, esegui questo comando curl:

   curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/index.html

   Nota: sostituisci API_ID con l'ID della tua API, REGION con la tua Regione e STAGE_NAME con il nome della tua fase.

Utilizza un'integrazione del servizio AWS

Configurare il sito web statico S3

Se l'accesso pubblico al sito web statico S3 è bloccato, configura il sito web in modo che sia accessibile solo dal proxy API.

Completa i seguenti passaggi:

1. Configura un sito web statico in Amazon S3.<br id=hardline_break/> Nota: quando configuri il sito web statico, salta la sezione Fase 3: modificare le impostazioni di blocco dell'accesso pubblico. Mantieni attiva l'impostazione predefinita Blocca tutto l'accesso pubblico.
2. Modifica una policy di bucket che renda il contenuto del bucket disponibile al pubblico per consentire al proxy API di accedere solo al bucket S3. Esempio di policy di bucket:

   {  
     "Version": "2012-10-17",
     "Statement": [{
         "Sid": "APIProxyBucketPolicy",
         "Effect": "Allow",
         "Principal": {
           "Service": "apigateway.amazonaws.com"
         },
         "Action": "s3:GetObject",
         "Resource": "arn:aws:s3:::BUCKET_NAME/*",
         "Condition": {
           "ArnLike": {
             "aws:SourceArn": "arn:aws:execute-api:REGION:ACCOUNT_ID:API_ID/*/GET/"
           }
         }
     }]
   }

   Nota: sostituisci BUCKET_NAME con il nome del tuo bucket, REGION con la tua Regione, ACCOUNT_ID con l'ID del tuo account AWS e API_ID con l'ID della tua API.
3. Crea una policy AWS Identity and Access Management (AWS IAM) per consentire all'API GetObject di accedere al bucket S3. Esempio di policy IAM:

   {
     "Version": "2012-10-17",
     "Statement": [{
       "Effect": "Allow",
       "Action": ["s3:GetObject"],
       "Resource": [
           "arn:aws:s3:::BUCKET_NAME/*"
       ]
     }]
   }

   Nota: sostituisci BUCKET_NAME con il nome del tuo bucket.
4. Crea un ruolo IAM, quindi collega la policy IAM precedente.
5. Annota il nome della risorsa Amazon (ARN) del ruolo IAM.<br id=hardline_break/> Nota: il ruolo IAM deve contenere la seguente policy di attendibilità per consentire a Gateway API di assumere il ruolo:

   {
     "Version": "2012-10-17",
     "Statement": [{
       "Sid": "",
       "Effect": "Allow",
       "Principal": {
           "Service": "apigateway.amazonaws.com"
       },
       "Action": "sts:AssumeRole"
     }]
   }

Crea un proxy REST API per il servizio S3

Completa i seguenti passaggi:

1. Apri la console Gateway API.
2. Scegli Crea API.
3. Per REST API scegli Crea.
4. In Nome API, inserisci un nome per la REST API.
5. Nell'elenco a discesa Tipo di endpoint API, scegli il tipo di endpoint in base alla provenienza della maggior parte del traffico dei client.<br id=hardline_break/> Nota: è consigliabile utilizzare endpoint ottimizzati per l'edge per i servizi pubblici a cui il traffico dei client accede da Internet. Se il traffico dei client accede alle API solo dall'interno della stessa Regione AWS, utilizza gli endpoint Regionali.
6. Scegli Crea API.

Crea il metodo GET per la risorsa root

Completa i seguenti passaggi:

1. Seleziona la risorsa root /.
2. Scegli Crea metodo.
3. Nell'elenco a discesa Tipo di metodo, scegli GET.
4. Per Tipo di integrazione, scegli Servizio AWS.
5. Nell'elenco a discesa Regione AWS, scegli la Regione.
6. Nell'elenco a discesa Servizio AWS, scegli Simple Storage Service (S3).
7. Per Sottodominio AWS, mantieni il campo vuoto.
8. Nell'elenco a discesa Metodo HTTP, scegli GET.
9. Per Tipo di operazione, scegli Utilizza sostituzione percorso.
10. In Sostituzione percorso, inserisci il percorso del bucket S3. Ad esempio, BUCKET_NAME/index.html.
11. In Ruolo di esecuzione, inserisci l'ARN del ruolo IAM.
12. Scegli Crea metodo.

Nota: la configurazione integra la richiesta API GET del frontend https://your-api-host/stage/ nel backend di S3 GET https://your-s3-host/index.html.

Crea un oggetto risorsa API

Completa i seguenti passaggi:

1. Scegli Crea risorsa.
2. Per Percorso risorsa, mantieni /.
3. In Nome risorsa, inserisci un nome. Ad esempio, object.
4. Scegli Crea risorsa.

Configura un metodo GET per la risorsa

Completa i seguenti passaggi:

1. Alla voce Risorse, seleziona la risorsa che hai creato. Ad esempio, /object.
2. Completa i passaggi da 2 a 12 della sezione Crea il metodo GET per la risorsa root.
3. Scegli GET, quindi seleziona Richiesta di integrazione.<br id=hardline_break/> Nota: sostituisci oggetto con il nome della tua risorsa.
4. Scegli Modifica.
5. Espandi Parametri del percorso URL, quindi scegli Aggiungi parametro di percorso.
6. In Nome, inserisci il nome della risorsa.
7. In Mappato da, inserisci il valore come method.request.path.object.<br id=hardline_break/> Nota: sostituisci oggetto con il nome della tua risorsa.
8. Scegli Salva.

Imposta le mappature di intestazione della risposta per il metodo GET

Devi mappare il valore del parametro di intestazione del tipo di contenuto del backend sulla controparte del frontend in modo che il browser elabori la risposta con il tipo di contenuto.

Completa i seguenti passaggi:

1. Alla voce Risorse, seleziona**/**.
2. Scegli GET, quindi seleziona Risposta metodo.
3. Alla voce Risposta 200, scegli Modifica.
4. Alla voce Nome intestazione, scegli Aggiungi intestazione.
5. Imposta Nome come Content-Type.
6. Scegli Salva.
7. Scegli Risposta di integrazione, quindi seleziona Modifica.
8. Alla voce Mappature intestazione, accanto a Content-Type, inserisci integration.response.header.Content-Type in Valore mappatura.
9. Ripeti i passaggi da 2 a 8 per il metodo GET sotto la risorsa /object.<br id=hardline_break/> Nota: sostituisci oggetto con il nome della tua risorsa.

Distribuisci la REST API

Completa i seguenti passaggi:

1. Scegli Distribuisci l'API.
2. Nell'elenco a discesa Fase, scegli *New Stage*.
3. In Nome fase, inserisci un nome. Ad esempio, STAGE_NAME.
4. Scegli Distribuisci.
5. Alla voce Dettagli fase, annota l'URL di invocazione per eseguire un test dell'API.

Per eseguire un test del proxy API per il sito web statico S3, esegui un comando curl.

Nota: per i seguenti esempi, sostituisci API_ID con l'ID della tua API, REGION con la tua Regione e STAGE_NAME con il nome della tua fase.

Per eseguire un test della risorsa root, esegui questo comando curl:

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/

Per eseguire un test della risorsa oggetto, esegui questo comando curl:

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/home.html

Informazioni correlate

Tutorial: creazione di una REST API come un proxy Amazon S3

Hosting di un sito web statico tramite Amazon S3

Sviluppa REST API in Gateway API

Creazione di una distribuzione per una REST API in Gateway API