Рубрики
Uncategorized

PR-превью для вашего статического сайта с CodeBuild и Lambda @ Edge

Настройте конвейер постоянного развертывания для статического сайта, при этом Pull Chauge Previewse Preview, используя AWS. Помечено без промежуточного, лямбда, gatsby, devops.

Статические генераторы сайта потрясающие (особенно GATSBY ), и они очень хорошо работают с постоянным развертыванием. Подтолкните к вашему GIT REPO, ваши тесты CI работают, ваш сайт строит, затем он идет в прямом эфире. Что не нравится? Даже лучше, когда вы можете автоматически строить превью всех ваших запросов на тягу. NetLify делает это, и это серьезно круто. Мой блог размещен с NetLify, и я большой поклонник. Однако в настоящее время я работаю над большим сайтом GATSBY с большим количеством изображений, которые нуждаются в обработке, и, к сожалению, я бегут к 15-минутному ограничению сборки NetLify. Это побудило меня снова посмотреть на CodeBuild , который является услугой сборки AWS. Это может сделать довольно хорошую работу непрерывно развертывания статического сайта от Github до S3 прямо из коробки. Что это не делает, это создать развертывание превью. Это ударило меня как идеальное использование для Лямбда @ край , который позволяет настроить запросы и ответы в CloudFront.

Подход, который я собираюсь взять:

  • Настройте CodeBuild для создания запросов Pull GitHub
  • Нажмите их на S3 в каталогах, которые соответствуют названию запроса на тягу
  • Разверните их в Cloudfront с подстановкой поддонов
  • Используйте Lambda @ Edge, чтобы эмулировать виртуальные хосты, с поддоменами, соответствующими названием запроса на тягу

Настройка CodeBuild.

Первая часть довольно проста. Перейти к CodeBuild И создайте новый проект с GitHub в качестве источника. Установите его для автоматического создания на Push. Как только вы связываете его с GitHub, он будет установлен веб -ook для запуска сборки. По умолчанию это будет вызываться на каждом толчке, который не то, что мы хотим. Если вы попадаете в настройки репозитория в GitHub, в разделе WebHook снимите флажок, кроме Pull запросов.

Вам нужно выбрать несколько настроек для среды сборки. Я использую изображение Ubuntu с узлом 8, который мы хотим для строительства GATSBY. Есть другие изображения, которые вы можете выбрать, или вы даже можете указать свой собственный контейнер Docker. Обязательно включите кэширование, которое мы настроим ниже.

CodeBuild использует файл buildspec.yml определить, как построить проект. В этом файле вы можете определить команды, используемые на каждом этапе процесса сборки. Наша настройка здесь довольно проста, но это очень гибко.

Я использую пряжу для этого проекта, который не включен в образы CodeBuild, но достаточно легко устанавливать. Затем я бегу пряжа построить построить сайт. Причина, по которой мы попали в это, заключается в том, что на моем сайте это изначально занимает много времени — около 18 минут на экземпляре по умолчанию. Однако мы включили кэширование, поэтому последующие сборки быстро.

По умолчанию CodeBuild может развернуть в S3. Однако это не так гибко, как нам нужно. Для начала он работает, не удается ли постройка, которая не то, что мы хотим. Он также проходит прямо в конце процесса, после того, как кэш сборки загрузки, который занимает возраст, поэтому вы можете застрять для десяти минимумов, ожидающих на 1 минуту постройки для развертывания. Берегите себя сами в фазе сборки, вы можете быстро синхронизировать до того, как более медленный кеш загружается. У вас также есть полный контроль над процессом.

Для предварительного просмотра развертывания мы хотим загрузить сборку в каталог, который соответствует названию запроса на тягу. К счастью, у нас есть доступ к этому в $ Codebuild_webhook_trigger Переменная среды. Если вы посмотрите на более старые документы (или предыдущие версии этого поста), вы можете увидеть это как $ Codebuild_source_version , но сейчас всегда содержит фиксацию хэш. Для запроса на тягу переменная будет в форме «Pr/22». Мы не можем использовать это Прямо как ключ ведра, потому что нам нужно, чтобы это был действительный поддомен. К счастью, мы можем использовать команды Shell внутри YAML, чтобы мы могли использовать TR заменить / с - :

