时间戳

首页 > 解决方案 > Heroku 应用程序在部署到 Heroku 时收到 503 响应

node.js - Heroku 应用程序在部署到 Heroku 时收到 503 响应

问题描述

我在这里有一个应用程序，可以在地图上显示国际空间站的位置，用户可以向国际空间站发送一条消息，该应用程序在发送消息时在国际空间站所在的位置放置一个图标。

当我在本地启动服务器和客户端以及使用服务器发送 index.html 页面时，它都非常有效，但是一旦我部署到 Heroku，对服务器的请求就会失败，我无法获取 ISS 位置或添加消息。

这是我的 index.js 文件

const express = require("express");
const app = express();
const path = require("path");
const cors = require("cors");
const coords = require("./schema");
const axios = require("axios");
var moment = require("moment");
moment().format();

app.use(express.json());

app.use(cors("*"));

app.post("/message", (req, res) => {
  axios
    .get(
      `https://nominatim.openstreetmap.org/reverse?lat=${req.body.lat}&lon=${req.body.long}&format=json`
    )
    .then(({ data }) => {
      var testCoords = new coords({
        lat: req.body.lat,
        long: req.body.long,
        text: req.body.text,
        date: Date.now(),
        location: data.error ? "the ocean" : data.display_name
      });

      testCoords.save(err => {
        if (err) {
          console.log(err);
        } else {
          coords.find({}, (err, docs) => {
            res.status(200).send(docs);
          });
        }
      });
    });
});

app.get("/message", (req, res) => {
  coords.find({}, (err, docs) => {
    res.status(200).send(docs);
  });
});

app.use(express.static(`${__dirname}/../build`));

app.get("*", (req, res) => {
    process.env.PORT && res.sendFile(path.join(__dirname, "../build/index.html"));
});

app.listen(process.env.PORT || 3000, () => {
  console.log("Server started");
});

和我的 App.js 客户端

import React, { Component } from "react";
import { Map, Marker, TileLayer, Popup } from "react-leaflet";
import axios from "axios";
import L from "leaflet";
import Form from "./Form";
import Moment from 'moment';
export default class App extends Component {
  constructor() {
    super();
    this.state = {
      lat: "",
      long: "",
      zoom: 10,
      messages: [],
      showForm: true
    };
  }

  componentDidMount = () => {
    axios.get("/message").then(res => {
      this.setState({
        messages: res.data
      });
      setInterval(this.getIss, 2500);
    });
  };

  postMessage = message => {
    axios
      .post("/message", {
        text: message,
        lat: this.state.lat,
        long: this.state.long
      })
      .then(res => {
        this.setState({
          messages: res.data,
          showForm: false
        });
      });
  };

  getIss = () => {
    axios.get("https://api.wheretheiss.at/v1/satellites/25544").then(res => {
      this.setState({
        lat: res.data.latitude,
        long: res.data.longitude
      });
    });
  };

  formatDate = date => { 
    return Moment(date)
      ._d.toString()
      .split(" ")
      .splice(0, 4)
      .join(" ");
  }
  render() {
    const myIcon = L.icon({
      iconUrl: require("./assets/ISS-sm.png"),
      iconSize: [64, 64],
      iconAnchor: [32, 64],
      popupAnchor: null,
      shadowUrl: null,
      shadowSize: null,
      shadowAnchor: null
    });

    const messages = this.state.messages.map(message => {
      return (
        <Marker position={[message.lat, message.long]}>
          <Popup>
            <div>
              <h1>{message.text}</h1>
              <p>{`${this.formatDate(message.date)} over ${message.location}`}</p>
            </div>
          </Popup>
        </Marker>
      );
    });
    return (
        <div>
          <Form postMessage={this.postMessage} show={this.state.showForm} />
          <Map center={[this.state.lat, this.state.long]} zoom={3}>
            <TileLayer
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            />
            {messages}
            <Marker
              icon={myIcon}
              position={[this.state.lat, this.state.long]}
            />
          </Map>
        </div>
    );
  }
}

我收到 503 错误。

我曾尝试发送 GET 到https://myherokuapp.com/messages，但这也不起作用。而且我不知道如何让这个东西正常运行。

任何帮助表示赞赏。

标签： node.jsreactjsleaflet

解决方案

如果不知道里面有什么，我不太确定"./schema"，因为这似乎是某种映射/经纬度模式。当然，当我运行你的代码时，我得到了一个Error: Cannot find module './schema'错误，这是有道理的，因为我没有那个文件。

请记住，前端代码中的错误不应该（通常！）返回 5xx 错误，在这种情况下，最好的办法是查看 Heroku 日志并查看后端发生了什么。

去做这个：

  1. 转到相关应用程序的 Heroku 仪表板。
  2. 在右上角，单击“更多”按钮，然后单击“重新启动所有测功机。这不是绝对必要的，但它可以帮助您准确定位问题发生的时间。
  3. 在您的控制台中，假设您已安装 heroku CLI（如果没有，请执行此操作！） do heroku logs --app myherokuapp --tail，其中myherokuapp当然是您的应用程序的名称。
  4. 尝试访问您的（实时）网站，并查看日志。他们有什么表现吗？

一般来说，HTTP 503 表示“服务不可用”，这意味着您尝试访问的任何服务器都没有响应，或者，好吧，不可用。

一些初步研究表明，在很多情况下，503 可能是由于某人没有在他们的文件中保存适当的依赖package.json项，所以首先检查一下：尝试将您的项目（文件夹除外！）复制到另一个node_modules文件夹，运行npm install，然后然后npm start（或node index.js或其他）。

推荐阅读