[英]How to deploy node js app with react to heroku
我尝试将我的 MERN 应用程序部署到 heroku。
在 heroku 上构建成功后没有看到 API 路由:
步骤:在本地主机上,我同时运行节点服务器和客户端(create-react-app)。 服务器在端口 5000 上,客户端在端口 3000 上。在此之后,我从带有项目的 API 路由 /hotels 数组中获取并将其连接到 Redux 存储并显示它。
正确行为:
本地主机:工作正常
Heroku : 损坏(未连接 API)
这是我的 server.js 文件:
const express = require('express');
const path = require('path');
const app = express();
const http = require('http');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cookieSession = require('cookie-session');
const passport = require('passport');
const morgan = require('morgan');
const keys = require('./API/config/keys');
//######### MODELS #########
require('./API/models/Users');
//######### SERVICES #########
require('./API/services/passport');
//######### MONGODB CONNECT #########
mongoose.connect(MONGO_CONNECT);
//######### ROUTES #########
const hotelsRoutes = require('./API/routes/hotels');
const countRoutes = require('./API/routes/count');
const topRoutes = require('./API/routes/top');
// Use routes
app.use('/hotels', hotelsRoutes);
app.use('/count', countRoutes);
app.use('/top', topRoutes);
app.use(morgan('dev'));
app.use('/uploads', express.static('uploads'));
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(
cookieSession({
maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
keys: [keys.cookieKey]
})
);
app.use(passport.initialize());
app.use(passport.session());
require('./API/routes/authRoutes')(app);
app.use(express.static('client/build'));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
const port = process.env.PORT || 5000;
const server = http.createServer(app);
server.listen(port);
Package.json(服务器):
{ "name": "root-react-hotel-app", "version": "0.1.0", "main": "server.js", "scripts": { "client": "cd client && yarn start", "start": "node server.js", "start-api": "nodemon server.js", "dev": "concurrently \\"yarn start-api\\" \\"yarn client\\"", "build": "cd client && npm install && yarn build" }, "devDependencies": { // }, "dependencies": { // } }
Package.json(客户端):
{ "name": "client-react-hotel-app", "version": "0.1.0", "private": true, "proxy": { "/auth/google": { "target": "http://localhost:5000" }, "/api/*": { "target": "http://localhost:5000" }, "/*": { "target": "http://localhost:5000" } }, "dependencies": { // Here are dependencies }, "scripts": { "build-css": "node-sass-chokidar src/ -o src/", "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive", "start-js": "react-scripts start", "start": "npm-run-all -p watch-css start-js", "build-js": "react-scripts build", "build": "npm-run-all build-css build-js", "eject": "react-scripts eject", "compile:sass": "node-sass src/css/styles.scss src/css/styles.css -w", "generate:doc": "sassdoc src/css/abstracts/_mixins.scss", "test": "cross-env NODE_ENV=test jest --config=jest.config.json", "test-coverage": "cross-env NODE_ENV=test jest --coverage --config=jest.config.json", "test-ci": "cross-env NODE_ENV=test jest --config=jest.config.json --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js" }, "devDependencies": { // Here are devDependencies } }
还尝试使用static.json文件和 Procfile:
{ "root": "client/build/", "setupFiles": [ "<rootDir>/client/src/setupTests.js" ] }
任何人都可以帮忙吗?
由于您的 express 服务器同时为您的 react 包和 api 路由提供服务,因此:
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
部署到 heroku(生产模式)时,您需要保护“app.get”中的 api 路由。 您可以使用一个简单的正则表达式来为您的反应包提供所有路由,除了“/api”(或任何您的 api 端点,在您的情况下为 /API)。 它可以在本地运行,因为您在不同的端口上运行 api 和 react 应用程序,而不是在同一台服务器上。
通常是这样的:
if (process.env.NODE_ENV === 'production') {
app.get(/^\/(?!api).*/, (req, res) => { // don't serve react app to api routes
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.