我在Heroku上部署了一个MERN应用程序(使用MongoDB Atlas作为数据库),主页没有呈现登录或注册表单。 我检查了Heroku日志中的任何错误,没有错误。 另外,当我检查元素时,我看到元素在那里,但是React组件没有呈现。 只呈现CSS背景图像。 我的heroku-postbuild脚本有什么问题吗? 谢谢。请在此处输入图像说明
Heroku应用程序托管在“https://glacial-gorge-15530.herokuapp.com/login”。 下面是我的server.js和package.json文件。 我还添加了登录页面的开发vs生产截图的图像。
server.js
const express = require('express');
const connectDB = require('./config/db');
const path = require('path');
const app = express();
//Connect Database
connectDB();
//Init middleware
app.use(express.json({ extended: false }));
//Define routes
app.use('/api/users', require('./routes/users'));
app.use('/api/auth', require('./routes/auth'));
app.use('/api/recipes', require('./routes/recipes'));
//Serve static assets in production
if(process.env.NODE_ENV === 'production') {
//Set static folder
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;
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));
package.json
{
"name": "favorite-recipes-2",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"client": "0.0.1",
"config": "^3.3.1",
"create-react-app": "^3.4.1",
"express": "^4.17.1",
"express-validator": "^6.6.0",
"jsonwebtoken": "^8.5.1",
"materialize-css": "^1.0.0-rc.2",
"mongoose": "^5.9.20",
"react-transition-group": "^4.4.1"
},
"devDependencies": {
"concurrently": "^5.2.0",
"nodemon": "^2.0.4"
}
}
生产环境下登录页面截图开发环境下登录页面截图
您的.form-container
元素具有1%
的不透明度,这就是元素不可见的原因。
.form-container {
background-color: #e7e3e3;
opacity: 1%;
}
移除不透明度:1%
。