Как быстро настроить процесс сборки для статического сайта

Автор оригинала: FreeCodeCamp Community Member.

ondřej polesný.

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

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

Вступление

В предыдущих статьях я объяснил, как Создайте динамический веб-сайт JavaScript с контентом из безголового CMS Кентако облако Отказ Тогда я показал тебе Как преобразовать его в статический сайт Чтобы помочь производительности, безопасности и SEO. Так что теперь пришло время получить этот сайт, созданный и протолкнуть его онлайн для того, чтобы увидеть весь мир.

Создание статического сайта

Каждый статический генератор сайта позволяет создавать сайт локально, не создавая все файлы после каждого изменения файла. Если вы следовали за моими статьями, у вас есть сайт на Vue.js, который преобразован в использование NUXT.JS в качестве рамки, но все же требует сервера разработки для обработки запросов веб-сайта. Чтобы генерировать статические файлы, выполните следующую команду:

npx nuxt generate

Открыть Dist Папка в корне вашего проекта, чтобы найти сгенерированные файлы и проверить index.html Чтобы убедиться, что ваш сайт генерирует правильно. У меня есть привычка для проверки дочерних страниц, где я знаю, есть какой-то контент из безголового CMS, как в блоге. Если вы видите контент в HTML-форме, вы победителя!

Где я должен провести статический сайт?

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

Ваше текущее пространство хостинга масштабируется, чтобы соответствовать требованиям другой системы или предназначена для поддержки определенной настройки, например PHP и MySQL или .NET и PostgreSQL. Так что, если это так, вы, вероятно, использовали количество трафика, сеансы и другие значения для расчета, какой объем вычислительной мощности вам понадобится (или, как я в прошлом, просто надеялся, что это будет хорошо).

С статическими сайтами приходит облегчение: не более сложные формулы, приближения и профессиональные догадки. Хостинг, куча статических файлов – это то, что каждый веб-сервер может легко сделать. Наиболее важным аспектом является то, что сервер больше не должен проходить через сложный трубопровод для обработки запросов для каждого удара. Это просто служит статическим файлам. И это легко и быстро.

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

Github Pages.
Нечто
Heroku
и другие глобальные и местные провайдеры. Конечно, вы можете использовать Global Hosting Soiling Services, такие как Azure или AWS.

Я решил выбрать страницы GitHub, так как все мои репозитории уже размещены на Github. Это также совершенно бесплатно и поддерживает пользовательские домены 2-го уровня.

Как создать и развернуть статический сайт?

Но это не только про хостинг. Наличие страниц в Интернете необходим важно, но так же важно подумать о целом процессе развертывания. То есть – как статические страницы будут генерироваться и транспортироваться на сервер. Для первой сборки вы можете генерировать страницы в местной среде, используя NPX NUXT генерирует И скопируйте – вставьте статические файлы на пространство для хостинга через FTP. Но вы собираетесь повторить этот процесс каждый раз, когда есть изменение контента?

Процесс развертывания статического сайта имеет три части:

Курок
Строить
Развертывание

Курок

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

Изменить контент триггер

Каждый зрелый безголовый CMS особенности WebHooks Отказ Они представляют уведомление об обслуживании услуг по поводу определенного типа действия. Поэтому, когда редактор публикует элемент контента, Zmsless CMS инициирует уведомление веб -ook, которое отправляется на определенный URL. В этом случае на сервер сборки, который будет действовать на уведомление и восстановить сайт.

Но как сервер сборки знает, что делать? Ну, это понятия не имеет представления о том, какое содержание хранилище, которое вы используете, и, вероятно, не поймете общие уведомления об общих веб -ook. По этой причине я добавил простую функцию Azure в середине, которая делает две вещи – во-первых, она проверяет, что происхождение уведомлений является облаком Kentico:

...

if (!isValidSignature(req, process.env['KC_WEBHOOK_SECRET'])) { context.log('Signature was invalid'); return;}

...

const isValidSignature = (req, secret) => { const givenSignature = req.headers['x-kc-signature']; const computedSignature = crypto.createHmac('sha256', secret) .update(req.rawBody) .digest();

 return crypto.timingSafeEqual(Buffer.from(givenSignature, 'base64'), computedSignature);}

(Смотрите полный Файл на github )

а затем запускает сборку с помощью API сервера сборки:

request.post({ url: "https://api.travis-ci.org/repo/Kentico%2Fkentico.github.io/requests", headers: { "Content-Type": "application/json", "Accept": "application/json", "Travis-API-Version": "3", "Authorization": `token ${process.env['TRAVIS_TOKEN']}` },

...

(Смотрите полный Файл на github )

Я знаю, что знаю, Azure просит вас за вашу кредитную карту, прежде чем вы сможете создавать функции. Но вы можете использовать Webtask.io , что совершенно бесплатно. Я объяснил, как создать простую функцию там в Один из моих предыдущих статей Отказ

Код Изменить триггер

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

Строить

Я знаю, что слова «Создание сервера» звучат так сложно и дорого. Но когда вы думаете об этом, единственное, что необходимо сделать сервер сборки для создания страниц и развертывать их. Именно то, что вы сделали вручную с одним NPX Операция команды и копирования-вставки. И это было не так тяжело, это было?

Так как вы можете решить, какой сервер сборки использовать? Во-первых, вам необходимо выбрать, хотите ли вы запустить сборку локально на своем сервере или удаленно на стороннем сервисе. У меня нет локального сервера, который я мог бы использовать для этой цели, поэтому я решил использовать сторонние услуги. Эти услуги включают в себя:

Оба этих сервиса бесплатны для проектов с открытым исходным кодом.

“Что? Мой сайт открытый источник? Этот парень сумасшедший!”

Я?:-) Я уже упомянул преимущества откровенного выполнения вашего веб-сайта в моем Предыдущая статья о безопасности Отказ В большинстве случаев веб-сайты очень похожи в функциональности, поэтому, вероятно, нет особых ноу-хау в вашей реализации. Это контент, который содержит значение.

Но давайте вернемся к серверу сборки. Я выбрал Travis CI, как это было рекомендовано мне коллегой. Мы используем его для многих проектов GitHub в нашей компании. Так сколько времени нужно, чтобы настроить это?

Первоначально я ожидал сложного пользовательского интерфейса для настройки всех аспектов сборки в TRAVIS (вспоминает VSTS в сети?), Итак, нахождение всего сидит в одном файле было облегчением. Таким образом, первое, что вам нужно сделать, это создать файл # .travis.yml # в корне вашего проекта. Этот файл определяет, что происходит во время сборки.

dist: trusty language: node_js node_js: — "stable" before_script: — npm install script: — npm run build deploy: ...

packages.json:"scripts": { ... "build": "npx nuxt generate && cpx CNAME dist", ...}

Вы видите, что это просто понять. Сначала я проинструктирую NPM установить все необходимые пакеты в качестве предварительного условия для запуска сборки. Тогда все статические файлы генерируются в Dist Папка – это значение по умолчанию при использовании NUXT. Я также включил превью Packages.json Файл, который определяет сценарий сборки. Обратите внимание, что я также копирую Cname файл на Dist Справочник – это говорит о страницах GitHub, я использую пользовательский домен, а не github.io.

Развертывание

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

Как я уже упоминал, прежде чем я выбрал страницы GitHub как My Host и Travis CI в качестве сервера сборки. Трэвис предоставляет Многие варианты Для автоматизированных развертываний, включая страницы GitHub, поэтому конфигурация была куском пирога. Посмотрите на конфигурацию развертывания:

deploy: local-dir: dist target-branch: master provider: pages skip-cleanup: true github-token: $GITHUB_TOKEN keep-history: true verbose: true on: branch: source

Локальный dir Определяет, где мои генерируемые статические страницы, Целевой ветвь отмечает ветку в репозитории GitHub для развертывания, а Страницы это название провайдера TRAVIS для страниц GitHub. Чтобы успешно развернуть вас также сгенерировать и предоставлять Github-токен Отказ Вы видите, что в конфигурации сборки есть просто переменная в качестве файла в публичном репозитории. Значение токена хранится в настройках репозитория в UI TRUSIS.

Финал серии

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

Во время этой серии статей я объяснил, как создать веб-сайт, используя Content-As-A-Service (CAAS), чтобы сохранить свой контент, как убедиться, что ваш сайт безопасен, не используя какую-либо базу данных, и как для того, чтобы такой сайт еще Содержит динамические функциональные возможности, такие как формы.

Удачи с вашими новыми статическими веб-сайтами и есть #staticnewyear !