Comment puis-je héberger un site Web statique qui utilise API Gateway comme proxy sur Amazon S3 ?

Résolution

Pour utiliser Amazon S3 afin d'héberger un site Web statique qui utilise API Gateway comme proxy, utilisez une intégration HTTP ou une intégration de service AWS.

Utiliser une intégration HTTP

Si votre site Web statique est accessible au public, utilisez une intégration HTTP et indiquez l'URL du site Web statique Amazon S3 pour l’API.

Configurez un site Web statique sur Amazon S3. Puis, utilisez la console API Gateway pour créer une API REST et une méthode pour la ressource racine, puis déployez votre API REST.

Créer une API REST

Procédez comme suit :

1. Ouvrez la console API Gateway.
2. Sélectionnez Créer une API.
3. Sous API REST, sélectionnez Créer.
4. Dans Nom d'API, saisissez le nom de votre API REST.
5. Dans la liste déroulante Type de point de terminaison, sélectionnez votre type de point de terminaison, puis choisissez Créer une API.
6. Dans le volet de navigation, sélectionnez Ressources sous votre API.
7. Sélectionnez Créer une ressource.
8. Dans Chemin de ressource, conservez /.
9. Dans Nom de la ressource, saisissez un nom. Par exemple, clé.
10. Sélectionnez Créer une ressource.

Créer la méthode pour la ressource racine

Procédez comme suit :

1. Sous Ressources, sélectionnez la ressource que vous avez créée. Par exemple, /key.
2. Sous Méthodes, choisissez Créer une méthode.
3. Dans la liste déroulante Type de méthode, sélectionnez GET.
4. Dans Type d'intégration, sélectionnez HTTP.
5. Sélectionnez Intégration de proxy HTTP.
6. Dans la liste déroulante Méthode HTTP, choisissez GET.
7. Dans URL de point de terminaison, saisissez http://BUCKET_NAME.s3-website.REGION.amazonaws.com/key.<br id=hardline_break/> Remarque : remplacez BUCKET_NAME par le nom de votre compartiment, REGION par la région de votre compartiment et key par le nom de votre ressource.
8. Sélectionnez Créer une méthode.

Déployer l'API REST

Procédez comme suit :

1. Sélectionnez Déployer l’API.
2. Dans la liste déroulante Étape, choisissez *New Stage*.
3. Dans Nom de l’étape, saisissez un nom. Par exemple, STAGE_NAME.
4. Sélectionnez Déployer.
5. Sous Détails de l'étape, notez l'URL d'invocation pour tester votre API.
6. Pour tester le proxy d'API pour votre site Web S3, exécutez la commande curl suivante :

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

   Remarque : remplacez API_ID par votre ID d’API, REGION par votre région et STAGE_NAME par le nom de votre étape.

Utiliser une intégration de services AWS

Configurer le site Web statique S3

Si l'accès public à votre site Web statique S3 est bloqué, il est conseillé de configurer le site Web de manière que vous puissiez y accéder uniquement à partir du proxy d’API.

Procédez comme suit :

1. Configurez un site Web statique sur Amazon S3.<br id=hardline_break/> Remarque : lorsque vous configurez le site Web statique, ignorez la section Étape 3 : Modifier les paramètres de blocage de l'accès public. Maintenez le paramètre Bloquer tous les accès publics par défaut activé.
2. Modifiez une stratégie de compartiment qui rend le contenu de votre compartiment accessible au public afin de permettre au proxy de l'API d'accéder uniquement au compartiment S3. Exemple de stratégie de compartiment :

   {  
     "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/"
           }
         }
     }]
   }

   Remarque : remplacez BUCKET_NAME par le nom de votre compartiment, REGION par votre région, ACCOUNT_ID par votre ID de compte AWS et API_ID par votre ID d’API.
3. Créez une stratégie Gestion des identités et des accès AWS (AWS IAM) pour autoriser l'API GetObject à accéder au compartiment S3. Exemple de politique IAM :

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

   Remarque : remplacez BUCKET_NAME par le nom de votre compartiment.
4. Créez un rôle IAM, puis associez la stratégie IAM précédente.
5. Copiez l’Amazon Resource Name (ARN) du rôle IAM.<br id=hardline_break/> Remarque : le rôle IAM doit contenir la politique d’approbation suivante pour que API Gateway puisse endosser le rôle :

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

Créer un proxy d'API REST pour le service S3

Procédez comme suit :

