10 Возможностей Netlify для удивления и восхищения

Некоторое время я был большим клиентом Netlify . На самом деле я стал настолько восторженным, что недавно присоединился к компании.

В первые дни работы в качестве сотрудника Netlify я узнал о некоторых особенностях, которые меня удивили. Ответ на мой твит, объявляющий мою новую роль, тоже был интересным. Я получил много добрых слов поздравлений вместе с вопросами об особенностях, которые, как я предполагал, были хорошо известны или понятны. Справедливости ради, вопрос Реми был приятным легким, чтобы я начал играть свою роль в отношениях с разработчиками:

Я взял тебя, Реми! Подумайте, «Net» и «Simplify» . Теперь скажите это со мной: net-li-fy.

На первый взгляд вам будет прощено думать, что Netlify является статическим решением для веб-хостинга. Это так, но это идет намного дальше. Недавняя работа по перепланировке Smashing Magazine на JAMstack, размещенном на Netlify, демонстрирует невероятный потенциал такого подхода.

Итак, вот краткий список некоторых функций Netlify, о которых вы, возможно, не знаете. Все они доступны независимо от того, на каком уровне оплаты вы находитесь. Да, даже свободный уровень.

Но во-первых, слово на простейшем пути для начала

С Netlify невероятно просто начать работу. И вам не нужно знать обо всех мощных функциях под капотом, чтобы начать пользоваться ими.

Самый простой способ получить статический веб-сайт, размещенный в Netlify (возможно, где угодно?), - это перетащить папку ваших файлов прямо в браузер на https://app.netlify.com.

Netlify упрощает перетаскивание

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

Я был. Ты поймал меня. Хорошо, в список.

1. Атомное развертывание с мгновенной публикацией и откатами

Этот человек будет чувствовать себя роскошью для любого, кто работал с традиционным клиентом в рамках крупного проекта веб-разработки, который включал в план проекта такие вещи, как «развертывание», «вживую» или «переключение».

Каждое успешное построение Netlify приводит к появлению недавно развернутого экземпляра вашего сайта. Публикация в узлах NetNEID CDN и такие вещи, как недействительность кэша, происходят автоматически и как можно ближе к тому, как я бы хотел измерить.

Развертывания являются неизменными. То есть, каждое развертывание приводит к версии сайта, которая никогда не изменяется. Последующие обновления создают новые экземпляры сайта для замены предыдущих версий (которые тихо благодарны за их обслуживание и выходят на пенсию, но не уничтожаются). Это означает, что вы можете вернуться к любой предыдущей сборке в любое время одним нажатием кнопки в консоли администратора или через API.

(Кстати, все, что вы можете сделать через консоль администратора, также возможно через API. (Посмотрите документы API, чтобы понять, как много вы можете сделать.) Это не один из моих 10. Это просто маленький бонусный самородок для вас!)

2. Уведомления и постоянные ссылки

Я снова в этом. Я пытаюсь сжать несколько деталей в один элемент в этом списке. Без разницы. Вы могли бы также привыкнуть к этому.

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

Вы можете настроить уведомления, чтобы перейти на адреса электронной почты или на канал Slack (который мне нравится, у всех моих проектов есть канал CI slack). Вы даже можете, чтобы эти уведомления запускали веб-чек или добавляли сообщения Git для комментирования или комментариев для запроса запросов.

Что делает эти уведомления еще более полезными, так это то, что они включают постоянную ссылку на развертывание, о котором идет речь. Я уже упоминал, что все развертывания неизменны и живут вечно. Это означает, что каждый может иметь собственный URL-адрес, к которому вы можете получить доступ, чтобы увидеть это развертывание.

Наличие постоянных ссылок для каждого развертывания огромно. Он сразу же разблокирует возможность совместного использования состояния любой версии вашей сборки с группой тестирования, клиентом, кем угодно. «Как выглядел сайт в версии 3.2.14? Ах, вот оно.

И этот мгновенный доступ доставляется вам прямо из каждого уведомления.

3. Развертывания филиалов и субдомены

Очень удобно иметь возможность развертывать ветви помимо мастера. Создание новых функций в филиалах функций, а затем тестирование и просмотр их в реальной среде хостинга невероятно мощный.

Netlify дает вам некоторый контроль над развертыванием. Вы можете выбрать, нужно ли развертывать только свою производственную ветвь, все ветви или несколько названных ветвей.

Регуляторы непрерывного развертывания Netlify

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

my-branch-name–my-site-name.netlify.com

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

4. Тестирование A / B, многовариантное тестирование или раздельное тестирование

Люди ссылаются на тестирование A / B несколькими терминами, но Netlify называет это «разделенным тестированием», потому что он делает именно это: разбивает трафик на ваш сайт между любыми филиалами, которые вы указали.

Вы можете разделить свой трафик на столько филиалов, сколько хотите, указав, какой процент трафика должен идти туда.

Конфигурация тестирования Netlify.

Эта функция уносит меня. Это делает реальный A / B или многовариантное тестирование тривиально простым. Если вы уже используете преимущества развертывания филиала, остается очень мало дел.

Да, уже существует ряд компаний, которые могут продавать вам возможности тестирования A / B для вашего сайта. Я для них был большим болельщиком. Но большинство, если не все из них, делают это с помощью некоторых хакеров Javascript после того, как ваш сайт будет обслуживаться и загружен в браузер.

Учитывая, что мы, как хорошие веб-разработчики, стараемся минимизировать влияние внешних ресурсов javascript на рендеринг наших сайтов, очень стыдно отменить всю эту хорошую работу, введя узкое место производительности в наш конвейер рендеринга ,

Более того, если производительность вариантов, которые мы тестируем, отличается от того, что является «живым», то как мы можем получить истинное сравнение, похожее на то, как работают параметры? Тесты искажены.

Подход Netlify обслуживает каждый вариант непосредственно из собственного CDN. Все форматы формирования трафика, варианты взвешивания, согласованности согласованности пользователей и другие умные вещи происходят прямо на CDN - по краю, насколько это возможно ближе к пользователю.

Каждый вариант обслуживается и представляется «как производство». Удивительно.

5. Команды контекстной сборки

Вы можете не только развернуть разные филиалы, но и настроить контент и среды в своих развертываниях в соответствии с различными контекстами, такими как постановка, тестирование и производство.

Раньше было, что предоставление различных условий для вашего проекта может быть сложным. Netlify делает это проще, чем я когда-либо видел. Вы можете создать staging.your-project.com и staging.your-project.com или что- staging.your-project.com еще, что вам нужно, рядом с вашим www.your-project.com с немного большей, чем какая-либо конфигурация. И все они получают идентичную среду, которая является таким важным аспектом надежной стратегии разработки и выпуска.

Возможно, вам захочется запустить несколько несколько разных команд сборки в зависимости от среды, в которую вы развертываетесь, или для создания функции, которая еще не создана. Это можно сделать, настроив различные контексты сборки .

Это позволяет вам делать такие вещи, как сборка для сборки с помощью gulp build:prod и для построения ветвей функций с помощью gulp build:my-feature . Handy!

Это настраивается конфигурационным файлом, который можно сохранить в корне проекта для доступа ко всем видам опций в ваших сборках Netlify: netlify.toml

например:

# Our global, build settings
[build]
   base    = "site"        # run the buold from this directory
   publish = "public"      # the output diretory to push to the CDN after the build
   command = "gulp build"  # the command to build our site

# Specific branch context: Deploys from this branch
# will take these settings and override their
# current ones.
[context."feature/branch"]
command = "gulp build:my-feature" # For this branch we'd prefer to build with this


//Пример файла конфигурации сайта netlify.toml

Более подробную информацию о развертывании контекстов в документах можно найти.

6. Управление SSL и бесплатный SSL от Let's Encrypt

Хотя это может быть и не сразу очевидным, на самом деле очень важно обслуживать веб-сайты поверх HTTPS, а не просто HTTP, даже если они обслуживаются как статические сайты.

Один из основателей Netlify объяснил это, указав пять причин для обслуживания вашего сайта через HTTPS, а Google также опубликовал некоторую полезную информацию о том, почему HTTPS так важен , независимо от того, как стек.

Убежденный и теперь покупающий цифровой сертификат? Не бойся. Это можно сделать проще, чем вы думаете.

Netlify упрощает настройку HTTPS в пользовательских доменах . У вас есть опция управляемого SSL , пользовательского SSL и даже выделенного IP-протокола SSL для тех предприятий, которые этого требуют.

