Создание и развертывание сайтов Gatsby с помощью GitHub

Действия GitHub в настоящее время в бета И я был одним из счастливчиков, чтобы получить бета -доступ. По разным причинам я решил переключить весь процесс сборки моего блога на действия GitHub — давайте поговорим о том, почему и как создавать и развернуть сайты Gatsby с действиями.

Почему?

Если вы просто заинтересованы в реальном руководстве, вы можете пропустить этот раздел, но я хотел бы объяснить, почему пересмотр моего процесса сборки — и этот пост — никогда не планировался и почему они все еще были обязательными.

Там не было нового поста больше месяца. Но не потому, что я не писал никаких новых постов — на самом деле я даже выпустил несколько новых постов — они просто никогда не видели света мира. Какая?!

В отличие от многих сайтов Gatsby, которые я не размещен на NetLify, GitHub Pages или любой другой опции хостинга, описанный в Официальные документы Анкет Мой блог и все связанные инструменты (система комментирования, информационный бюллетень и т. Д.) Размещаются в Uberspace . Они мне очень нравятся, из -за их отличной поддержки, отличной ценовая модель который может быть принят в ваш бюджет и тот факт, что я могу получить доступ к серверу с помощью SSH и могу сделать много вещей самостоятельно. Там нет причудливого интерфейса с точки зрения управления вашим сервером, большинство вещей сделано на вашей консоли — и я любовь Это.

Когда я переключен на Гэтсби Некоторая работа потребовалась с точки зрения возможности автоматически восстановить мой блог всякий раз, когда я публикую новый пост. Эта работа включала в себя веб -крюк, который вызвал простой скрипт оболочки, который восстанавливал и развернул мой сайт каждый раз, когда он был вызван. Скрипт оболочки, ответственный за строительство и развертывание сайта, был довольно простым:

#!/bin/bash

set -o errexit

cd ~/blog
rm -rf .cache

if ["$1" == "fully"]; then
  rm -rf node_modules
  git pull
  ~/.yarn/bin/yarn install --production=true --pure-lockfile
fi

~/bin/gatsby build
rm -rf ~/blog_backup
cp -R /html ~/blog_backup
rsync -avu --delete ~/blog/public/ ~/html

Иногда (в основном при добавлении новых функций) Мне нужно было полностью Восстановите блог, включая получение новых исходных файлов от GIT и установка новых зависимостей. Поскольку это заняло довольно долгое время, это было необязательно и могло быть вызвано посредством необязательного полностью параметр При выполнении сценария.

Этот сценарий был частью цепочки сценариев, которая была выполнена всякий раз, когда назывался веб -крюк. Сам WebHook назвал скрипт, который приводил вывод сценария выше в файл, который присылает мне почту, когда это делается. Таким образом, я мог бы легко проверить, работало ли все, когда было вызвано восстановлением.

Это не причудливое решение с живыми консолями и тому подобным, но оно работает … редакция .

Проблема

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

Не в этот раз.

Через почти час и до сих пор нет почты I ssh D на мой сервер и проверил, что произошло. Вывод последней сборки был:

[@ blog]$ ~/bin/gatsby build
success open and validate gatsby-configs - 1.622 s
success load plugins - 22.156 s
success onPreInit - 0.018 s
success delete html and css files from previous builds - 0.261 s
success initialize cache - 0.020 s
success copy gatsby files - 0.575 s
success onPreBootstrap - 0.098 s
success source and transform nodes - 0.861 s
success building schema - 1.085 s
success createPages - 0.284 s
success createPagesStatefully - 0.146 s
success onPreExtractQueries - 0.012 s
success update schema - 0.037 s
success extract queries from components - 0.432 s
success write out requires - 0.007 s
success write out redirect data - 0.003 s
success Build manifest and related icons - 0.921 s
success onPostBootstrap - 1.478 s
⠀
info bootstrap finished - 92.619 s
⠀
success run static queries - 0.036 s — 3/3 101.33 queries/second
⠼ Building production JavaScript and CSS bundles
Killed

Убит? Прости, малыш.

После некоторых Исследование Я узнал, что Uberpsace убивает процессы, которые занимают более 1,5 ГБ памяти. Дополнительные исследования показали, что мой процесс сборки занимает до 1,7 ГБ памяти на данный момент — что было причиной его убийства.

Я связался с поддержкой Uberspace, и они предложили использовать -Max Old-Space-Size = 1024 Флаг, чтобы узел не приобрел слишком много памяти — но, к сожалению, это не сработало. Я понимаю, что Хостер не может предоставить бесконечный источник памяти — но это действительно была серьезной проблемой; Я не мог изменить что угодно В моем блоге на данный момент.

Мне пришлось переосмыслить весь свой процесс сборки. Я искал разные варианты, такие как AWS, GitHub Pages или даже строительство на месте и развертывание через контейнер — но у всех были некоторые недостатки, которые мне не было удобно.

В какой -то момент я подумал об использовании действий GitHub для создания и развертывания моего блога в Uberspace. Это обеспечит 2000 минут времени настройки в месяц с до 7 ГБ памяти ОЗУ — Это обязательно должно выполнить работу.

После некоторой работы это наконец было сделано: мой блог теперь построен (и протестирован) на GitHub с помощью действий и, наконец, развернут в моем Uberspace, что означает, что теперь я могу снова вернуться к написанию контента. Ура!

Действие GitHub

Мое действие GitHub состоит из многоэтапного задания, которое выполняет все, от проверки репозитория до развертывания встроенного сайта через Docker и rsnyc Анкет

Давайте посмотрим на рабочий процесс (расположенный в .github/workflows/workflow.yml ):

name: Update blog

on: [push, repository_dispatch]

jobs:
  update:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1

      - name: Set Node.js
        uses: actions/setup-node@master
        with:
          node-version: 10.x

      - name: Install dependencies
        run: yarn install --prod --pure-lockfile

      - name: Lint
        run: yarn run lint

      - name: Build
        run: yarn run build
        env:
          GHOST_API_URL: "https://ghost.nehalist.io"
          GHOST_CONTENT_API_KEY: ${{ secrets.ghost_content_api_key }}
          GATSBY_ENV: "prod"
          GATSBY_CARRAWAY_URL: "https://carraway.nehalist.io"
          GATSBY_COMMENTO_URL: "http://comments.nehalist.io"
          GA_TRACKING_ID: "UA-40873708-1"

      - name: Deploy
        run: docker-compose run deploy
        env:
          DEPLOY_KEY: ${{ secrets.deploy_key }}

Шаги довольно просты:

Проверьте репозиторий
Узел настройки в версии 10.x.
установить зависимости через пряжа
Оставьте все файлы
Создайте сайт
развернуть его через пользовательский контейнер

на Ключевое слово указывает всякий раз, когда наше действие запускается — в этом случае оно запускается на толкать и на Repository_dispatch .

Repository_dispatch не может быть очевидным с первого взгляда; Но это для возможности назвать это внешне (как URL). Это станет важным, когда будет опубликован новый пост, этот веб -крюк называется, который отправит Curl Запрос на GitHub и запускает Repository_dispatch мероприятие.

Важно : Repository_dispatch запускается только на Мастер ветвь (что не упоминается в документах). Приобретение этого знания потребовало серьезной суммы моей жизни.

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

Секреты

Секреты, такие как ваш ключ SSH или ваш ключ API, должны никогда хранить в вашем хранилище. Вместо этого вы можете использовать секреты репозитория (расположенные в настройках репозитория в «Секретах»).

Эти секреты не будут напечатаны в рамках вашей консоли ваших действий и не будут читаемыми пользователями вообще только добавлены. Это особенно важно, когда дело доходит до развертывания через rsync : Мы собираемся использовать ключ SSH для доступа к серверу, поэтому он будет Действительно Плохо Если кто -то получает доступ к этому секрету.

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

Построение сайта

