Можно ли разместить приложение MERN на Heroku, используя один пакет. json? - PullRequest
Новая
       102

Можно ли разместить приложение MERN на Heroku, используя один пакет. json?

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

Я читал несколько блогов о развертывании приложений MERN на Heroku, но все они используют отдельный пакет. json для клиента и сервера!

Можно ли использовать один пакет. json файл?

Структура моего проекта

Моя посылка. json

{
  "name": "ecommerce",
  "version": "0.1.0",
  "private": true,
  "author": "Dweep Panchal",
  "license": "ISC",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "braintree-web-drop-in-react": "^1.1.1",
    "concurrently": "^5.2.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "react-stripe-checkout": "^2.6.3",
    "body-parser": "^1.19.0",
    "braintree": "^2.22.0",
    "cookie-parser": "^1.4.5",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "express-jwt": "^5.3.3",
    "express-validator": "^6.4.0",
    "formidable": "^1.2.2",
    "jsonwebtoken": "^8.5.1",
    "lodash": "^4.17.15",
    "mongoose": "^5.9.7",
    "stripe": "^8.46.0",
    "uuid": "^7.0.3"
  },
  "scripts": {
    "server": "cd ./backend && node app.js",
    "start": "concurrently \"npm run server\" \"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"
    ]
  },
  "proxy": "http://localhost:8000",
  "devDependencies": {
    "nodemon": "^2.0.3"
  },
  "engines": {
    "node": "10.16.0",
    "npm": "6.9.0"
  }
}

app. js

require("dotenv").config({ path: "../.env" });
const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
const cors = require("cors");

const app = express();

// Routes
const authRoutes = require("./routes/auth");
const userRoutes = require("./routes/user");
const categoryRoutes = require("./routes/category");
const productRoutes = require("./routes/product");
const orderRoutes = require("./routes/order");
const stripeRoutes = require("./routes/stripepayment");
const braintreeRoutes = require("./routes/braintreepayment");

// DB Connection
mongoose
  .connect(
    `mongodb+srv://${process.env.DB_NAME}:${process.env.DB_PASS}@${process.env.DB_PROJECT}-xi8tq.mongodb.net/${process.env.DB_PROJECT}?retryWrites=true&w=majority`,
    {
      useNewUrlParser: true,
      useCreateIndex: true,
      useUnifiedTopology: true,
      useFindAndModify: true,
    }
  )
  .then(() => console.log("DB Connected!"))
  .catch(() => console.log("Failed to Connect DB"));

// Middleware
app.use(bodyParser.json());
app.use(cookieParser());
app.use(cors());

// My Routes
app.use("/api", authRoutes);
app.use("/api", userRoutes);
app.use("/api", categoryRoutes);
app.use("/api", productRoutes);
app.use("/api", orderRoutes);
app.use("/api", stripeRoutes);
app.use("/api", braintreeRoutes);

// Server Connection
const port = process.env.BACKEND_PORT || 8000;

app.listen(port, () => console.log(`Server Running at Port ${port}`));

Когда я развернул это приложение на heroku, URL проекта показывает:

Недопустимый заголовок хоста

Весь проект: https://github.com/dweep612/ecommerce

Ответы [ 2 ]

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

Позвольте мне быстро объяснить, как развертывание любых Reactjs и express на героку работает. Цель состоит в том, чтобы сгенерировать папку сборки с помощью npm Запустить сборку, а затем запустить сервер для обслуживания содержимого c из этой папки сборки.

В документации heroku говорится, что heroku-postbuild запускается до запуска скриптов. Это идеальное место для выполнения npm запуска сборки для создания папки сборки и последующего использования сценария запуска для запуска кода вашего сервера. Оттуда ваш сервер должен использовать express .stati c и указывать, где бы вы ни сгенерировали вашу папку сборки.

Вот почему людям нравится использовать серверный пакет. json, потому что он не будет мешать сценарию реакции запуска. Теперь проблема, которую я сразу вижу, заключается в том, что вы не используете правильные сценарии и не указываете на ту папку сборки, которую вы должны сгенерировать.

В вашем пакете. json создайте стартовый скрипт, который запускает ваше приложение. js файл, а затем создайте heroku-postbuild, который сгенерирует папку сборки. Как показано ниже 

"scripts": {
    "start": "cd ./backend && node app.js",
    "heroku-postbuild": "npm run build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

После этого в вашем приложении должно быть app.use(express.static(<<location of build folder>>)). js. Добавьте приведенный ниже код в свое приложение. js

if (process.env.NODE_ENV === "production") {
  app.use(express.static("../build"));
}

Причина, по которой я сказал ../build, заключается в том, что ваша папка сборки находится за пределами внутренней папки.

Я также проверил весь ваш код, и есть другие небольшие проблемы конфигурации. Например, если вы развертываете на heroku, вы должны использовать process.env.PORT

0 голосов
/ 27 апреля 2020

Да, это возможно, если ваш бэкэнд обслуживает ваш веб-интерфейс. Два package.json полезно, когда ваш бэкэнд и ваш веб-интерфейс запускаются на двух отдельных программах узла.

invalid host headers, вероятно, связано с тем, как ваш сервер обрабатывает заголовки, но так как вы не разместили минимальный воспроизводимый пример , на данный момент мы не можем вам помочь.

...