Хабрахабр

Деплой webpack-приложения на github.io с помощью Travis CI

Нужно развернуть его на github.io. Есть приложение, сгенерированное с помощью create-react-app.

Проблемой является то, что Github Pages работает только со статическим кодом и Jekyll.

Разумеется, нам достаточно просто скомпилировать приложение где-нибудь в другом месте и уже потом выкладывать на github.io

как выяснилось, у него есть возможность деплоя на гитхаб из коробки (не нужно изгаляться и писать сложные скрипты для этого). Для этой задачи идеально подошел Travis CI, т.к.

Я завел два репозитория:

  • Код приложения
  • Репозиторий со скомпилированной версией, который и использует github.io

Как происходит ручной деплой

  1. Компилируем код (yarn build)
  2. В папке второго репозитория делаем git rm -r . — это удалит все файлы (кэп).
  3. Копируем скомпилированный код во второй репозиторий (cp -r build/ ../compiled-app)
  4. git add .
  5. git commit
  6. git push

.travis.yml

language: node_js
node_js:
- '9.11' cache: directories: - "node_modules" script: - yarn test - yarn build - echo my-custom-domain.ru > build/CNAME deploy: provider: pages github-token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variable committer-from-gh: true skip-cleanup: true keep-history: true local-dir: build repo: Yourname/compiled-app target-branch: master on: branch: master

Пояснения:

  • В разделе script можно увидеть странное echo. Это костыль нужен для сайтов с собственным доменом, т.к. github использует файл CNAME для хранения этой настройки (уж не знаю, почему). Т.к. весь текущий код репозитория будет удален, то и этот файл не сохранится.
  • github-token — его нужно сгенерировать в настройках гитхаба. Подробнее здесь. Переменную окружения нужно задать в настройках проекта на travis-ci.com
  • keep-history — без этой опции репозиторий по сути будет создаваться каждый раз заново (push -f) и отследить историю будет невозможно. С ним же все будет покоммитно (примерно как я описал это в разделе "ручной деплой").
  • local-dir — после того, как билд отработал, тревису нужно знать, что именно сохранять в репозиторий. Без этой опции он сохранит весь текущий код, а с ней — определенную папку. Сохранять полностью проект может быть полезно, если вы не хотите использовать два репозитория, как я, а использовать папку docs/ или отдельную ветку, не связанную с кодом.
  • repo — это именно та опция, которая позволяет деплой в другой репозиторий. Не забывайте указывать владельца.
  • target-branch — в какую ветку именно должен происходить пуш. По-умолчанию gh-pages, я использую master, т.к. у меня это отдельный репозиторий.

Лично я столкнулся только с одной проблемой.

Я не стал думать над решением, т.к. Если не используется custom domain, то сайт будет находиться по адресу yourname.github.io/projectname, и тем самым у меня ломались абсолютные пути (например, /favicon.ico). у меня используется отдельный домен.

Было очень приятно обнаружить, что в travis-ci об этом уже подумали. Я обожаю github.io и давно хотел поковырять, можно ли туда деплоить компилируемые сайты кроме Jekyll.

Чтобы не засорять мой список репозиториев, который и так наполнен всяким мусором. Еще я сегодня подумал, что возможно лучше было бы не создавать отдельный репозиторий, а просто использовать отдельную ветку. Ну, как говорится, c'est la vie

Если короче: фильтр героев по их особенностям. Я играю в игру Heroes of the Storm и хотел сделать небольшое приложение, которое упростило бы для меня выбор персонажа во время драфта.

Вот основной репозиторий.

Репозиторий со скомпилированным кодом

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть