Рубрики
Uncategorized

Развертывание сайта Gatsby для NetLify с использованием Azure Tipvelines

Развертывание сайта Gatsby для NetLify очень просто и до сих пор хорошо послужило мне. Но у него есть несколько пределов, что привело к тому, что мои сборки не удались после Используя Azure Tipelines, пределы NetLify больше не являются проблемой. Tagged с Gatsby, DevOps, AzurePipelines, NetLify.

Развертывание сайта для NetLify очень просто и до сих пор хорошо послужило мне. Но у него есть несколько ограничений, что привело к тому, что мои сборки не удались после того, как мой сайт вырос до его текущего размера.

  • 15-минутный ограничение тайм-аута для сборки
  • Бесплатный уровень имеет 300 бесплатных минут в месяц. В большинстве случаев это нормально, но Гэтсби требует достаточного количества времени для обработки изображений, и я собирался достичь предела.

Первая попытка — кэшировать папки Gatsby

Некоторое время я смог решить проблему, используя неофициальную Gatsby-plugin-netlify-cache плагин. Плагин использует Общая папка без документов чтобы кэшировать и public Папки в рамках сборки.

К сожалению, у этого решения было 2 основных вопроса

  1. Сайт четкого кеша и развертывания потерпит неудачу.
  2. Поскольку мой сайт тяжелый изображение, я снова начал достигать предела.

Вторая попытка — используйте лазурные трубопроводы

Azure Pipelines использует файл конфигурации YAML для создания вашего проекта. Мы будем использовать шаблоны, чтобы мы могли иметь отдельные рабочие процессы для Pr и Выпуск строительство. Давайте создадим 3 файла:

  1. azure-pipelines.common.yaml : Файл шаблона с заданием для создания сайта Gatsby и развертывания для NetLify.
  2. Azure-Pipelines.pr.yaml : Трубопровод для запуска для PR (запрос на вытягивание).
  3. 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 изображение. За этим следует ряд шагов

  1. Оформление : Проверьте репо и загрузите файлы из git-lfs Анкет
  2. Установите node.js : Установить узел 10.x.
  3. Установить зависимости : Выполнить Установка пряжи Анкет
  4. Построить Гэтсби : Выполнить Строительница пряжи Сценарий, который вызывает Gatsby Build Анкет

Живые сборки

Давайте добавим триггер для живых сборок в Azure-Pipelines.ci.yaml Анкет

name: 'Live'

trigger:
    batch: false
    branches:
        include:
            - master

pr: none

jobs:
    - template: azure-pipelines.common.yml
  1. имя : Название для этого трубопровода.
  2. Триггер : Условия для запуска трубопровода, когда производится толчок.

    1. партия: ложь : Запустите трубопровод для каждого коммита, то есть отключить пакетирование сборок.
    2. ветви : Включите только Мастер ветвь так, чтобы трубопровод был запускается только для коммитов, выдвинутых до_Мастера_.
  3. PR: нет : Отключите запуск трубопровода, когда PR открывается или изменяются, выдвинуты на открытый PR.
  4. Работа : Задания для работы.

    1. Шаблон : Используйте шаблон работы, созданный в 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
  1. имя : Название для этого трубопровода.
  2. Триггер : Условия для запуска трубопровода, когда производится толчок.

    1. ветви : Исключить все ветви так, чтобы сборка не была запускается для коммитов в любой филиале, включая Мастер Анкет
  3. PR: : Условия для запуска трубопровода, когда открывается пиар или изменения в открытый PR.

    1. Autocancel : Дополнительные толчки не должны отменять пробеги в процессе.
    2. Включить : Включите только Мастер ветвь, чтобы трубопровод запускается только для PR, открытого против Мастер Анкет
  4. Работа : Задания для работы.

    1. Шаблон : Используйте шаблон работы, созданный в 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'
  1. параметры : Переменные среды, которые должны пройти в качестве флагов в команду NetLify Deploy.

    1. DeployScriptParams : Любые дополнительные параметры, которые должны быть переданы в команду развертывания.
    2. NetLifySiteId : Идентификатор сайта для сайта NetLify.
    3. NetLifyToken : Токен доступа для разрешения Azure Pipeline для развертывания сборки для NetLify.
    4. Сообщение : Сообщение включить в журнал развертывания.
  2. Развернуть в NetLify : Команда NetLify Deploy, которая принимает SiteID, токен, сообщение и DeployScriptParams в качестве флагов. Мы также установили Dir Flag публичный так что публичная папка развернута.

    1. # Претенционер : Я добавил это так, чтобы 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)'
  1. переменные : Мы устанавливаем файл шаблона, чтобы получить переменные среды.
  2. параметры : Параметры, которые должны быть переданы в шаблон работы

    1. DeployScriptParams : Для живых сборок я передаю флаг -Prod, который NetLify для развертывания сборки в производство.
    2. NetLifySiteId : Идентификатор сайта из переменных среды.
    3. NetLifyToken : Токен из переменных окружающей среды.
    4. Сообщение : Сообщение создается с использованием идентификатора коммита и комментария к коммитированию.

Следующий 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)'
  1. переменные : Мы устанавливаем файл шаблона, чтобы получить переменные среды.
  2. параметры : Параметры, которые должны быть переданы в шаблон работы

    1. NetLifySiteId : Идентификатор сайта из переменных среды.
    2. NetLifyToken : Токен из переменных окружающей среды.
    3. Сообщение : Сообщение создается с использованием номера запроса вытягивания, источника филиала и комментария к коммитированию.

Вывод

Используя Azure Tipelines, пределы NetLify больше не являются проблемой. В более позднем посте мы увидим, как мы можем добавить тесты и запустить их против URL -адреса Deploy.

Оригинал: «https://dev.to/ankursheel/deploying-a-gatsby-site-to-netlify-using-azure-pipelines-om2»