Пару месяцев назад я купил 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. Вы можете посмотреть репозиторий для моего сайта здесь:

npx degit sveltejs/template svelte-app
cd svelte-app

cd svelte-app
npm install

npm run dev