echo $CODEBUILD_WEBHOOK_TRIGGER | tr / -

Команда, которую мы используем для толкания сборки на S3, это AWS Sync. . --delete Флаг означает любые локальные файлы, которые удалены, также будут удалены из ведра.

# buildspec.yml
version: 0.2

phases:
    install:
        commands:
            - npm i -g yarn
            - yarn
    build:
        commands:
            - yarn build && aws s3 sync --delete public "s3://your-example-bucket/previews/$(echo $CODEBUILD_WEBHOOK_TRIGGER | tr / -)"

cache:
    paths:
        - node_modules/**/*
        - public/**/*
        - /usr/local/lib/node_modules/**/*

Если вы развертываете это сейчас, он будет строить, но не смогу подтолкнуть к ведрю. Вам нужно будет отправиться в IAM и настроить разрешения.

Cloudfront.

Вы можете запустить сборку сейчас и развернуть его в S3. Вы можете обслуживать сайт напрямую от S3, используя функции хостинга сайта, но это не здорово. Если вы хотите использовать функции сайта (которые вы делаете, как вам нужно указать файлы индекса), вы не можете использовать HTTPS. Это сделки в 2018 году. Вы также не можете подавать отказаться от сжатия. В основном, когда вы обслуживаете сайт от S3, вы должны использовать CloudFront. К счастью, довольно просто настроить Cloudfront с Backend S3.

Чтобы настроить HTTPS, вам необходимо убедиться, что вы управляете домен. Это Super Simple, если зона размещена в маршруте 53: выберите проверку DNS, затем нажмите «Убедитесь, и» будет кнопка, которая добавляет запись в маршрут 53 для вас.

Лямбда @ край

Это отличная новая служба, которая позволяет запустить функции лямбда на граничных серверах CloudFront. Когда я впервые услышал об этом, я не мог думать о использовании для этого, но это идеальный пример. Мы собираемся использовать поддомен, чтобы переписать запросы, отображать их к каталогам, которые проводят наши превью. Код довольно прост. Мы извлекаем поддоменность из заголовка хоста запроса, затем переписывайте URI запроса. Мы также добавим трейлинг-чесушку, чтобы запросить каталоги, чтобы избежать перенаправления.

"use strict";

/*
 * This extracts the subdomain from the request host, and rewrites the request uri
 * to use it as a folder. e.g https://pr-4.example.com/under_construction.gif is rewritten
 * to https://pr-4.example.com/preview/pr-4/under_construction.gif
 */
exports.handler = (event, context, callback) => {
  const { request } = event.Records[0].cf;
  const { host, accept } = request.headers;

  if (
    accept &&
    accept.length &&
    accept[0].value.includes("/html") &&
    !(request.uri.endsWith("/") || request.uri.endsWith(".html"))
  ) {
    request.uri += "/";
  }

  if (host && host.length) {
    // Destructured assignment extracts the first item in an array
    const [subdomain] = host[0].value.split(".");
    if (subdomain) {
      request.uri = `/public/${subdomain}${request.uri}`;
      return callback(null, request);
    }
  }

  callback("Missing Host header");
};

Создайте новую лямбда с узлом. JS 8 и вставка в код выше. Сохраните его, затем выберите Действия и опубликуйте. Cloudfront требует, чтобы вы использовали опубликованную версию лямбда. Любые изменения, которые вы делаете, должны быть опубликованы, и лямбда обновляет в Cloudfront. Как только это сделано, перейдите в список триггеров слева и выберите Cloudfront. В разделе конфигурации выберите распределение CloudFront, которое вы создали ранее, а затем «Запрос на просмотрщик».

