Хабрахабр

Деплой 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 и хотел сделать небольшое приложение, которое упростило бы для меня выбор персонажа во время драфта.

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

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

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

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

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

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

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