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

Risoluzione

Puoi usare Amazon S3 per ospitare siti web statici. Puoi anche utilizzare l'integrazione proxy HTTP o l'integrazione dei servizi AWS per configurare API Gateway come proxy per il sito web statico di Amazon S3.

Integrazione proxy HTTP

Se il tuo sito web statico di Amazon S3 è accessibile al pubblico, utilizza l'integrazione HTTP e fornisci l'URL del sito web statico di S3 per API Gateway.

Se non l'hai già fatto, segui il tutorial per configurare un sito web statico su Amazon S3.

Creazione di una REST API

1. Apri la console API Gateway.
2. In REST API scegli Crea.
3. In Nome API inserisci un nome per la REST API.
4. Scegli l'elenco a discesa Tipo di endpoint, seleziona il tipo di endpoint, quindi scegli Crea API.
5. Nel pannello di navigazione, scegli Risorse sotto al nome dell'API.
6. Scegli l'elenco a discesa Operazioni, quindi seleziona Crea risorsa.
7. In Nome risorsa inserisci un nome. Ad esempio, chiave.
8. In Percorso risorsa inserisci un parametro di percorso. Ad esempio, {key}.
9. Scegli Crea risorsa.

Creazione del metodo per la risorsa root

1. Scegli il nome della risorsa {key}, seleziona l'elenco a discesa Operazioni, quindi scegli Crea metodo.
2. Dall'elenco a discesa {key}, scegli GET, quindi seleziona l'icona del segno di spunta.
3. In Tipo di integrazione, scegli HTTP, seleziona Utilizza integrazione proxy HTTP, quindi inMetodo HTTP mantieni l'impostazione GET.
4. In URL endpoint inserisci http://BUCKET_NAME.s3-website.REGION.amazonaws.com/{key}, quindi scegli Salva.

Distribuzione della REST API

1. Dall'elenco a discesa Operazioni scegli Distribuisci l'API.
2. Dall'elenco a discesa Fase della distribuzione scegli [New Stage].
3. In Nome fase inserisci un nome. Ad esempio, Dev.
4. Scegli Distribuisci. In Editor fase Dev prendi nota dell'URL di richiamo. Ti servirà in seguito per testare l'API.
5. Usa un comando curl simile al seguente per testare il proxy API per il tuo sito web di Amazon S3:

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

Integrazione dei servizi AWS

Configurazione del sito web statico di Amazon S3

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

1. Se non l'hai già fatto, segui il tutorial per configurare un sito web statico su Amazon S3.
   Nota: salta il passaggio 3 del tutorial e mantieni attiva l'impostazione predefinita Blocca tutti gli accessi pubblici.

2. Modifica la policy del bucket nel passaggio 4 del tutorial per consentire al proxy API di accedere solo al bucket di Amazon S3, in modo simile all'esempio seguente:

   {
     "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:API_ID/*/GET/"
           }
         }
     }]
   }

3. Crea una policy AWS Identity and Access Management (IAM) con l'autorizzazione per l'API GetObject per il bucket di Amazon S3.

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

4. Crea un ruolo IAM e collega la policy IAM creata nel passaggio precedente a questo nuovo ruolo.

5. Copia l'ARN dei ruoli IAM. Ti servirà in un passaggio successivo.
   Il ruolo IAM deve contenere la seguente policy di attendibilità per consentire ad API Gateway di assumere il ruolo:

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

Creazione di un proxy REST API per il servizio Amazon S3

1. Apri la console API Gateway.
2. Seleziona Crea API.
3. Scegli REST API, quindi seleziona Crea.
4. In Nome API inserisci un nome per la REST API.
5. In Tipo di endpoint scegli il tipo di endpoint in base alla provenienza della maggior parte del traffico dei client.
   Nota: per i servizi pubblici a cui si accede da Internet, è consigliabile utilizzare endpoint ottimizzati per gli edge. Gli endpoint regionali vengono utilizzati principalmente per le API a cui si accede dalla stessa regione AWS.
6. Seleziona Crea API.

Creazione del metodo GET per la risorsa root

Il metodo root è configurato per le richieste proxy ai siti web statici di Amazon S3.