Есть четыре этапа, где вы можете запустить функцию strambda @ Edge. Запрос зрителя, который является когда запрос прибывает на CloudFront; Запрос происхождения, который находится непосредственно перед Cloudfront, делает запрос на сервер происхождения; Ответ происхождения, который заключается в том, когда ответ прибывает от сервера происхождения; и ответ зрителя, который находится на самом деле до того, как ответ отправляется на зритель. Нам нужно запустить на этапе запроса зрителя, потому что нам нужен доступ к заголовку хоста запроса.

Исправление заголовков кэша

Эти инструкции относятся к GATSBY, но вам нужно сделать что-то подобное для вашего статического генератора сайта. По умолчанию S3 не добавляет какие-либо заголовки управления кэш для его ответов. Это плохое, так как это означает, что браузер ничего не будет кэшировать, потерять одну из величайших преимуществ статического сайта. Вы можете ASDD атрибуты Cache-Control, когда вы загружаете в S3, но, как мы уже используем Lambda @ Edge, мы можем более гибко добавить их здесь. На этот раз вам нужно добавить их на сцену ответа на то, где ответ от S3 прибывает на CloudFront Bereft заголовков кэша.

С GATSBY рекомендуется, чтобы вы не кэшируете HTML-файлы, но поскольку все другие активы используют хеши имени файла, они должны быть кэшированы навсегда. Мы можем добавить соответствующие заголовки на лету.

Мы также переписываем любые перенаправления, удаляя каталоги, которые мы добавили раньше.

Создайте новую лямбда со следующим контентом:

"use strict";

exports.handler = (event, context, callback) => {
  const { response } = event.Records[0].cf;
  if (response.status === 302) {
    const { location } = response.headers;
    if (location && location.length) {
      // Strip the leading 2 directories from redirects
      response.headers.location[0].value = location.replace(
        /\/([^\/]+)\/([^\/]+)(\/.*)/,
        "$3"
      );
    }
  }
  const type = response.headers["content-type"];
  let cache;
  if (type && type.length && type[0].value === "text/html") {
    cache = "public,max-age=0,must-revalidate";
  } else {
    cache = "public,max-age=31536000,immutable";
  }
  response.headers["cache-control"] = [{ key: "Cache-Control", value: cache }];

  callback(null, response);
};

Исправление типов MIME

По умолчанию AWS CLI пытается угадать миметип загруженных файлов. Это хорошо, потому что S3 не использует правила имени файла при обслуживании содержимого. К сожалению, библиотека Python, которую она использует, читает файл mime.types os.types, а изображения, используемые codebuild, имеют серьезно устаревшую версию, отсутствуют такие неясные типы, как .json. К счастью, это довольно легко исправить: просто замените файл mime.types по умолчанию с последним verison из apache. Мы можем добавить это как команда в нашем BuildSpec:

# buildspec.yml
version: 0.2

phases:
    install:
        commands:
            - curl -s -o mime.types "https://svn.apache.org/viewvc/httpd/httpd/trunk/docs/conf/mime.types?view=co"
            - sudo mv mime.types /etc/
            - npm i -g yarn
            - yarn
    build:
        commands:
            - yarn build && aws s3 sync --delete public "s3://your-example-bucket/previews/$(echo $CODEBUILD_WEBHOOK_TRIGGER | tr / -)"

cache:
    paths:
        - node_modules/**/*
        - public/**/*
        - /usr/local/lib/node_modules/**/*

Теперь Когда вы синхронизируете свои файлы, даже ваш .woff2, .webp и файлы .json будут поданы с правильными mimetypes, что означает, что они будут сжиматься правильно.

Теперь вы должны быть в состоянии открыть запрос на тягу или подтолкнуть к существующему и иметь CodeBuild Build и развернуть предварительный просмотр к S3 и Cloudfront.

Первоначально опубликовано в Mk.gg. Следующая часть будет о развертывании живого сайта при объединении к освоению.

Оригинал: «https://dev.to/ascorbic/pr-previews-for-your-static-site-with-codebuild-and-lambdaedge-2n60»

Читайте ещё по теме: