Использование GitHub Actions для развертывания веб-страницы на Raspberry Pi

Пару месяцев назад я купил Raspberry Pi 4. С тех пор я начал пачкать руки в SSH, SCP, Systemd, DDNS и некоторых других вещах, которые я никогда не делал раньше. На этой машине сейчас расположен мой сервер Veloren (Присоединяйтесь ко мне на vlrn.duckdns.org) и целевая страница, которая, после многократной ручной сборки и SCP, теперь развернута через GitHub Actions. И это сегодняшняя тема: Как развернуть веб-страницу на RPi с помощью GH Actions?

Перед началом

Если у вас динамический IP-адрес, вам придется настроить Dynamic DNS, иначе вам придется менять целевой IP-адрес каждый раз, когда меняется ваш (Это может происходить ежемесячно, еженедельно или даже ежедневно). Это не будет рассматриваться здесь, поскольку процесс отличается в зависимости от модели маршрутизатора. Однако, если вам нужна хорошая и бесплатная служба динамического DNS, рассмотрите возможность использования (и пожертвования!) duckdns.org, который я использую в настоящее время.

Подготовка RPi

В данном случае подготовка довольно проста, вам просто нужно установить NGINX с помощью:

apt install nginx
Войти в полноэкранный режим Выйти из полноэкранного режима

А затем запустить его:

systemctl enable nginx
systemctl start nginx
Войти в полноэкранный режим Выйти из полноэкранного режима

Перенаправление портов

Перенаправьте порт 80 RPi на внешний порт 80. Теперь при доступе к IP из браузера будет появляться этот экран:

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

Создание действия

Это довольно простой шаг, благодаря замечательному appleboy/scp-action. У этого действия будет только одно задание с двумя шагами: Сборка и передача на Raspberry Pi.

Создание

Здесь нет никакого секрета, это шаг сборки:

name: deploy
on:
  push:
    branches:
      - main
jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: "14"
      - name: "Install & build"
        run: |
          npm i
          npm run build
          mv public/index.html public/index.nginx-debian.html
Войти в полноэкранный режим Выйти из полноэкранного режима

Единственное, на что следует обратить внимание, это последняя строка, где index.html переименовывается в index.nginx-debian.html. Это сделано потому, что в Debian, NGINX использует /var/www/html/index.nginx-debian.html. Имейте в виду, что в других дистрибутивах может использоваться другое именование директорий и индексов.

Перемещение

Для отправки недавно созданного артефакта на Raspberry Pi мы будем использовать appleboy/scp-action. Чтобы правильно настроить его, добавьте следующие секреты в репозиторий GitHub:

  • SSH_HOST: IP/URL RPi;
  • SSH_PORT: SSH-порт, используемый RPi, который был указан в разделе «Переадресация портов»;
  • SSH_USERNAME: Имя пользователя RPi для SCP. Поскольку файлы будут скопированы в /var/www/html, этот пользователь должен иметь права root, желательно без запроса пароля;
  • SSH_KEY: Закрытый ключ SSH, сгенерируйте его с помощью ssh-keygen или онлайн-генератора.

Когда все будет создано, добавьте открытый ключ SSH в ~/.ssh/authorized_keys. Теперь пришло время создать шаг «Push»:

      - name: "Push to server"
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.SSH_KEY }}
          port: ${{ secrets.SSH_PORT }}
          source: "public/"
          strip_components: 1
          target: "/var/www/html"
Вход в полноэкранный режим Выход из полноэкранного режима

Не должно быть ничего нового, кроме strip_components: 1. Этот
удаляет указанное количество ведущих элементов пути, без него мы бы выталкивали содержимое в /var/www/html/public вместо /var/www/html.

Конец

Теперь у вас должно быть полнофункциональное действие GitHub, которое автоматически собирает и отправляет содержимое на Raspberry Pi. Больше не нужно подключаться к SCP для изменения одной строки или запускать npm run build внутри RPi. Вы можете посмотреть репозиторий для моего сайта здесь:

hnrq / vlrn-website

Посадочная страница для сервера veloren

Пссс — ищете более полное решение? Посмотрите на SvelteKit, официальный фреймворк для создания веб-приложений любого размера, с красивым опытом разработки и гибкой маршрутизацией на основе файловой системы.

Ищете шаблон компонента для совместного использования? Вы можете использовать для этого SvelteKit или более старый sveltejs/component-template


приложение svelte

Это шаблон проекта для приложений Svelte. Он находится по адресу https://github.com/sveltejs/template.

Чтобы создать новый проект на основе этого шаблона с помощью degit:

npx degit sveltejs/template svelte-app
cd svelte-app
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Обратите внимание, что у вас должен быть установлен Node.js.

Начать работу

Установите зависимости…

cd svelte-app
npm install
Войдите в полноэкранный режим Выйдите из полноэкранного режима

…затем запустите Rollup:

npm run dev
Войдите в полноэкранный режим Выйти из полноэкранного режима

Перейдите по адресу localhost:8080. Вы должны увидеть, что ваше приложение запущено. Отредактируйте файл компонента в src, сохраните его и перезагрузите страницу, чтобы увидеть свои изменения.

По умолчанию сервер будет отвечать на запросы только с localhost. Чтобы разрешить соединения с…

Посмотреть на GitHub

Оцените статью
Procodings.ru
Добавить комментарий