#node.js #reactjs #heroku #deployment #mern
#node.js #reactjs #heroku #развертывание #mern
Вопрос:
Я развернул приложение mern stack в heroku, и развертывание прошло успешно, приложение отлично работает на локальном сервере разработки, но когда я нажимаю на ссылку развернутое приложение https://immense-sands-74220.herokuapp.com Я получаю сообщение Cannot Get / error, и после нескольких часов поиска я почти уверен, что существует проблема с моим серверным кодом, обслуживающим клиент просматривает при запуске приложения, я попробовал использовать приведенный ниже код:
const path = require('path');
// app.use(express.static(path.join(__dirname, './client/build')))
app.get('*', function(_, res) {
res.sendFile(path.join(__dirname, resolvedPath), function(err) {
if (err) {
res.status(500).send(err)
}
})
}) но в итоге я столкнулся с этой ошибкой: 
server.js
//jshint esversion:6
const express = require("express");
const cors = require("cors");
const bodyParser = require('body-parser');
const mongoose = require("mongoose");
const session = require("express-session");
const passport = require("passport");
// const path = require('path');
// const filePath = "./client/public/index.html"
// const resolvedPath = path.resolve(filePath);
// console.log(resolvedPath);
const notesRouter = require("./routes/notes");
const registerRouter = require("./routes/signup");
const loginRouter = require("./routes/signin");
require('dotenv').config();
const app = express();
const port = process.env.PORT || 3000;
app.use(cors());
app.use(express.json());
app.set('view engine', 'ejs');
app.use( bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.use(session({
secret:"This is keeper clone.",
resave: false,
saveUninitialized: false
}));
app.use(passport.initialize());
app.use(passport.session());
// const uri = process.env.ATLAS_URI;
mongoose.connect("mongodb srv://Karim:keeper@keeper.ickkk.mongodb.net/keeperDB?retryWrites=trueamp;w=majority", { useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology: true});
const connection = mongoose.connection;
connection.once("open", () => {
console.log("MongoDb database connection established successfully");
});
const User = require("./models/users");
passport.use(User.createStrategy());
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());
app.use(express.static('/public/index.html'));
app.use("/", notesRouter);
app.use("/", registerRouter);
app.use("/", loginRouter);
// app.use(express.static(path.join(__dirname, './client/build')))
// app.get('*', function(_, res) {
// res.sendFile(path.join(__dirname, resolvedPath), function(err) {
// if (err) {
// res.status(500).send(err)
// }
// })
// })
app.listen(port, () => {
console.log("Server is running on port 3000!");
}); client package.json
{
"name": "keeper",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "node server.js",
"heruko-postbuild": "npm install amp;amp; npm run-script build amp;amp; npm run-script start:prod0"
},
"engines": {
"node": "14.x",
"npm": "6.x"
},
"dependencies": {
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"body-parser": "^1.19.0",
"bootstrap": "^4.6.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"ejs": "^3.1.5",
"express": "^4.17.1",
"express-session": "^1.17.1",
"mongoose": "^5.11.13",
"mongoose-findorcreate": "^3.0.0",
"nodemon": "^2.0.7",
"passport": "^0.4.1",
"passport-local": "^1.0.0",
"passport-local-mongoose": "^6.1.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"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:3000"
} server package.json
{
"name": "backend",
"version": "1.0.0",
"description": "",
"engines": {
"node": "14.x",
"npm": "6.x"
},
"scripts": {
"test": "echo "Error: no test specified" amp;amp; exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"ejs": "^3.1.5",
"express": "^4.17.1",
"express-session": "^1.17.1",
"mongoose": "^5.11.10",
"mongoose-findorcreate": "^3.0.0",
"nodemon": "^2.0.7",
"passport": "^0.4.1",
"passport-facebook": "^3.0.0",
"passport-google-oauth20": "^2.0.0",
"passport-local": "^1.0.0",
"passport-local-mongoose": "^6.1.0"
}
} Это структура каталогов моего проекта
файл client package.json может содержать некоторые node.js зависимости, и это потому, что я переключил свою структуру каталогов так, чтобы серверная часть находилась в отдельной папке, а файлы клиента находились в корневом каталоге, и я продолжал получать ошибки module_not_found для зависимости каждого узла при развертывании в heroku, любая помощь была бы очень признательна, поскольку яя потратил более 6 часов на устранение проблем, связанных с развертыванием heroku, пытаясь устранить проблемы с журналами heroku
Ответ №1:
Вот как это работает для меня на heroku
if (process.env.NODE_ENV === “production”) {
app.use(express.static(“client/build”));
app.get(“*”, (req, res) => {
res.sendFile(path.resolve(__dirname, “client”, “build”, “index.html”));
});
}
Ответ №2:
Я не знаю точно, в чем ваша проблема, но убедитесь, что вы не забыли настроить любые переменные среды в настройках вашего проекта Heroku. Кроме того, у меня есть приложение, которое в настоящее время развернуто на Heroku (бесплатный уровень, без дополнений, без обновлений) и работает, используя почти тот же стек с аналогичной структурой проекта. Возможно, вы сможете сослаться на него и устранить свою проблему. Код здесь: https://github.com/Perrottarichard/pizzapizza-server