Блог

Главная - Вопросы по программированию - Развертывание приложения React с построением посылки на страницах Github

Развертывание приложения React с построением посылки на страницах Github

#reactjs #deployment #github-pages #parceljs

#reactjs #развертывание #github-страницы #parceljs

Вопрос:

Я пытаюсь развернуть приложение React с помощью Parcel на страницах Github.

Я развернул его, но приложение фактически не отображается на экране. Я не понимаю, что я делаю не так.

Package.json

 {
  "name": "pet-adoption-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "homepage": "https://github.com/junaidshaikh-js/pet-adoption-app",
  "scripts": {
    "format": "prettier --write "src/**/*.{js,jsx}"",
    "lint": "eslint "src/**/*.{js,jsx}" --quiet",
    "dev": "parcel src/index.html --public-url /pet-adoption-app/",
    "predeploy": "npm build",
    "deploy": "gh-pages -d dist"
  },
  "repository": {
    "type": "git",
    "url": "git https://github.com/junaidshaikh-js/pet-adoption-app.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/junaidshaikh-js/pet-adoption-app/issues"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.13.4",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.16.4",
    "@babel/preset-env": "^7.13.5",
    "@babel/preset-react": "^7.12.13",
    "eslint": "^8.3.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "gh-pages": "^3.2.3",
    "parcel": "^1.12.3",
    "prettier": "^2.4.1"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0"
  }
}

Вот ссылка для развертывания в реальном времени: https://junaidshaikh-js.github.io/pet-adoption-app /

Вот репозиторий Github: https://github.com/junaidshaikh-js/pet-adoption-app

Комментарии:

1. Сценарий и стили не опубликованы. Похоже, что только index.html есть ли на сервере. Parcel, должно быть, собрал все, потому что имена файлов искажены, но файлов там просто нет.

2. Как я могу это исправить?

3. Эта gh-pages команда публикует ваш dist в ветке gh-pages вашего репозитория. Настроена ли эта ветка в качестве вашего «источника» для страниц GitHub в этом репозитории? Перейдите в Настройки> Страницы для проверки.

4. Да, это исходная ветка

5. Проблема в том, что в index.html (опубликованный) ваши файлы CSS и JS связаны с путями, подобными этому: /style.e308ff8e.js , то есть ожидается, что они будут находиться в корневой папке. Но URL вашего приложения junaidshaikh-js.github.io/pet-adoption-app , так что index.html , все файлы CSS и JS находятся в папке /pet-adoption-app . Вам необходимо настроить Parcel так, чтобы он добавлял этот относительный путь ко всем ссылкам.

Ответ №1:

Как указал @tromgy в обсуждении, корень проблемы заключается в том, что сгенерированные html страницы содержат / символы перед ссылками URL на различные ресурсы.

Например, если у вас есть html-файл at domain.com/subfolder/index.html , который содержит <script src="/script.js"> , браузер будет искать скрипт at domain.com/script.js вместо domain.com/subfolder/script.js .

Если вы вместо этого удалите / (например <script src="script.js"> ), браузер будет искать скрипт относительно местоположения, в котором находился html-файл (например domain.com/subfolder/script.js ), что, вероятно, то, что вы хотите.

Parcel поддерживает --public-url опцию для достижения этой цели (см. cli docs и target docs). Передавая a . в качестве параметра, вы можете указать parcel исключить / из вывода. Итак, ваш сценарий сборки будет выглядеть примерно так:

 parcel build src/index.html --public-url .

(как ни странно, в вашем вопросе вы показали dev команду, которая использовала эту опцию, но я не видел этого кода в примере репозитория)

Следует также отметить, что вы используете неподдерживаемую версию parcel версии v1. Я обновил вас до версии v2 и исправил проблему, описанную выше в этом PR.

Комментарии:

1. Привет, Эндрю, я внес некоторые изменения, и приложение развертывается, но работает не полностью. Можете ли вы проверить еще раз? Спасибо за ваше время.

2. У вас такая же проблема на развернутом сайте — / перед URL-адресами. Запуск npm run build в клонированном репозитории приводит к правильному выводу html (т. Е. Без косых черт). Одна вещь, которую я заметил, заключалась в том, что развернутые HTML и Javascript не уменьшены (т. Е. Это должно быть результатом запуска parcel (т. Е. Режима разработки, который в вашем репозитории не имеет никаких --public-url флагов), вместо npm run build ) Возможно, проблема в том, что predeploy сценарий npm build (который является внутренней командой, выполняемой как часть npm install ) вместо npm run build того, который является вашим parcel build сценарием?

Ответ №2:

Шаг 1

  1. git remote add origin [YOUR REPO LINK]
  2. git add -A
  3. git commit -m "Initial commit"
  4. git push -u origin main

Шаг 2

 "homepage": "https://[USERNAME].github.io/[YOUR REPO NAME]",

Шаг 3

 npm install gh-pages --save-dev

Шаг 4

Добавьте скрипт в свой файл package.json

 "predeploy": "npm run build",
"deploy": "gh-pages -d build",

Выполните приведенную ниже команду

 npm run deploy

Комментарии:

1. Я развернул приложение, но оно не работает

Ответ №3:

После нескольких часов исследований я обнаружил, что при использовании react-router-dom > v4 и развертывании в поддомене (например //pet-adoption-appk , в вашем случае) вы должны предоставить basename атрибут для <BrowserRouter> значения поддомена. в вашем случае вы должны передать его следующим образом <BrowserRouter basename="/pet-adoption-app">

Метки: