Redirection par périphérique sur CloudFront desservant l'origine S3

Question

Existe-t-il un moyen de rediriger l'utilisateur vers la version mobile d'une application Web, par exemple m.foobar.com en fonction de l'en-tête User Agent à l'aide de CloudFront?

J'ai lu sur la mise en cache de l'en-tête en utilisant le type de périphérique de l'utilisateur en utilisant l'en-tête CloudFront-Is-Mobile-Viewer. Mais, je ne peux que l'ajouter à la liste blanche si j'utilise une origine personnalisée pour servir mes ressources (ELB ou une instance EC2). Dans un tel scénario, je pourrais éditer ma configuration de serveur pour gérer la redirection.

Cependant, j'utilise S3 pour servir mon application maintenant et je préférerais une solution dans l'écosystème CloudFront/S3.

Edit: Pour les distributions S3, je DONOT avoir accès aux CloudFront-Is-Mobile-Viewer et autres en-têtes des FC.

Toute aide, les pointeurs seraient grandement appréciés!

Renseignements généraux: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html https://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/

Answer 1

Voici comment je le résoudrais.

Lambda @ bord Fonction

'use strict'; 

exports.handler = (event, context, callback) => { 
    /* 
    * If mobile, redirect to mobile domain 
    */ 
    const isMobileHeader = 'CloudFront-Is-Mobile-Viewer' 

    const request = event.Records[0].cf.request; 
    const headers = request.headers; 

    let response = event.Records[0].cf.response; 
    if (headers[isMobileHeader.toLowerCase()] && headers[isMobileHeader.toLowerCase()] == "true") { 
     response = { 
     status: '302', 
     statusDescription: 'Found', 
     headers: { 
      location: [{ 
       key: 'Location', 
       value: 'http://m.foobar.com', 
      }], 
     }, 
    }; 

    callback(null, response); 
}; 

CloudFront Répartition

Behaviours: 
    Default: 
    Cache Based on Selected Request Headers: Whitelist 
    Whitelist Headers: 
     - CloudFront-Is-Mobile-Viewer 
    Lambda Function Associations: 
     Event Type: Viewer Response 
     Lambda Function ARN: [ARN of function from Lambda@Edge Function] 

Lectures

• Lambda@Edge
• Lambda@Edge Example functions

Modifier 1

tours dehors Origins S3, comme souligné Sanjay sont limited to a select set of headers for caching. Ma suggestion pour ce serait de changer d'origine S3, à une origine personnalisée, en utilisant S3 Static Website hosting, que nous pouvons ensuite cibler comme une origine personnalisée.

S3 Bucket Configuration

S3 Bucket: 
    Properties: 
    Static Website Hosting: Use this bucket to host a website 

Notez le nom Endpoint que vous êtes donné sur cette page, vous en aurez besoin pour l'étape suivante.

CloudFront Mises à jour

Origins: 
    Create Origin: 
    Origin Domain Name: [Endpoint from above] 
    Origin ID: Custom-S3StaticHosting 
Behaviours: 
    Default: 
    Origin: Custom-S3StaticHosting 

Answer 2

Voici comment je le résoudre.

Vous n'avez pas besoin d'effectuer une redirection pour les applications mobiles. (Évitez les redirections lorsque cela est possible) Vous pouvez utiliser la même URL pour diffuser des contenus sur ordinateur ou sur mobile.

Dans votre liste blanche de cloudfront, ajoutez CloudFront-Is-Mobile-Viewer en en-tête. Cela mettra en cache le contenu en fonction de votre appareil. Implémentation de l'afficheur Demandez Lambda Edge et ajoutez-le à CloudFront. Lambda Edge doit programmer pop ou CloudFront avant que la requête ne parvienne au serveur.

Dans LambdaEdge, vérifiez l'en-tête User-Agent et déterminez si vous souhaitez diffuser du contenu pour mobile ou de bureau. Si vous êtes mobile, vous pouvez modifier l'URL d'origine à partir des contenus mobiles. Sinon, vous pouvez la modifier en contenu de bureau ou en contenu par défaut.

Vous obtenez vos en-têtes http dans la requête utilisateur LambdaEdge.

bord Lambda Documentation:

http://docs.aws.amazon.com/lambda/latest/dg/lambda-edge.html

mise en œuvre du noeud de l'échantillon est disponible sur la page de référence.

Si vous voulez vraiment effectuer une redirection, vous pouvez le faire avec la réponse du téléspectateur et prendre une décision en fonction de l'en-tête du périphérique reçu.

Un exemple d'implémentation de la réponse spectateur est couvert dans ce blog,

https://aws.amazon.com/blogs/aws/lambdaedge-intelligent-processing-of-http-requests-at-the-edge/

La mise en œuvre ci-dessus recrache tout juste tous les en-têtes qu'il a reçues, au lieu d'envoyer 200 OK, le code doivent être modifié pour le statut 3xx avec l'emplacement de redirection.

Espérons que ça aide.

Answer 3

Actuellement réponse spectateur nous n'avons pas accès aux en-têtes CloudFront-Is-X-Viewer, même après leur mise en liste blanche et de plus état tête est lu -seulement. Je l'ai résolu en déclenchant à demande d'origine:

exports.handler = (event, context, callback) => { 
const name = 'cloudfront-is-mobile-viewer'; 
const request = event.Records[0].cf.request; 
const headers = request.headers; 

if (headers[name] && headers[name][0].value == "true") { 
    callback(null, { 
     status:'302', 
     statusDescription: 'Found', 
     headers: { 
      location: [{ 
       key: 'Location', 
       value: `http://m.example.com${request.uri}`, 
      }] 
     } 
    }) 
} 

callback(null, request); 

};