* Создано с помощью create-react-app
В этом уроке я покажу вам, как вы можете создать приложение React и развернуть его на страницах GitHub.
Чтобы создать приложение React, я буду использовать create-react-app , который является инструментом, который люди могут использовать для создания приложения React с нуля. Чтобы развернуть приложение React, я буду использовать gh-pages , который является пакетом NPM, который может использовать, чтобы использовать вещи для GitHub Pages, бесплатной услуги веб-хостинга, предоставляемой GitHub.
Если вы последуете вместе с этим учебником, вы получите новое приложение React, которое выловало на страницах GitHub, которое вы можете затем настроить.
Этот урок был переведен с его оригинального английского на следующие языки:
Узел и NPM установлены. Вот версии, которые я буду использовать при создании этого урока:
$ node --version
v16.13.2
$ npm --version
8.1.2Установка NPM добавляет две команды в систему
npmиnpx- оба из которых я буду использовать при создании этого учебника.
Git установлен. Вот версия, которую я буду использовать, создавая этот урок:
$ git --version
git version 2.29.1.windows.1Учетная запись GitHub.
Имя репозитория: вы можете ввести любое имя, которое вы хотите*.
* Для сайта проекта вы можете ввести любое имя, которое вы хотите. Для пользовательского сайта Github требует, чтобы имя репозитория имело следующий формат:
{username}.github.io(например,gitname.github.io)
Имя, которое вы вводите, будет отображаться в нескольких местах: (а) в ссылках на репозиторий по всему GitHub, (b) в URL -адресе репозитория и (c) в URL -адресе развернутого приложения React.
В этом уроке я буду развернуть приложение React в качестве сайта проекта.
Я введу: react-gh-pages
Конфиденциальность репозитория: выберите публичную (или частную *).
* Для GitHub Free пользователей, единственный тип хранилища, который можно использовать со страницами GitHub, является общедоступным . Для пользователей GitHub Pro (и других платных пользователей) можно использовать как государственные , так и частные репозитории со страницами GitHub.
Я выберу: публика
Инициализировать репозиторий: оставьте все флажки пустыми.
Это сделает так, чтобы GitHub создает пустой репозиторий, вместо того, чтобы предварительно заполнять репозиторий с помощью
README.md,.gitignoreи/или файлаLICENSE.
На этом этапе ваша учетная запись GitHub содержит пустой репозиторий, имеющий указанное вами название и тип конфиденциальности.
Создайте приложение React под названием my-app :
Если вы хотите использовать другое имя от
my-app(например,web-ui), вы можете сделать это, заменив все случаиmy-appв этом уроке с этим другим именем (то естьmy-app>web-ui).
$ npx create-react-app my-appЭта команда создаст приложение React, написанное в JavaScript. Чтобы создать один из написанных в TypeScript, вы можете вместо этого выпустить эту команду:
$ npx create-react-app my-app --template typescript
Эта команда создаст новую папку с именем my-app , которая будет содержать исходный код приложения React.
В дополнение к содержанию исходного кода приложения React, эта папка также является репозиторием GIT. Эта характеристика папки вступит в игру на шаге 6.
Имена филиалов:
masterпротивmainРепозиторий GIT будет иметь одну ветвь, которая будет названа либо (а)
master, по умолчанию для свежей установки GIT; или (b) значение переменной конфигурации GIT,init.defaultBranch,$ git config --global init.defaultBranch mainваш компьютер работает за GIT версию 2.28 или более ПолемПоскольку я не установил эту переменную в моей установке GIT, ветвь в моем репозитории будет называться
master. В случае, если филиал в вашем репозитории имеет другое имя (которое вы можете проверить, используя$ git branch), например,main; Вы можете заменить все случаиmasterна протяжении оставшейся части этого учебника, с этим другим именем (например,master→main).
Введите недавно созданную папку:
$ cd my-appНа этом этапе на вашем компьютере есть приложение React, и вы находитесь в папке, которая содержит его исходный код. Все оставшиеся команды, показанные в этом уроке, могут быть запускаются из этой папки.
gh-pages NPM Установите пакет NPM gh-pages и назначьте его как зависимость разработки:
$ npm install gh-pages --save-dev На этом этапе пакет NPM gh-pages устанавливается на вашем компьютере, а зависимость приложения React от него задокументирована в файле приложения React package.json .
homepage в файл package.json Откройте файл package.json в текстовом редакторе.
$ vi package.jsonВ этом уроке текстовый редактор, который я буду использовать, является VI. Вы можете использовать любой текстовый редактор, который вы хотите; Например, код Visual Studio.
Добавить свойство homepage в этом формате*: https://{username}.github.io/{repo-name}
* Для сайта проекта это формат. Для пользовательского сайта формат:
https://{username}.github.io. Вы можете прочитать больше о собственностиhomepageв разделе «Страницы GitHub» документацииcreate-react-app.
{
"name": "my-app",
"version": "0.1.0",
+ "homepage": "https://gitname.github.io/react-gh-pages",
"private": true, На этом этапе файл приложения React App package.json включает в себя свойство с именем homepage .
package.json Откройте файл package.json в текстовом редакторе (если он еще не открыт в одном).
$ vi package.json Добавьте свойство predeploy и свойство deploy в объект scripts :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", На этом этапе файл приложения React package.json включает в себя сценарии развертывания.
Добавьте «удаленный» в местный репозиторий GIT.
Вы можете сделать это, выпустив команду в этом формате:
$ git remote add origin https://github.com/{username}/{repo-name}.git Чтобы настроить эту команду для вашей ситуации, замените {username} своим именем пользователя GitHub и замените {repo-name} на имя репозитория GitHub, который вы создали на шаге 1.
В моем случае я бегу:
$ git remote add origin https://github.com/gitname/react-gh-pages.gitЭта команда рассказывает GIT, где я хочу, чтобы она разжигала вещи, когда я-или пакет NPM
gh-pagesдействуя от моего имени,-выпускайте команду$ git pushиз этого местного репозитория GIT.
На этом этапе локальный репозиторий имеет «удаленный», URL, URL указывает на репозиторий GitHub, который вы создали на шаге 1.
Выдвинуть приложение React в репозиторий GitHub
$ npm run deployЭто приведет к тому, что сценарии
predeployиdeployопределенные вpackage.jsonдля запуска.Под капюшоном сценарий
predeployсоздаст распределимую версию приложения React и сохранит его в папке с именемbuild. Затем сценарийdeployподтолкнет содержимое этой папки к новому коммитированию в ветвиgh-pagesрепозитория GitHub, создавая эту ветвь, если ее еще не существует.
По умолчанию новый коммит в филиале
gh-pagesбудет иметь послание «обновления». Вы можете указать пользовательское сообщение о коммите через опцию-m, например:$ npm run deploy -- -m " Deploy React app to GitHub Pages "
На этом этапе репозиторий GitHub содержит ветвь с именем gh-pages , которая содержит файлы, которые составляют распределяемую версию приложения React. Тем не менее, мы еще не настроили страницы GitHub для обслуживания этих файлов.
gh-pages/ (root)Вот и все! Приложение React было развернуто на страницах GitHub!
На этом этапе приложение React доступно для всех, кто посещает URL-адрес homepage , который вы указали на шаге 4.
На предыдущем этапе пакет NPM gh-pages выдвинул распределимую версию приложения React в ветвь с именем gh-pages в репозитории GitHub. Тем не менее, исходный код приложения React еще не хранится на GitHub.
На этом этапе я покажу вам, как вы можете хранить исходный код приложения React на GitHub.
Сделайте изменения, которые вы внесли, когда следили за этим учебником, в master ветвь местного репозитория GIT; Затем подтолкните эту ветвь к master ветви репозитория GitHub.
$ git add .
$ git commit -m " Configure React app for deployment to GitHub Pages "
$ git push origin masterЯ рекомендую исследовать репозиторий GitHub на этом этапе. У него будут две ветви:
masterиgh-pages.masterветвь будет содержать исходный код приложения React, в то время как филиалgh-pagesбудет содержать распределяемую версию приложения React.
create-react-appCNAME при использовании пользовательского доменаcreate-react-app во что-то уникальное!master - исходный код приложения Reactgh-pages - приложение React, созданное из этого исходного кодаСпасибо этим людям за то, что они участвовали в поддержании этого учебника.
Этот список сохраняется вручную - на данный момент - и включает в себя (а) каждого человека, который подал запрос на привлечение, который в конечном итоге был объединен в master , и (б) каждого человека, который внес свой вклад по -разному (например, предоставление конструктивной обратной связи) и который одобрил Я включаю их в этот список.
