Развертывание сайта для NetLify очень просто и до сих пор хорошо послужило мне. Но у него есть несколько ограничений, что привело к тому, что мои сборки не удались после того, как мой сайт вырос до его текущего размера.
- 15-минутный ограничение тайм-аута для сборки
- Бесплатный уровень имеет 300 бесплатных минут в месяц. В большинстве случаев это нормально, но Гэтсби требует достаточного количества времени для обработки изображений, и я собирался достичь предела.
Первая попытка — кэшировать папки Gatsby
Некоторое время я смог решить проблему, используя неофициальную Gatsby-plugin-netlify-cache плагин. Плагин использует Общая папка без документов чтобы кэшировать и public Папки в рамках сборки.
К сожалению, у этого решения было 2 основных вопроса
- Сайт четкого кеша и развертывания потерпит неудачу.
- Поскольку мой сайт тяжелый изображение, я снова начал достигать предела.
Вторая попытка — используйте лазурные трубопроводы
Azure Pipelines использует файл конфигурации YAML для создания вашего проекта. Мы будем использовать шаблоны, чтобы мы могли иметь отдельные рабочие процессы для Pr и Выпуск строительство. Давайте создадим 3 файла:
- azure-pipelines.common.yaml : Файл шаблона с заданием для создания сайта Gatsby и развертывания для NetLify.
- Azure-Pipelines.pr.yaml : Трубопровод для запуска для PR (запрос на вытягивание).
- Azure-Pipelines.ci.yaml : Трубопровод для бега за живые сборки.
Общая работа по созданию сайта Gatsby
В azure-pipelines.common.yaml Мы создаем работу, чтобы построить сайт Gatsby.
jobs: - job: Build pool: vmImage: 'ubuntu-latest' steps: - checkout: self lfs: true - task: NodeTool@0 displayName: 'Install Node.js' inputs: versionSpec: '10.x' - script: yarn install displayName: 'Install dependencies' - script: yarn build displayName: 'Build Gatsby'
Мы называем работу как Сборка и используйте по умолчанию Ubuntu-Latest изображение. За этим следует ряд шагов
- Оформление : Проверьте репо и загрузите файлы из git-lfs Анкет
- Установите node.js : Установить узел 10.x.
- Установить зависимости : Выполнить Установка пряжи Анкет
- Построить Гэтсби : Выполнить Строительница пряжи Сценарий, который вызывает Gatsby Build Анкет
Живые сборки
Давайте добавим триггер для живых сборок в Azure-Pipelines.ci.yaml Анкет
name: 'Live' trigger: batch: false branches: include: - master pr: none jobs: - template: azure-pipelines.common.yml
- имя : Название для этого трубопровода.
Триггер : Условия для запуска трубопровода, когда производится толчок.
- партия: ложь : Запустите трубопровод для каждого коммита, то есть отключить пакетирование сборок.
- ветви : Включите только Мастер ветвь так, чтобы трубопровод был запускается только для коммитов, выдвинутых до_Мастера_.
- PR: нет : Отключите запуск трубопровода, когда PR открывается или изменяются, выдвинуты на открытый PR.
Работа : Задания для работы.
- Шаблон : Используйте шаблон работы, созданный в Azure-pipelines.common.yml .
PR (запросы на вытягивание) сборки
Я также хочу, чтобы сборка была вызвана каждый раз, когда производится PR против Мастер Анкет
name: 'PR $(System.PullRequest.PullRequestId)' trigger: branches: exclude: - '*' pr: autoCancel: false branches: include: - master - template: azure-pipelines.common.yml
- имя : Название для этого трубопровода.
Триггер : Условия для запуска трубопровода, когда производится толчок.
- ветви : Исключить все ветви так, чтобы сборка не была запускается для коммитов в любой филиале, включая Мастер Анкет
PR: : Условия для запуска трубопровода, когда открывается пиар или изменения в открытый PR.
- Autocancel : Дополнительные толчки не должны отменять пробеги в процессе.
- Включить : Включите только Мастер ветвь, чтобы трубопровод запускается только для PR, открытого против Мастер Анкет
Работа : Задания для работы.
- Шаблон : Используйте шаблон работы, созданный в Azure-pipelines.common.yml .
На этом этапе вам может быть интересно иметь 2 отдельных файла для пиаров и живых сборок. Это станет важным в следующем разделе, когда мы добавим шаги для развертывания в NetLify.
Развертывание в NetLify
Чтобы развернуться в NetLify, нам нужно несколько переменных, которые будут переданы в шаблон в виде параметров, а затем переданы в качестве флагов в команду развертывания NetLify.
Во -первых, давайте посмотрим, какие изменения нам нужно внести в шаблон Azure-pipelines.common.yml .
parameters: deployScriptParams: '' # defaults for any parameters that aren't specified netlifySiteId: 'defaultID' netlifyToken: 'defaultToken' message: ''jobs: - job: Build_And_Deploy pool: vmImage: 'ubuntu-latest' steps: #unchanged from before - script: yarn build displayName: 'Build Gatsby' # prettier-ignore - script: yarn netlify deploy --site ${{ parameters.netlifySiteId }} --auth ${{ parameters.netlifyToken }} --message '${{ parameters.message }}' ${{ parameters.deployScriptParams }} --dir=public displayName: 'Deploy to Netlify'
параметры : Переменные среды, которые должны пройти в качестве флагов в команду NetLify Deploy.
- DeployScriptParams : Любые дополнительные параметры, которые должны быть переданы в команду развертывания.
- NetLifySiteId : Идентификатор сайта для сайта NetLify.
- NetLifyToken : Токен доступа для разрешения Azure Pipeline для развертывания сборки для NetLify.
- Сообщение : Сообщение включить в журнал развертывания.
Развернуть в NetLify : Команда NetLify Deploy, которая принимает SiteID, токен, сообщение и DeployScriptParams в качестве флагов. Мы также установили Dir Flag публичный так что публичная папка развернута.
- # Претенционер : Я добавил это так, чтобы Creatier не пытался разбить команду на несколько строк.
Теперь мы обновляем azure-piplelines.ci.yaml для живой сборки.
# unchanged from before variables: - template: azure-pipelines.vars.yml jobs: - template: azure-pipelines.common.yml parameters: deployScriptParams: '--prod' netlifySiteId: $(netlify.siteId) netlifyToken: $(netlify.token) message: 'Live $(Build.SourceVersion) $(Build.SourceVersionMessage)'
- переменные : Мы устанавливаем файл шаблона, чтобы получить переменные среды.
параметры : Параметры, которые должны быть переданы в шаблон работы
- DeployScriptParams : Для живых сборок я передаю флаг -Prod, который NetLify для развертывания сборки в производство.
- NetLifySiteId : Идентификатор сайта из переменных среды.
- NetLifyToken : Токен из переменных окружающей среды.
- Сообщение : Сообщение создается с использованием идентификатора коммита и комментария к коммитированию.
Следующий Azure-Pipelines.pr.yaml для PR -сборки. Новые линии выделены.
# unchanged from before variables: - template: azure-pipelines.vars.yml jobs: - template: azure-pipelines.common.yml parameters: netlifySiteId: $(netlify.siteId) netlifyToken: $(netlify.token) message: 'PR $(System.PullRequest.PullRequestNumber) $(System.PullRequest.SourceBranch) $(Build.SourceVersionMessage)'
- переменные : Мы устанавливаем файл шаблона, чтобы получить переменные среды.
параметры : Параметры, которые должны быть переданы в шаблон работы
- NetLifySiteId : Идентификатор сайта из переменных среды.
- NetLifyToken : Токен из переменных окружающей среды.
- Сообщение : Сообщение создается с использованием номера запроса вытягивания, источника филиала и комментария к коммитированию.
Вывод
Используя Azure Tipelines, пределы NetLify больше не являются проблемой. В более позднем посте мы увидим, как мы можем добавить тесты и запустить их против URL -адреса Deploy.
Оригинал: «https://dev.to/ankursheel/deploying-a-gatsby-site-to-netlify-using-azure-pipelines-om2»