Давайте поближе посмотрим на шаг здания:

      - name: Build
        run: yarn run build
        env:
          GHOST_API_URL: "https://ghost.nehalist.io"
          GHOST_CONTENT_API_KEY: ${{ secrets.ghost_content_api_key }}
          GATSBY_ENV: "prod"
          GATSBY_CARRAWAY_URL: "https://carraway.nehalist.io"
          GATSBY_COMMENTO_URL: "https://comments.nehalist.io"
          GA_TRACKING_ID: "UA-40873708-1"

Мой сайт использует кучу переменных среды (через process.env. ) — Поскольку я использую разные источники для среды Prod и Dev — которые можно легко установить через эн Ключ в рамках шага рабочего процесса.

Чтобы получить доступ к секретам внутри эн переменные, которые вы можете просто использовать $ {{Secrets. }} Анкет

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

Самое интересное — это то, как сайт развернут. Наш шаг в нашем рабочем процессе довольно прост:

      - name: Deploy
        run: docker-compose run deploy
        if: github.ref == 'refs/heads/master'
        env:
          DEPLOY_KEY: ${{ secrets.deploy_key }}

Этот шаг выполняется только тогда, когда мы находимся мастер

Но, как вы можете видеть в бежать Ключ, мы не просто называем простую команду, но используем Docker-Compose запустить наш собственный контейнер Docker для развертывания. Итак, давайте разберемся, чтобы увидеть, что здесь происходит!

Вы можете избавиться от Если пункт и развернуть разные ссылки в разные места; Но это определенно выйдет за рамки этого поста.

Докер

Первое, на что нам нужно взглянуть, это наш Docker-compose.yml файл:

version: '3'

services:
  deploy:
    image: "instrumentisto/rsync-ssh"
    volumes:
      - .:/home/site
    working_dir: /home/site
    environment:
      deploy_key: $DEPLOY_KEY
    command: sh scripts/deploy.sh

Вы, вероятно, можете сделать все вещи Docker без Docker-Compose — Но я привык к этому и в основном всегда использую Docker с Docker Compose.

Изображение, которое мы собираемся использовать для нашего развертывания, это Инструмент/RSYNC-SSH который обеспечивает небольшой контейнер с rsync установлены.

В случае, если вы не знаете rsync : Это в основном просто синхронизирует файлы. В нашем случае: он синхронизирует public Справочник с нашего встроенного сайта Gatsby на GitHub на наш собственный сервер, где будет размещен сайт.

тома и Working_dir именно там, где наш сайт будет установлен в контейнере.

Более интересными на данный момент являются Окружающая среда и командование . Используемые переменные среды происходят из Сам GitHub где deploy_key это то, что мы получили от нашего Workflow.yml Анкет Прежде чем взглянуть на сценарий, называемый внутри Команда Поговорим о ключах SSH.

SSH Ключи

Как упоминалось ранее, мы собираемся использовать ключи SSH для развертывания.

Что мы собираемся сделать, так это генерировать ключ пары клавиш SSH (состоящий из частного и публичного) ключа. public Ключ будет добавлен на наш сервер, а Частный Ключ будет использоваться в нашем контейнере Docker для rsync . Поскольку мы никогда Хочу раскрыть закрытый ключ к кому -то, кого мы собираемся использовать для этого секреты GitHub.

Начнем с создания наших ключей:

ssh-keygen -t rsa -b 4096 -C ""

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

Если все сработало, у вас должно быть два файла: id_rsa и id_rsa.pub (или что бы вы ни их называли). id_rsa Ваш частный Ключ, id_rsa.pub Ваш общедоступный ключ. Сначала давайте добавим свой открытый ключ к нашему серверу;

Скопируйте содержание вашего публичный Ключ, id_rsa.pub , файл (например, через xclip -sel clip id_rsa.pub ) и добавьте его на свои серверы Authoried_keys Файл (который — в моем случае — находится в /HOME/$USER/.ssh ).

После этого скопируйте содержание вашего Частный Ключ, id_rsa , к вашим секретам GitHub.

