Блог

Существует несколько руководств о том, как развернуть приложение react на страницах проекта GitHub, например, this post (т. Е. www.{github-username}.github.io/{project-name} ), Используя npm run deploy .

Однако, когда я попытался развернуть приложение react, которое я создал как свою личную страницу (т. Е. URL будет www.{github-username}.github.io/ ), терминал зависал после успешной сборки при попытке развертывания.

Мой package.json выглядит следующим образом (как предложено в существующих руководствах):

 {
  "homepage": "http://{github-username}.github.io/",
  "name": "personal-page",
  ...
}

"scripts": {
    ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  

и я запустил npm run deploy команду. Проект успешно собран, а затем терминал выходит из строя перед развертыванием. Когда я использую CTRL C для завершения процесса и повторного запуска команды, он показывает мне эту ошибку: «Ветвь gh-pages уже существует». Некоторые уже упоминали, что запуск этой команды решит проблему: rm -rf node_modules/gh-pages/.cache , но у меня это не сработало.

Поскольку я потратил два часа на решение этой проблемы, и мне пришлось получать эту информацию из нескольких источников и решений, я решил потратить еще час, чтобы написать этот пост здесь для других будущих разработчиков (!), сталкивающихся с теми же проблемами.

Чтобы обеспечить контекст для каждой учетной записи, GitHub позволяет бесплатно размещать 1 личную статическую веб-страницу и множество статических веб-страниц проекта на страницах GitHub. Чтобы использовать эту функциональность, вы должны изменить имя репозитория на {github-username}.github.io для личной страницы и {github-username}.github.io/{project-name} для любых проектов, которые вы хотите развернуть на страницах GitHub.

Этот вопрос и ответ касаются только личной страницы, но также могут дать некоторое представление об отладке страниц проекта. Руководства по развертыванию проекта react с помощью npm можно найти в Интернете (например, см. Этот пост).

1. Чтобы устранить проблему зависания, кто-то предложил вам изменить команду deploy на следующую:

    "scripts": {
       ...
       "predeploy": "npm run build",
       "deploy": "gh-pages -b master -d build"
   },
     

Добавление -b master указывает ветку, в которой будет развернут ваш проект. Это помогает избежать зависания терминала, и ваш код фактически будет развернут и доступен через www.{github-username}.github.io/ , но вся информация о файле сборки будет зафиксирована и отправлена в главную ветку.

Что я хотел сделать, так это разместить исходный проект в главной ветке и развернуть веб-сайт в другой ветке сборки. Но также я не хотел, чтобы URL-адрес также включал название филиала.

Я попытался изменить -b master на -b {deploy-branch=name} , например, -b gh-pages где gh-pages — это название ветки, в которой я хотел бы развернуть свой веб-сайт. Это снова привело к зависанию запуска npm run deploy !!

Чтобы решить эту проблему, мне пришлось вручную создать удаленную ветку, вызванную gh-pages и снова запустить команду deploy.

2. Чтобы убедиться, что страницы GitHub будут загружены из gh-pages ветки, мне пришлось зайти в мой репозиторий GitHub> Настройки> Страницы GitHub и изменить ветку на gh-pages (см. Изображение ниже).

После шага 2 мой веб-сайт был запущен и к нему можно было получить доступ через www.{github-username}.github.io/ .

Вы также можете отправить коммиты вашего проекта в мастер ветки. Это, конечно, не повлияет на вашу сборку и личную страницу GitHub.

3. Последняя проблема заключается в том, чтобы избежать ошибки «Ветвь gh-pages уже существует» после использования CTRL C для завершения работы не отвечающего терминала.

Решение заключается в удалении кэша, но начиная с версии 3.1 gh-pages node_module , они переместили кэш по другому пути. Поэтому вместо:

 rm -rf node_modules/gh-pages/.cache
  

Я использовал:

 rm -rf node_modules/.cache/gh-pages
  

чтобы избежать ошибки (спасибо Николасу за его комментарий).

Я надеюсь, что это поможет и другим людям 🙂