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

Résolution

Amazon S3 peut être utilisé pour héberger des sites Web statiques. Il est également possible d’intégrer le proxy HTTP ou les services AWS pour configurer la passerelle API en tant que proxy pour le site Web statique Amazon S3.

Intégration du proxy HTTP

Si votre site Web statique Amazon S3 est accessible au public, vous devez utiliser l'intégration HTTP et fournir l'URL du site Web statique S3 pour la passerelle API.

Si ce n'est pas le cas, suivez les instructions pour configurer un site Web statique sur Amazon S3.

Créer une API REST

1. Ouvrez la console passerelle API.
2. Dans API REST, choisissez Créer.
3. Dans le champ Nom d'API, saisissez le nom de votre API REST.
4. Dans la liste déroulante Type de point de terminaison, sélectionnez votre type de point de terminaison, puis choisissez Créer une API.
5. Sélectionnez la rubrique Ressources dans le volet de navigation sous le nom de votre API.
6. Déroulez la liste des Actions, puis sélectionnez Créer une ressource.
7. Saisissez le Nom de la ressource. Par exemple, clé.
8. Dans le champ Chemin d'accès à la ressource , saisissez un paramètre de chemin d'accès. Par exemple, {key}.
9. Sélectionnez Créer une ressource.

Création d’une méthode pour la ressource racine

1. Choisissez le nom de la ressource**{key}**, déroulez la liste des Actions, puis sélectionnez Créer une méthode.
2. Dans la liste déroulante**{key}**, sélectionnez GET, puis cliquez sur l'icône en forme de coche.
3. Dans Type d'intégration, choisissez HTTP, sélectionnez Utiliser une intégration proxy HTTP, puis conservez la méthode HTTP sous la forme GET.
4. Dans le champ URL de point de terminaison, saisissez http://BUCKET_NAME.s3-website.REGION.amazonaws.com/{key}, puis choisissez Enregistrer.

Déploiement de l'API REST

1. Dans la liste déroulante des Actions, sélectionnez Déployer l'API.
2. Dans la liste déroulante des Étape de déploiement, choisissez [Nouvelle étape].
3. Saisissez le Nom de l’étape. Par exemple, Dev.
4. Choisissez Déployer. Dans l’éditeur Dev Stage Editor, notez l'URL d'invocation. Vous l’utiliserez plus tard pour tester votre API.
5. Utilisez une commande curl similaire à la commande suivante pour tester le proxy d’API pour votre site Web Amazon S3 :

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

Intégration des services AWS

Configuration du site Web statique Amazon S3

Si l'accès public à votre site Web statique Amazon S3 est bloqué, il est conseillé de configurer le site Web de manière à ce qu'il soit uniquement accessible à partir du proxy d’API.

1. Si ce n’est pas le cas, suivez ces instructions pour configurer un site Web statique sur Amazon S3.
   Remarque : ignorez l'étape 3 du didacticiel et conservez le paramètre par défaut Bloquer tous les accès publics.

