Amélioration de l’expérience utilisateur : stratégies pour remédier aux ressources d’images manquantes hébergées sur S3 via Cloudfront

Dans l’environnement en ligne compétitif d’aujourd’hui, où l’expérience utilisateur influence directement la réputation et les revenus de la marque, il est primordial de garantir que chaque élément de votre site Web fonctionne parfaitement. Les liens d’images rompus, souvent négligés, peuvent rapidement éroder la confiance et l’engagement des utilisateurs. Pour les entreprises qui s’appuient sur des services AWS comme S3 et CloudFront, ces problèmes peuvent s’aggraver s’ils ne sont pas résolus rapidement. Dans ce blog, nous verrons comment vous pouvez exploiter la puissance des journaux S3 pour identifier et résoudre rapidement les images manquantes, améliorant ainsi la fiabilité et les performances de votre site Web.

Les images disparaissent souvent lorsque le contenu est diffusé via une distribution CloudFront utilisant S3 comme source, ce qui entraîne des liens rompus qui ont un impact négatif sur l’expérience utilisateur. L’identification de ces actifs manquants peut devenir de plus en plus difficile à mesure que le volume de demandes et d’actifs augmente. Pour atténuer rapidement ces problèmes et alerter les bonnes parties prenantes, la mise en œuvre d’un système de surveillance robuste est cruciale.

Sur les sites Web contenant de nombreuses images réparties sur différentes pages, vérifier manuellement chaque page pour détecter les images manquantes est non seulement fastidieux mais également inefficace. À mesure que le site Web se développe, cette tâche devient de plus en plus difficile, entraînant un risque plus élevé de liens rompus négligés. Pour résoudre ce problème, une solution de surveillance centralisée est nécessaire. Ce système vous permettra d’identifier facilement les images manquantes sur l’ensemble du site en visualisant les données dans Kibana ou en recevant des alertes via SNS. Cette approche garantit que toutes les images manquantes sont rapidement détectées et résolues, garantissant ainsi une expérience utilisateur transparente.

Pour relever le défi de l’identification des images manquantes, nous pouvons établir un système de surveillance en analysant les journaux S3 qui suivent les demandes d’images qui n’ont pas abouti. La solution comprend les composants suivants :

• Configuration CloudFront et S3:

• S3 est défini comme source pour CloudFront. Lorsqu’un utilisateur tente d’accéder à une image non présente dans le compartiment, S3 enregistre la demande.

• Activez la journalisation des accès au serveur pour le compartiment S3 désigné comme origine. Ces journaux capturent toutes les requêtes adressées au bucket, y compris celles concernant les images manquantes. Les journaux sont stockés dans un compartiment S3 distinct spécifiquement configuré pour l’analyse.

• Collecte de journaux avec Logstash:

• Logstash est utilisé pour collecter et traiter les journaux d’accès S3. Il peut être configuré pour interpréter les journaux, extraire des informations pertinentes concernant les images manquantes et préparer ces données pour une analyse plus approfondie.

• Traitement et visualisation des données:

• Elasticsearch et Kibana :Les journaux traités peuvent être téléchargés sur Elasticsearch pour l’indexation et la recherche. Avec Kibana, des tableaux de bord peuvent être créés pour visualiser le nombre d’images manquantes au fil du temps.
• SQS et Lambda:
  De plus, les journaux traités peuvent être envoyés vers une file d’attente Amazon SQS. Lorsque de nouveaux messages arrivent dans la file d’attente, une fonction Lambda est déclenchée. Après avoir traité ces messages, la fonction Lambda peut utiliser SNS pour envoyer des notifications.

Pour configurer le système de surveillance permettant d’identifier les images manquantes dans S3 à partir des requêtes CloudFront, procédez comme suit :

1. Configurer S3 et CloudFront

• Distribution CloudFront: configurez votre distribution CloudFront avec votre compartiment S3 comme origine.
• Activer la journalisation des accès S3: assurez-vous que la journalisation des accès S3 est activée et configurée pour se connecter à un compartiment S3 distinct.

2. Configurer la collecte de journaux avec Logstash

• Installer Logstash: Configurez Logstash sur votre serveur.
• Configurer Logstash pour lire les journaux S3:
  Logstash lira les journaux d’accès du compartiment S3 désigné.
  Utilisez des filtres pour analyser les journaux, en ciblant spécifiquement les erreurs 404, qui indiquent des images manquantes.
• La configuration Logstash pour le filtrage 404 les erreurs s’écrivent comme suit :

 
input {
  s3 {
    bucket => "my-log-bucket-111"  # Replace with your log bucket name
    prefix => "logs"               # Specify the path prefix for logs in your S3 bucket
    region => "us-east-1"          # Replace with your bucket's region
    codec  => "plain"
    type   => "logging"
  }
}

filter {
  grok {
    match => {
      "message" => '%{WORD:owner} %{NOTSPACE:bucket} \[%{HTTPDATE:timestamp}\] %{NOTSPACE:clientip} %{NOTSPACE:requester} %{NOTSPACE:request_id} %{NOTSPACE:operation} %{NOTSPACE:key} "%{NOTSPACE:request_method} %{NOTSPACE:request_url} %{NOTSPACE:request_protocol}" %{NOTSPACE:status_code}'
    }
  }

  # Drop logs that are not 404 errors
  if [status_code] !~ /^404$/ {
    drop {}
  }

  if [type] == "logging" {
    mutate {
      add_field => { "[@metadata][index_name]" => "s3-404-logs-%{+YYYY.MM.dd}" }
    }
  }
}

output {
  if [type] == "logging" {
    # Output to Elasticsearch
    elasticsearch {
      hosts => ["localhost:9200"]
      index => "%{[@metadata][index_name]}"
      manage_template => false
    }

    # Output to SQS
    sqs {
      id => "my_sqs_output_prod"
      queue => "failed-images"   # Replace with your SQS queue name
      region => "us-east-1"      # Replace with your SQS region
      codec => "json"
    }
  }
}

3. Traitement et visualisation des données

• Elasticsearch et Kibana:
  Transférez les journaux filtrés vers un cluster Elasticsearch. Utilisez Kibana pour créer des visualisations et des tableaux de bord qui suivent l’occurrence et les tendances des demandes d’images manquantes.

• SQS et Lambda
  Vous pouvez également diriger les données vers une file d’attente Amazon SQS. Configurez une fonction Lambda à activer lors de la réception de nouveaux messages. Cette fonction peut gérer les données du journal et utiliser SNS pour informer l’équipe de toute image manquante.

• Important: Remplacer sns_arn avec l’ARN de votre sujet SNS réel dans la fonction Lambda.
  

  import boto3 import json import logging import urllib.parse import os logger = logging.getLogger() logger.setLevel(logging.INFO) def sendSnsNotification(sns_arn, snsSubject, snsMessage, region_name):   logger.info("SNS subject: " + snsSubject)   logger.info("SNS message: " + snsMessage)   client = boto3.client('sns', region_name=region_name)   response = client.publish(       TopicArn=sns_arn,       Subject=snsSubject,       Message=snsMessage,   )   logger.info(response) def lambda_handler(event, context):   logger.info("Event: " + json.dumps(event))   try:       if 'Records' in event:           for record in event['Records']:               if isinstance(record, dict):                   body_content = record.get("body", "")                   logger.info("Raw body content: " + body_content)                   try:                       body = json.loads(body_content)                       logger.info("Parsed Body: " + json.dumps(body))                   except json.JSONDecodeError as e:                       logger.error("JSONDecodeError: Could not parse body content: {}".format(e))                       continue                   key = body.get('key')                   bucket = body.get('bucket')  # Extract the bucket name from the body                   logger.info(f"Bucket: {bucket}, Key: {key}")                   if not key or not bucket:                       logger.warning("Key or bucket name is missing in the message body.")                       continue                   file_name = urllib.parse.unquote(key)                   missing_uri = f"s3://{bucket}/{key}"                   print("sns arn printing")                   sns_arn = “arn:aws:sns:us-east-1:123456789012:my-topic”                   # Replace with your SNS ARN                   sns_subject = f"ToTheNew | Failed Images| Event Notification"                   sns_message = f"The file '{missing_uri}' was not found in the bucket 's3://{bucket}/'."                   sendSnsNotification(sns_arn, sns_subject, sns_message, region_name="us-east-1")   except Exception as e:       logger.error("Error processing records: {}".format(e))

  

  Superviser et suivre efficacement les images manquantes dans une distribution CloudFront avec S3 comme source est essentiel pour garantir une expérience utilisateur transparente. En utilisant la journalisation des accès S3, Logstash, Elasticsearch, Kibana, SQS, Lambda et SNS, nous pouvons créer un système fiable pour détecter et informer les équipes des actifs absents. Cette approche aide non seulement à identifier les problèmes, mais offre également des informations précieuses sur la manière dont les utilisateurs interagissent avec le réseau de diffusion de contenu.