Этот ключ будет использоваться в контейнере Docker для доступа к вашему серверу.

Развернуть скрипт

Последний файл, на который мы должны взглянуть, — это deploy.sh Файл, который называется нашим контейнером Docker в нашем рабочем процессе:

#!/bin/sh

# Instantly exists our script whenever an error occurs
set -e

# Pipe our environmental SSH key variable into a file
mkdir -p $HOME/.ssh
echo "${deploy_key}" > $HOME/.ssh/deploy_key
chmod 600 $HOME/.ssh/deploy_key # SSH keys need to be readonly

# Where to deploy our site on our server
target="~/html"

# The actual rsync
sh -c "rsync -azh -e 'ssh -i $HOME/.ssh/deploy_key -o StrictHostKeyChecking=no' public/* --rsync-path='mkdir -p ${target} && rsync' @:${target}"

# Remove our deploy_key again since it's no longer needed
rm $HOME/.ssh/deploy_key

rsync Поначалу команда может показаться немного дикой;

-azh для использования архивного режима ( -a ), сжатие данных во время передачи ( -z ), сохранить жесткие ссылки ( -h ). Смотрите Здесь для всех аргументов.
-e для настройки SSH Команда (для использования нашего deploy_key и не выполнять строгую проверку ключей хоста, которая подсказывает нам, если мы будем доверять серверу).
-rsync-path это аккуратный маленький трюк для создания недостающих родительских каталогов (см. Это post ).

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

Вызвать действие извне

Запуск действия извне фактически осуществляется, используя Repository_dispatch мероприятие.

Не забывайте: Repository_dispatch Событие работает только на Мастер ответвляться!

Самый простой способ вызвать действие — это сгибание:

curl -v -X POST -u ":" -H "Accept: application/vnd.github.everest-preview+json" -H "Content-Type: application/json" --data '{"event_type":"update"}' https://api.github.com/repos///dispatches

Если — и вы определенно должны — вы используете двух факторную аутентификацию, вам понадобится Персональный токен доступа с Репо разрешения.

Вызов этой команды запустит наше действие, а наш сайт будет перестроен и развернут.

Если вы используете Ghost, вы не можете просто выполнить Curl Команды после публикации сообщения — но вместо этого отправьте Разместите запрос на URL -адрес пользователя, определенный URL Анкет В этом случае довольно просто написать очень маленький сценарий PHP, который выполняет Curl командовать и запускает действие;

//dispatches');
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
curl_setopt($curl, CURLOPT_HTTPHEADER, [
    'Authorization: token ',
    'Accept: application/vnd.github.everest-preview+json',
    'User-Agent: ',
]);
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode([
    'event_type' => 'update'
]));

$content = curl_exec($curl);
curl_close($curl);

// we could var_dump($content) here or whatever

Не забудьте заменить всех заполнителей в этом сценарии

Первое, что вы, наверное, заметили, это $ key часть; Это просто для того, чтобы предотвратить, что крюк может быть вызван всеми. Это очень простой способ защиты вашего сценария. Этот скрипт можно назвать только через webhook.php? Key = f4aollmn3 — Все остальное не вызовет действие.

Все остальное основное php Curl безумие. Заголовок включает в себя ваш токен доступа и устанавливает Пользователь-агент к Ваше имя пользователя который требуется GitHub.

Теперь вы можете настроить свой CMS для отправки запроса на этот скрипт (не забудьте ключ в URL!) и ваше действие будет вызвано.

Вывод

Если все правильно настроено, ваш сайт теперь строится на GitHub и впоследствии развернуто на вашем сервере. Это причудливое и круто, не так ли?!

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

Если вам понравился этот пост, не стесняйтесь оставить ❤, следуйте за мной на Twitter и подписаться на мой информационный бюллетень Анкет Этот пост был первоначально опубликован в nehalist.io Анкет

Оригинал: «https://dev.to/nehalist/building-and-deploying-gatsby-sites-with-github-actions-31di»