2. Modifiez la politique de compartiment (étape 4 du didacticiel) pour permettre au proxy d’API d'accéder uniquement au compartiment Amazon S3, comme dans l'exemple suivant :

   {
     "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. Créez une politique AWS Identity and Access Management (IAM) en autorisant l'API GetObject à accéder au compartiment Amazon S3.

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

4. Créez un rôle IAM et attachez la politique IAM créée à l'étape précédente à ce nouveau rôle.

5. Copiez l'ARN des rôles IAM. Vous en aurez besoin ultérieurement.
   Le rôle IAM doit contenir la politique de confiance suivante pour la passerelle API puisse assumer le rôle :

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

Création d’un proxy d'API REST pour le service Amazon S3

1. Ouvrez la console passerelle API.
2. Sélectionnez Créer une API.
3. Sélectionnez REST API, puis Créer.
4. Dans le champ Nom d'API, saisissez le nom de votre API REST.
5. Dans le champ Type de point de terminaison, choisissez le type de point de terminaison en fonction de l’origine de la majorité du trafic client.
   Remarque : il est recommandé d’utiliser des points de terminaison optimisés pour la périphérie pour les services publics accessibles depuis Internet. Les points de terminaison régionaux sont principalement utilisés pour les API accessibles depuis la même région AWS.
6. Sélectionnez Créer une API.

Création d’une méthode GET pour la ressource racine

La méthode racine est configurée pour les demandes de proxy vers les sites Web statiques Amazon S3.

1. Une fois la ressource racine « / » sélectionnée, déroulez la liste des Actions, puis choisissez Créer une méthode.
2. Dans la liste déroulante, sélectionnez GET, puis cliquez sur l'icône en forme de coche.
3. Dans Type d’intégration, choisissez Service AWS.
4. Déroulez la liste des Régions AWS, puis sélectionnez votre région AWS.
5. Déroulez la liste des services AWS, puis choisissez Simple Storage Service (S3).
6. Laissez ce champ vide pour le sous-domaine AWS.
7. Dans la méthode HTTP, sélectionnez GET.
8. Dans le champ Type d'action, sélectionnez Utiliser un remplacement de chemin.
9. Dans le champ Remplacement de chemin, entrez le chemin d'accès du compartiment Amazon S3, selon le format BUCKET_NAME/index.html.
10. Dans le champ Rôle d'exécution, collez l'ARN du rôle IAM que vous avez créé plus tôt.
11. Sélectionnez Enregistrer.

Cette configuration intègre la demande d’API frontend GET https://your-api-host/stage/ au backend S3 GET https://your-s3-host/index.html.

Création d’un objet de ressource d’API

Pour accéder à des objets spécifiques depuis un compartiment S3, vous devez créer une ressource nommée {object} qui mappe le chemin de l'objet dans la demande d'API frontend. Par exemple : GET https://your-api-host/stage/home.html vers le backend S3 GET https://your-s3-host/home.html.

1. Dans Ressources, déroulez la liste des Actions, puis choisissez Créer une ressource.
2. Saisissez le Nom de la ressource. Par exemple, {object}.
3. Dans le champ Chemin de ressource, saisissez un chemin d’accès. Par exemple, {object}.
4. Sélectionnez Créer une ressource.

Configuration d’une méthode GET pour la ressource

1. Veillez à sélectionner la ressource {object}, puis déroulez la liste des Actions et choisissez Créer une méthode.
2. Dans la liste déroulante, choisissez GET, puis cliquez sur l'icône en forme de coche.
3. Dans Type d’intégration, choisissez Service AWS.
4. Déroulez la liste des Régions AWS, puis sélectionnez votre région AWS.
5. Déroulez la liste des services AWS, puis choisissez Simple Storage Service (S3).
6. Laissez ce champ vide pour le sous-domaine AWS.
7. Dans le champ Méthode HTTP, sélectionnez GET.
8. Dans le champ Type d'action, sélectionnez Utiliser un remplacement de chemin.
9. Dans le champ Remplacement du chemin, entrez le chemin d'accès du compartiment Amazon S3, selon le format BUCKET_NAME/{object}.
10. Dans le champ Rôle d'exécution, collez l'ARN du rôle IAM que vous avez créé plus tôt.
11. Sélectionnez Enregistrer.
12. Choisissez GET pour le Nom de la ressource {object}, puis sélectionnez Demande d'intégration.
13. Développez le champ des Paramètres de chemin d'URL, saisissez un objet de valeur de nom et Mappage à partir de la valeur method.request.path.object, puis cochez la case pour enregistrer.

Configuration des 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 du backend à son homologue du frontend. Le navigateur peut ainsi traiter correctement la réponse avec le type de contenu.

1. Choisissez GET sous Ressources /, puis sélectionnez Réponse de méthode.
2. Développez la flèche à côté de HTTP Status 200 sous En-têtes de réponse pour 200, puis choisissez Ajouter un en-tête.
3. Définissez le Nom de l'en-tête comme Content-Type, puis cochez la case pour enregistrer les modifications.
4. Choisissez Exécution de la méthode.
5. Choisissez Réponse d'intégration, puis développez la flèche à côté des Expressions régulières du statut HTTP.
6. Développez le champ Mappages d'en-tête. Pour Content-Type, saisissez la valeur de mappage sous la forme integration.response.header.Content-Type.
7. Répétez les étapes 1 à 6 pour la méthode GET sous Ressource/{object}.
8. Répétez les étapes de la section Déploiement de l'API REST.

Test du proxy d’API

Utilisez un navigateur ou une commande curl pour tester le proxy d’API de votre site Web statique Amazon S3 :

Ressource racine (/)

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

Ressource {object}

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

Informations complémentaires

Didacticiel : Création d’une API REST en tant que proxy Amazon S3 dans la passerelle API

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

Création d’une API REST dans Amazon API Gateway

Déploiement d’une API REST à partir de la console passerelle API