Большинство людей могут получить то, что им нужно от управляемого SSL, благодаря бесплатным сертификатам, предоставленным Let's Encrypt . Настроить нужно один клик (нормально, это может быть всего три щелчка, но мне потребовалось меньше минуты). Еще лучше, сертификаты обновляются автоматически, поэтому вам не нужно каждый год стремиться к этому.

Конфигурация SSL Netlify благодаря бесплатным автоматическим обновлениям сертификатов от Let's Encrypt

7. Выполнение тестов с непрерывной интеграцией Netlify

Одной из вещей, которая дает Netlify, является то, что в дополнение к специально созданному CDN для размещения ваших сайтов он также предоставляет контейнерную среду для запуска ваших сборок. Это означает, что любая сборка, которую вы запускаете в локальной среде сборки или на сервере непрерывной интеграции, может работать непосредственно в Netlify.

Если ваша сборка включает тесты, Netlify выполнит их для вас и даст либо успешную сборку, либо неудачу, сообщив вам о результатах.

Замените мою инфраструктуру CI, мою инфраструктуру хостинга и конвейер развертывания на одну услугу? Да, пожалуйста.

8. Обработка формы

Если на вашем сайте нужно размещать формы, возможно, в прошлом вы решили, что статический сайт просто не будет работать. Однако Netlify имеет простое решение.

Если вам нужна форма на вашем сайте, которая принимает контент, представленный вашими посетителями, Netlify может разместить это для вас. Просто добавив атрибут в HTML вашей формы, Netlify создаст подходящую конечную точку для формы и сделает все данные, доступные вам через интерфейс администратора и API.

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

Представления форм также могут инициировать уведомления. Возможны слабые сообщения, webhooks или даже интеграция Zapier .

9. Перенаправление, переписывание и проксирование

Не оставляйте URL позади! _redirects файл _redirects в развернутом каталоге, вы можете получить доступ к расширенным параметрам конфигурации для перенаправления и перезаписи. Это происходит на краевых узлах CDN, которые делают их невероятно быстрыми и эффективными.

У вас также есть возможность указать код ответа HTTP в файле _redirects, создавая несколько других вещей, таких как пользовательские 404 и даже проксирование других ресурсов.

# Redirect with a 301
/home         /                            301

# Redirect with a 302
/my-redirect  /                            302

# Rewrite a path
/pass-through /index.html                  200

# Invisbily proxy to a third party API
/api/*  https://api.example.com/:splat     200

# Show a custom 404 for a path
/special-offer    /too-late-its-over       404



//Пример файла конфигурации \_redirects

Вы хотите, чтобы значки, заполнители, параметры запроса и многое другое? Взгляните на документацию по перенаправлению .

10. Пользовательский контроль заголовка

Это одно для любого, кто размещал свой сайт на страницах Github и преследовал этот идеальный показатель Lighthouse или Page Speed ​​Insights . Вы сделали все правильно, но вам нужно контролировать свои заголовки кеширования HTTP, чтобы получить последний бит оптимизации производительности, который вам не хватает … к сожалению, у вас нет такой мощности.

Теперь ты.

Для этого Netlify использует аналогичный подход к управлению перенаправлением (см. Выше). _headers файл _headers в развернутом каталоге, вы получаете контроль над заголовками HTTP для всех и любых ресурсов вашего сайта.

И вы можете сделать больше, чем просто управлять заголовками кеша. Возможность настраивать заголовки через файл _headers позволяет вам делать такие вещи, как определение вашей политики безопасности контента (CSP) ваших X-Frame-Options и всех других важных вещей, которые помогут контролировать безопасность вашего сайта.

# A path:
/assets/*
   # Headers for that path:
   Cache-Control: public, max-age=360000

/templates/index.html
   X-Frame-Options: DENY
   X-XSS-Protection: 1; mode=block

/templates/index2.html
X-Frame-Options: SAMEORIGIN



//Пример конфигурационного файла \_headers

Наличие такого контроля на таком гранулированном уровне часто намного сложнее, чем это. Мне кажется, что эта функция обеспечивает разумный контроль безопасности для многих разработчиков.

Это 10, но есть намного больше

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

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

Стоит обратить внимание на Netlify. Есть некоторые интересные предстоящие функции, которые тестируются энтузиастами Alpha-тестеров прямо сейчас.

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

(с)Перевод статьи https://medium.com/netlify/10-netlify-features-to-surprise-and-delight-225e846b7b21