Развернуть Реакт с Heroku - PullRequest
1 голос
/ 10 февраля 2020

Привет, я пытаюсь развернуть свой проект с помощью heroku, но это невозможно, я не понимаю, я уже делал это в другом проекте, но на этот раз он не работает на моем сервере. js У меня есть этот код:

const express = require("express");
const graphqlHTTP = require("express-graphql");
const cors = require("cors");
const schema = require("./schema");
const path = require("path");

const app = express();

//allow Cross origin

app.use(cors());

app.use(
  "/graphql",
  graphqlHTTP({
    schema,
    graphiql: true
  })
);

app.use(express.static('public'));

app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

В моем приложении. js, который находится в моей папке клиента, я изменяю uri для AplolloClient:

import React from 'react';
import './App.css';
import Logo from "./logo.png";
import Matchs from './components/Matchs'
import MatchDetail from './components/MatchDetail'
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "@apollo/react-hooks";
import { BrowserRouter as Router, Route } from "react-router-dom";

const client = new ApolloClient({
  uri: "/graphql"
});

function App() {
  return (
    <ApolloProvider client={client}>
      <Router>
        <div className="container">
          <img
            src={Logo}
            alt="Nba App"
            style={{ width: 300, display: "block", margin: "auto" }}
          />
          <Route exact path="/" component={Matchs} />
          <Route exact path="/match/:gameId" component={MatchDetail} />
        </div>
      </Router>
    </ApolloProvider>
  );
}

export default App;

в моем пакете. json из папки моего клиента, которую я добавляю прокси:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/react-hooks": "^3.1.3",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "apexcharts": "^3.15.5",
    "apollo-boost": "^0.4.7",
    "classnames": "^2.2.6",
    "graphql": "^14.6.0",
    "lodash.flowright": "^3.5.0",
    "react": "^16.12.0",
    "react-apexcharts": "^1.3.6",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.12.0",
    "react-icons": "^3.9.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && mv build ../public",
    "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"
    ]
  },
  "proxy": "http://localhost:5000"
}

И я создал скрипт для сборки и перемещения в public / build. Но когда я внедряюсь в heroku, у меня всегда есть

VM165:1 POST http://localhost:4000/graphql net::ERR_CONNECTION_REFUSED

Но я не знаю где он взял этот URL, потому что я думаю, что я меняю все места, где это может быть проблематично. Большое спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...