Node.js 是否可以使用single package.json在Heroku上托管MERN应用程序?
我读了很多关于Heroku上MERN应用程序部署的博客,但它们都是使用单独的package.json进行客户端和服务器部署的 是否可以使用一个package.json文件 My package.jsonNode.js 是否可以使用single package.json在Heroku上托管MERN应用程序?,node.js,reactjs,express,heroku,mern,Node.js,Reactjs,Express,Heroku,Mern,我读了很多关于Heroku上MERN应用程序部署的博客,但它们都是使用单独的package.json进行客户端和服务器部署的 是否可以使用一个package.json文件 My package.json { "name": "ecommerce", "version": "0.1.0", "private": true, "author": "Dweep Panchal", "license": "ISC", "dependencies": { "@testin
{
"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显示:
无效的主机头
整个项目:是的,如果您的后端服务于前端,这是可能的。当后端和前端在两个单独的节点程序上运行时,Two
package.json
非常有用
无效的主机头
可能是由于您的服务器处理头的方式造成的,但由于您没有发布,到目前为止,我们无法进一步帮助您。让我快速解释如何将任何Reactjs和express部署到heroku。目标是使用npm run build生成一个构建文件夹,然后启动服务器以提供该构建文件夹中的静态内容
在heroku文档中,它声明heroku postbuild在启动脚本之前运行。这是执行npm运行构建以生成构建文件夹,然后使用开始脚本运行服务器代码的最佳位置。从那里,您的服务器应该使用express.static并指向生成生成文件夹的位置
这就是为什么人们喜欢使用server package.json,因为它不会干扰react start脚本。现在我马上看到的问题是,您没有正确使用脚本,也没有指向您应该生成的构建文件夹
在package.json中,创建一个启动app.js文件的启动脚本,然后创建一个heroku postbuild,该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.js中使用app.use(express.static())。在app.js中添加以下代码
if (process.env.NODE_ENV === "production") {
app.use(express.static("../build"));
}
我之所以说../build是因为您的build文件夹位于后端文件夹之外
我还检查了您的整个代码,还有其他一些小的配置问题。例如,如果您要部署到heroku,您应该使用
process.env.PORT
您的app.js文件是什么样子的?@HenryLy,在这里!是 啊它起作用了!谢谢你的帮助和时间!