Проблемы при развертывании в heroku path = "/" path = "/ favicon.ico" - PullRequest
Новая
       48

Проблемы при развертывании в heroku path = "/" path = "/ favicon.ico"

2 голосов
/ 02 апреля 2020

Надеясь, что кто-то сможет помочь мне с проблемой, с которой я столкнулся, когда нажимаю на приложение реакции на heroku. Журналы heroku показывают следующие ошибки неоднократно.

at = код ошибки = H10 desc = метод "Приложение упало" = GET path = "/" host = jp-portfolio.herokuapp.com request_id = 4841ef14-b2f2-4ae7-82d7-d47abf123db7 fwd = "67.188.208.208" dyno = connect = service = status = 503 bytes = protocol = https 2020-04-02T06: 42: 02.631967 + 00: 00 heroku [router]: at = код ошибки = H10 desc = "Приложение упало" method = GET path = "/ favicon.ico" host = jp-portfolio.herokuapp.com request_id = 552909aa-ff34-4a4d-91 cc -c817938b39b7 fwd = "67.188.208.208" dyno = connect = service = status = 503 bytes = protocol = https

Мне не кажется, что мне нравится способ, которым я определил свои маршруты в своем приложении. Файл js, поэтому я изменил свое приложение. Файл js и добавил файл роутера, чтобы следовать React Routing работает на локальной машине, но не Heroku , но у меня это не сработало.

и этот

React router не может обрабатывать маршруты и выдавать предупреждение о том, что оно не соответствует

Приложение. js Файл 

import React, { Component } from 'react'

class App extends Component {
static propTypes = {
  children: PropTypes.node
}

render() {
  const { children } = this.props
  return (
    <div>
      {children}
    </div>
  )
}
}

export default App

Мой пакет JSON

{
  "name": "jp-portfolio",
  "version": "0.1.0",
  "private": false,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@material-ui/core": "^4.9.7",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/styles": "^4.0.0-rc.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "chart.js": "^2.9.3",
    "contentful": "^7.14.0",
    "history": "^4.10.1",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.9.0",
    "react-d3-speedometer": "^0.10.1",
    "react-dom": "^16.13.1",
    "react-fontawesome": "^1.7.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "typeface-roboto": "0.0.75"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

Router. js

import React from 'react';
import { BrowserRouter as Router, Route} from "react-router-dom";
import Portfolio from "./pages/portfolio";
import About from "./pages/about"
import { useRouterHistory, Router } from 'react-router'
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
    basename: '/test'
  })

export default <Router history={history} >
  <Route path="/" component={App}>
    <IndexRoute component={Portfolio}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>

Работает локально.

Кто-нибудь сталкивался с подобной проблемой и знает, как я мог бы решить эту проблему? Любая помощь будет принята с благодарностью!

1 Ответ

1 голос
/ 03 апреля 2020

https://blog.heroku.com/deploying-react-with-zero-configuration

Эй, ты go прошел через это? Я думаю, что если вы используете Heroku CLI, вам нужно добавить тег -b во время развертывания, чтобы добавить пользовательский пакет сборки.

Также похоже на этот вопрос Реагирует на сбой приложения Heroku после использования npm install

Edit: Итак, я попытался развернуть пример приложения реагирования на heroku и обнаружил аналогичную проблему. Проблема заключается в том, что когда вы используете Create-реакции-приложение для создания приложения реакции, оно автоматически добавляет конфигурации сборки. Теперь heroku собирает приложение и пытается обслуживать встроенное приложение. Следовательно, он не сможет маршрутизировать приложение, как ожидалось. Чтобы решить эту проблему, вам нужно будет либо использовать пакет сборки вместе с проектом, который сообщает heroku, как обслуживать файлы, либо вам придется разделить серверную часть и интерфейсную часть (frontend-реагировать и серверная часть express, используя узел.).

Ссылка - https://github.com/mars/create-react-app-buildpack#usage https://github.com/mars/heroku-cra-node

Редактировать 2: добавлены некоторые цитаты в соответствии с предложением @ IvanAracki

Благодаря фундаменту нулевого конфигурирования приложения create-реагировать-приложение идея развертывания нулевого конфига казалась вполне достижимой. Поскольку все эти новые приложения имеют общую неявную архитектуру, процесс сборки можно автоматизировать, а затем обслуживать с интеллектуальными настройками по умолчанию. Итак, мы создали этот пакет сборки сообщества, чтобы поэкспериментировать с развертыванием без конфигурации в Heroku. 

npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku open

Попробуйте сами, используя buildpack docs .

...