【发布时间】：2020-09-04 14:59:14
【问题描述】：
这是我第一次尝试将 react 应用部署到 Heroku，所以很有可能我错过了一些东西。
但是，目前每次我尝试运行“heroku open”时都会收到应用程序错误。当我运行 'heroku logs --tail' 时，我会收到此错误消息。
2020-06-09T15:30:19.991895+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=floating-hamlet-41018.herokuapp.com request_id=541e3c31-5899-4d5e-a8e7-7a57770135f5 fwd="77.97.218.22" dyno= connect= service= status=503 bytes= protocol=https
2020-06-09T15:30:29.439518+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=floating-hamlet-41018.herokuapp.com request_id=fd0aff85-5a4b-4d3c-9e62-f639ecfab98c fwd="77.97.218.22" dyno= connect= service= status=503 bytes= protocol=https
2020-06-09T15:30:32.592482+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=floating-hamlet-41018.herokuapp.com request_id=1eb4f2ec-96eb-4baa-bf9f-ff3b54bb16e3 fwd="77.97.218.22" dyno= connect= service= status=503 bytes= protocol=https
2020-06-09T15:36:12.451266+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=floating-hamlet-41018.herokuapp.com request_id=9899253b-8a31-4afa-8bcd-ec9632bc73dd fwd="77.97.218.22" dyno= connect= service= status=503 bytes= protocol=https
2020-06-09T15:42:40.322514+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=floating-hamlet-41018.herokuapp.com request_id=13cd4bec-baab-4e9e-873f-8172d141826a fwd="77.97.218.22" dyno= connect= service= status=503 bytes= protocol=https
2020-06-09T15:42:44.196962+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=floating-hamlet-41018.herokuapp.com request_id=008e86ef-8738-499c-b873-a7e20c892a4b fwd="77.97.218.22" dyno= connect= service= status=503 bytes= protocol=https
Package.json 文件
{
"name": "weather-react",
"version": "0.1.0",
"private": true,
"engines": {
"node": "13.12.0",
"npm": "6.14.4"
},
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"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"
]
}
}
App.js
import React, { useState } from 'react';
const api = {
key: process.env.REACT_APP_API_KEY,
base: "https://api.openweathermap.org/data/2.5/"
}
function App() {
const [query, setQuery] = useState('');
const [weather, setWeather] = useState({});
const search = evt => {
if (evt.key === "Enter") {
fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
.then(res => res.json())
.then(result => {
setWeather(result);
setQuery('');
console.log(result);
});
}
}
const dateBuilder =(d) => {
let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Nov", "Dec"];
let days = ["Sunday", "Mondy", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
let day = days[d.getDay()];
let date = d.getDate();
let month = months[d.getMonth()];
let year = d.getFullYear();
return `${day} ${date} ${month} ${year}`
}
return (
// (Condition) ? 'return value' :
<div className={(typeof weather.main != "undefined") ?
((weather.main.temp > 15 && weather.main.temp < 30 && weather.weather[0].main === "Clouds") ? 'app warmcloudy' : (weather.main.temp > 15 && weather.main.temp < 30 && weather.weather[0].main === "Clear") ? 'app warm'
: (weather.main.temp < 1 && weather.weather[0].main !== "Rain") ? 'app ice' : (weather.weather[0].main === "Thunderstorm") ? 'app lightning' :
(weather.weather[0].main === "Snow") ? 'app snow' : (weather.main.temp >= 30 && weather.weather[0].main !== "Rain") ? 'app hot' :
(weather.main.temp < 6 && weather.weather[0].main === "Clear") ? 'app coldclear' :
(weather.weather[0].main === "Rain") ? 'app raining' : 'app clear') : 'app'}>
<main>
<div className="search-box">
<input
type="text"
className="search-bar"
placeholder="Search for a location..."
onChange={e => setQuery(e.target.value)}
value={query}
onKeyPress={search}
/>
</div>
{(typeof weather.main != "undefined") ? (
<div>
<div className="location-box">
<div className="location">{weather.name}, {weather.sys.country}</div>
<div className="date">{dateBuilder(new Date())}</div>
</div>
<div className="weather-box">
<div className="temp">
{Math.round(weather.main.temp)}°c
{console.log(weather.weather[0].main)}
</div>
<div className="weather">{weather.weather[0].main}</div>
<div className="feelslike">Feels like {Math.round(weather.main.feels_like)}°c</div>
<div className="windspeed">Wind Speed: {Math.round(weather.wind.speed)}mph</div>
</div>
</div>
) : ('')}
</main>
</div>
);
}
export default App;
如果我遗漏了什么，请告诉我！
谢谢！
【问题讨论】：
-
你的应用只是 React 还是有服务器？如果它只是一个 React 应用程序（静态页面），您需要使用另一个站点来托管它。我通常为此使用netlify。超级易于使用，可以直接连接到您的 github 存储库，以监控重建更改，就像您可以使用 heroku 一样
-
很确定它只是一个 React 应用程序！不涉及服务器
-
这就是问题所在。尝试使用 netlify 或其他静态站点托管服务来托管您的应用程序，而不是 netlify。使用 heroku，您需要一个服务器来托管应用程序
-
谢谢，我试试看！
标签： reactjs heroku deployment