Блог

Я загрузил в S3 файлы ниже:

• EntryPoint__fd6b122d5ca60cd57ec5.js
• index.html
• Main.css

Но сервер возвращает содержимое ниже:

Особенно странный серый: он не похож на file. Его имя (filename?) — это идентификатор из URN:

 https://XXXX.com/product/53483ca1-9fd1-4970-841d-e9fbeadd4660
  

Но когда я проверил содержимое EntryPoint__fd6b122d5ca60cd57ec5.js , Main.css я увидел тот же HTML-код, что и на картинке выше (другими словами, содержимое 53483ca1-9fd1-4970-841d-e9fbeadd4660 , Main.css и EntryPoint__fd6b122d5ca60cd57ec5.js четное).

У меня ошибка:

 Uncaught SyntaxError: Unexpected token '<'    
EntryPoint__fd6b122d5ca60cd57ec5.js:1 
  

Чтобы устранить эту ошибку, сначала мне нужно понять, что CloudFront / S3 сделал с моими файлами. Что такое gray one? Где было задано его название?

В любом случае, он сделал что-то не так: EntryPoint__fd6b122d5ca60cd57ec5.js содержит HTML-контент, и, конечно же, JavaScript не может его разобрать.

Обновление или запрос: развертывание в задачу S3

 const applicationDeployment = ({
  targetFilesGlobSelections,
  targetIsFunctionalTesting = false
}) =>

   Gulp.src(targetFilesGlobSelections)

       .pipe(GulpPlugins.plumber({
         errorHandler: (error) => {
           console.error("Task: 'DeployApplication', error occurred:");
           console.error(error);
           NodeNotifier.notify({
             title: "Task: 'DeployApplication', error occurred:",
             message: error.message
           });
         }
       }))

       .pipe(GulpPlugins.s3(
          targetIsFunctionalTesting ? AMAZON_S3_DEPLOYMENT_CONFIG__FUNCTIONAL_STAGING : AMAZON_S3_DEPLOYMENT_CONFIG__PRODUCTION
       ));

Gulp.task("Deployment to production", () => applicationDeployment({
  targetFilesGlobSelections: `${public}/**/**`
}));
  

1. Просмотрщик запрашивает веб-сайт поwww.example.com.
2. Если запрошенный объект кэширован, CloudFront возвращает объект из своего кэша в программу просмотра.
3. Если объекта нет в кэше CloudFront, CloudFront запрашивает объект из источника (корзины S3).
4. S3 возвращает объект в CloudFront, который запускает событие ответа Lambda@Edge origin.
5. Объект, включая заголовки безопасности, добавленные функцией Lambda @Edge, добавляется в кэш CloudFront.
6. (Не показано) Объекты возвращаются в программу просмотра. Последующие запросы для объекта, которые поступают в то же местоположение на границе CloudFront, обслуживаются из кэша CloudFront.

Как упоминалось в 5-м пункте, давайте подробнее рассмотрим Lambda @Edge! Существует множество применений для обработки Lambda @Edge. Например:

• Функция Lambda может проверять файлы cookie и переписывать URL-адреса, чтобы пользователи видели разные версии сайта для A / B. Тестирование.
• CloudFront может возвращать зрителям разные объекты в зависимости от используемого ими устройства, проверяя заголовок User-Agent, который содержит информацию об устройствах. Например, CloudFront может возвращать разные изображения в зависимости от размера экрана своего устройства. Аналогично, функция может учитывать значение заголовка Referer и заставлять CloudFront возвращать изображения ботам с наименьшим доступным разрешением.
• Или вы могли бы проверить файлы cookie по другим критериям. Например, на веб-сайте розничной торговли, который продает одежду, если вы используете файлы cookie, чтобы указать, какой цвет пользователь выбрал для куртки, функция Lambda может изменить запрос, чтобы CloudFront вернул изображение куртки в выбранном цвете.
• Функция Lambda может генерировать HTTP-ответы при возникновении запроса CloudFront viewer или событий исходного запроса.
• Функция может проверять заголовки или токены авторизации и вставлять заголовок для управления доступом к вашему контенту, прежде чем CloudFront перенаправит запрос вашему источнику.
• Функция Lambda также может выполнять сетевые вызовы внешних ресурсов для подтверждения учетных данных пользователя или извлекать дополнительный контент для настройки ответа.

Я надеюсь, что это поможет вам понять, что произошло с вашими файлами. При проверке серые файлы означают HTML, оранжевые / желтые — файл javascript или .js, а синие — файл css.

Ниже приведен пример моих файлов!