1. Ouvrez la console API Gateway.
2. Sélectionnez Créer une API.
3. Dans API REST, sélectionnez Créer.
4. Dans Nom d'API, saisissez le nom de votre API REST.
5. Dans la liste déroulante Type de point de terminaison d’API, choisissez le type de point de terminaison en fonction de l’origine de la majorité du trafic client.<br id=hardline_break/> Remarque : il est recommandé d’utiliser des points de terminaison optimisés pour la périphérie pour les services publics accessibles auxquels le trafic client accède depuis Internet. Si le trafic client accède à vos API uniquement depuis la même région AWS, utilisez des points de terminaison régionaux.
6. Sélectionnez Créer une API.

Créer une méthode GET pour la ressource racine

Procédez comme suit :

1. Sélectionnez la ressource racine /.
2. Sélectionnez Créer une méthode.
3. Dans la liste déroulante Type de méthode, sélectionnez GET.
4. Dans Type d’intégration, sélectionnez Service AWS.
5. Dans la liste déroulante Région AWS, choisissez votre région.
6. Dans la liste déroulante Service AWS, choisissez Simple Storage Service (S3).
7. Dans Sous-domaine AWS, laissez le champ vide.
8. Dans la liste déroulante Méthode HTTP, choisissez GET.
9. Dans Type d'action, choisissez Utiliser un remplacement de chemin.
10. Dans Remplacement du chemin, saisissez le chemin de votre compartiment S3. Par exemple, BUCKET_NAME/index.html.
11. Dans Rôle d'exécution, saisissez l'ARN du rôle IAM.
12. Sélectionnez Créer une méthode.

Remarque : la configuration intègre la requête d’API GET du frontend https://your-api-host/stage/ au backend S3 GET https://your-s3-host/index.html.

Créer un objet de ressource d’API

Procédez comme suit :

1. Sélectionnez Créer une ressource.
2. Dans Chemin de la ressource, conservez /.
3. Dans Nom de la ressource, saisissez un nom. Par exemple, object.
4. Sélectionnez Créer une ressource.

Configurer une méthode GET pour la ressource

Procédez comme suit :

1. Sous Ressources, sélectionnez la ressource que vous avez créée. Par exemple, /object.
2. Effectuez les étapes 2 à 12 de la section Créer une méthode GET pour la ressource racine.
3. Choisissez GET, puis Demande d’intégration.<br id=hardline_break/> Remarque : remplacez objet par le nom de votre ressource.
4. Choisissez Modifier.
5. Développez Paramètres de chemin d'URL, puis choisissez Ajouter un paramètre de chemin.
6. Dans Nom, saisissez le nom de votre ressource.
7. Dans Mappage à partir de, saisissez la valeur sous la forme method.request.path.object.<br id=hardline_break/> Remarque : remplacez objet par le nom de votre ressource.
8. Sélectionnez Enregistrer.

Configurer les mappages d'en-tête de réponse pour la méthode GET

Vous devez mapper la valeur du paramètre d'en-tête du type de contenu dorsal à l'équivalent frontal afin que le navigateur traite correctement la réponse avec le type de contenu.

Procédez comme suit :

1. Sous Ressources, sélectionnez**/**.
2. Choisissez GET, puis choisissez Réponse de méthode.
3. Dans Réponse 200, choisissez Modifier.
4. Sous Nom de l'en-tête, choisissez Ajouter un en-tête.
5. Définissez le nom comme Content-Type.
6. Sélectionnez Enregistrer.
7. Choisissez Réponse d'intégration, puis Modifier.
8. Sous Mappages d'en-tête, en regard de Content-Type, saisissez la valeur de mappage sous la forme integration.response.header.Content-Type.
9. Répétez les étapes 2 à 8 pour la méthode GET sous la ressource /object.<br id=hardline_break/> Remarque : remplacez objet par le nom de votre ressource.

Déployer l'API REST

Procédez comme suit :

1. Sélectionnez Déployer l’API.
2. Dans la liste déroulante Étape, choisissez *New Stage*.
3. Dans Nom de l’étape, saisissez un nom. Par exemple, STAGE_NAME.
4. Sélectionnez Déployer.
5. Sous Détails de l'étape, notez l'URL d'invocation pour tester votre API.

Pour tester le proxy d'API pour votre site Web statique S3, exécutez une commande curl.

Remarque : pour les exemples suivants, remplacez API_ID par votre ID API, REGION par votre région et STAGE_NAME par le nom de votre étape.

Pour tester la ressource racine, exécutez la commande curl suivante :

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

Pour tester la ressource objet, exécutez la commande curl suivante :

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

Informations connexes

Didacticiel : Créer une API REST en tant que proxy Amazon S3

Héberger un site Web statique à l’aide d’Amazon S3

Développer des API REST dans API Gateway

Créer un déploiement pour une API REST dans API Gateway