1. Con la risorsa root "/" selezionata, scegli l'elenco a discesa Operazioni, quindi seleziona Crea metodo.
2. Dall'elenco a discesa, seleziona GET, quindi scegli l'icona del segno di spunta.
3. In Tipo di integrazione scegli Servizio AWS.
4. Scegli l'elenco a discesa Regione AWS, quindi seleziona la tua regione.
5. Scegli l'elenco a discesa Servizio AWS, quindi seleziona Simple Storage Service (S3).
6. In Sottodominio AWS lascia il campo vuoto.
7. In Metodo HTTP seleziona GET.
8. In Tipo di operazione scegli Utilizza sostituzione percorso.
9. In Sostituzione percorso inserisci il percorso del bucket di Amazon S3 simile a BUCKET_NAME/index.html.
10. In Ruolo di esecuzione incolla l'ARN del ruolo IAM creato in precedenza.
11. Scegli Salva.

Questa configurazione integra la richiesta API front-end GET https://your-api-host/stage/ nel back-end S3 GET https://your-s3-host/index.html.

Creazione di un oggetto risorsa API

Per accedere a oggetti specifici da un bucket S3, crea una risorsa denominata {object} che mappi il percorso dell'oggetto nella richiesta API front-end. Ad esempio, GET https://your-api-host/stage/home.html per back-end S3 GET https://your-s3-host/home.html.

1. In Risorse, scegli l'elenco a discesa Operazioni, quindi seleziona Crea risorsa.
2. In Nome risorsa inserisci un nome. Ad esempio, {object}.
3. In Percorso risorsa, inserisci un percorso. Ad esempio, {object}.
4. Scegli Crea risorsa.

Configurazione di un metodo GET per la risorsa

1. Con la risorsa {object} selezionata, scegli l'elenco a discesa Operazioni, quindi seleziona Crea metodo.
2. Dall'elenco a discesa, scegli GET, quindi seleziona l'icona del segno di spunta.
3. In Tipo di integrazione scegli Servizio AWS.
4. Scegli l'elenco a discesa Regione AWS, quindi seleziona la tua regione.
5. Scegli l'elenco a discesa Servizio AWS, quindi seleziona Simple Storage Service (S3).
6. In Sottodominio AWS lascia il campo vuoto.
7. In Metodo HTTP scegli GET.
8. In Tipo di operazione scegli Utilizza sostituzione percorso.
9. In Sostituzione percorso inserisci il percorso del bucket di Amazon S3 simile a BUCKET_NAME/{object}.
10. In Ruolo di esecuzione incolla l'ARN del ruolo IAM creato in precedenza.
11. Scegli Salva.
12. In Nome risorsa {object} scegli GET, quindi seleziona Richiesta di integrazione.
13. Espandi Parametri del percorso URL, inserisci un Nome valore oggetto e in Mappato da, il valore method.request.path.object, quindi seleziona la casella di controllo per salvare.

Impostazione delle mappature per l'intestazione della risposta per il metodo GET

Mappa il valore del parametro di intestazione del tipo di contenuto del back-end sulla controparte del front-end. In questo modo il browser elaborerà correttamente la risposta con il tipo di contenuto.

1. Scegli GET, in Risorse / seleziona Risposta metodo.
2. Espandi la freccia accanto a Stato HTTP 200, in Intestazioni della risposta per 200 scegli Aggiungi intestazione.
3. Scegli il Nome dell'intestazione come Tipo di contenuto, quindi seleziona la casella di controllo per salvare.
4. Scegli Esecuzione metodo.
5. Scegli Risposta di integrazione, espandi la freccia accanto a Espressione regolare stato HTTP.
6. Espandi Mappature intestazione, in Tipo di contenuto inserisci il valore mappatura come integration.response.header.Content-Type.
7. Ripeti i passaggi 1-6 per il metodo GET in Risorsa /{object}.
8. Ripeti i passaggi nella sezione Distribuisci la REST API.

Test del proxy API

Puoi utilizzare un browser o un comando curl per testare il proxy API per il tuo sito web statico di Amazon S3:

Risorsa root (/)

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

Risorsa {Object}

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

Informazioni correlate

Tutorial: Creazione di un'API REST come un proxy Amazon S3 in API Gateway

Hosting di un sito web statico tramite Amazon S3

Creazione di un'API REST in Amazon API Gateway

Distribuzione di un'API REST dalla console API Gateway