Использование iOS Shortcut для развертывания React GitHub Pages через локальный сервер.

Содержание

Вопрос или проблема
Ответ или решение
Шаги по настройке
Заключение

Вопрос или проблема

У меня есть два сайта на React, которые я создал. Обычно я получаю к ним доступ на своем ноутбуке или настольном компьютере через VS Code, где все мои авторизации предварительно сконфигурированы.

Но когда я в пути, иногда я кодирую на телефоне, используя мобильное приложение GitHub. Проблема возникает из-за того, что мой код также находится на локальном сервере, который имеет предварительно настроенный хуки “post-commit”. Это облегчает процесс, когда я авторизован в VS Code на своем ПК и ноутбуке. Но когда я делаю коммит и деплой на телефоне, так как VS Code.dev не подходит для программирования на телефоне. (iPad — это другая история.) На мобильном приложении GitHub нет “post-commit” для выполнения на моем телефоне.

Мое первое решение заключалось в том, чтобы использовать либо инструмент Snippet от Termius, либо ярлык iOS, чтобы все предварительно настроить. Затем я назначил это в меню ярлыков тройного нажатия или боковой кнопки для запуска скрипта.

Я думал, что могу просто подключиться к своему серверу по SSH, используя Tailscale, запустить скрипт с помощью ярлыка iOS/Terminus, и сайт будет обновлен. Но нет, это не работает так.

Скрипт:

cd [Repo/Directory]
git pull
npm run deploy

Проблема в том, что ярлык iOS не вызывает специфическое действие сервера, чтобы уведомить пользователя, что делать дальше (например, запрос имени пользователя и пароля Git, которые соответствуют имени пользователя GitHub и токену личного доступа). Не знаю, есть ли у Terminus возможность запрашивать эти данные из терминала. Мои файлы сайта находятся на сервере, который работает на последней LTS версии Ubuntu: Noble Numbat 24.04.1.

Запустите скрипт. Ожидаю, что все пройдет успешно, и статус на странице GitHub Repo Action обновится.

Ответ или решение

Для решения проблемы развертывания вашего React-приложения на GitHub Pages через локальный сервер с использованием iOS Shortcuts существует несколько шагов, которые помогут вам настроить автоматизацию этого процесса. Мы рассмотрим, как вы можете настроить SSH-доступ, выполнить необходимые команды и обойти проблему с вводом учетных данных.

Шаги по настройке

Настройка SSH-доступа к вашему серверу:
- Убедитесь, что у вас есть SSH-доступ к вашему серверу с использованием Tailscale. Убедитесь, что вы можете подключиться к вашему серверу из терминала вашего телефона или приложения Termius без ввода пароля, используйте для этого SSH ключи.
- Убедитесь, что ваш публичный SSH-ключ добавлен в файл ~/.ssh/authorized_keys на сервере.
Создание скрипта для развертывания:
- Напишите скрипт, который будет выполнять необходимые команды. Например, создайте файл deploy.sh на вашем сервере и добавьте в него следующие строки:
```
#!/bin/bash
cd [Repo/Directory] || exit
git pull origin main
npm install
npm run deploy
```
- Не забудьте сделать ваш скрипт исполняемым с помощью команды:
```
chmod +x deploy.sh
```
Настройка переменных окружения для Git:
- Чтобы избежать интерактивного запроса на ввод вашего имени пользователя и пароля при выполнении git pull, настройте Git для использования токена доступа. Убедитесь, что ваш Personal Access Token (PAT) сохранен в виде переменной окружения на сервере:
```
export GIT_ASKPASS=/usr/bin/echo
export GIT_USERNAME='your_username'
export GIT_TOKEN='your_personal_access_token'
```
- Добавьте эти строки в ваш .bashrc или .bash_profile, чтобы они применялись каждый раз при входе в систему.
Создание iOS Shortcut:
- Откройте приложение Shortcuts на вашем iPhone.
- Создайте новый Shortcut с действиями:
  - Используйте «Run Script via SSH» (если вы используете Termius) или настройте для использования «SSH» действия для подключения к вашему серверу.
  - Введите следующую команду для выполнения вашего скрипта:
```
./path/to/deploy.sh
```
- Установите сочетание клавиш, например, Triple Back Tap, для быстрого вызова вашего Shortcut.
Проверка и тестирование:
- Проверьте ваш Shortcut, чтобы убедиться, что все работает правильно. При его запуске ваш код должен обновляться на сервере, а затем автоматически развертываться на GitHub Pages.
- Убедитесь, что любые ошибки выводятся в консоль, чтобы вы могли их отслеживать и исправлять.

Заключение

Теперь, когда у вас есть всё настроенное, вы сможете запускать развертывание вашего React-приложения с помощью простого трехкратного нажатия на заднюю панель вашего iPhone. Это решение позволит вам работать более эффективно, даже когда вы находитесь вдали от вашего основного рабочего стола или ноутбука.