Replit/Heroku 上的 React/Node 頁面部署會導致空白頁面
我正在使用 React 和 NodeJS/Express 製作電子商務服務。我已經在 Replit 上部署了我的項目，但不幸的是它只能在我的本地伺服器上運行。在其他裝置上，螢幕只是空白。我想我的伺服器設定搞砸了。我在 StackOverflow 上遇到過一些類似的主題，但沒有找到任何解決方案。我很樂意提供任何如何正確設定的提示。
我的index.js伺服器
const express = require('express');
const mongoose = require('mongoose');
const dotenv = require('dotenv');
const cors = require('cors');
const session = require('express-session');
const MongoStore = require('connect-mongo');
const path = require('path');
// set dotenv
dotenv.config();
// set app
const app = express();
app.listen(process.env.PORT || 8000, () => {
console.log('Server is running on port 8000', process.env.PORT)
});
// mongoDB connection
mongoose
.connect(process.env.MONGO_URL, {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => {console.log('DB connection succesfull')})
.catch((err) => {console.log('DB error is', err)});
// middleware
app.use(cors({
origin: ["http://localhost:3000", "http://localhost:8000"],
methods: ['POST', 'PUT', 'GET', 'OPTIONS', 'HEAD', 'DELETE'],
credentials: true
}))
if(process.env.NODE_ENV !== 'production') {
app.use(
cors({
origin: ['http://localhost:3000'],
credentials: true,
})
);
}
app.use(express.json());
app.use(express.urlencoded({ extended: false}));
app.use(session({
secret: process.env.SECRET,
store: MongoStore.create(mongoose.connection),
resave: false,
saveUninitialized: false,
/* This cause error in creating user session - no login available
cookie: {
secure: process.env.NODE_ENV == 'production',
},*/
}));
// access to storage folder
app.use(express.static(path.join(__dirname, '/client/build')));
// import routes
const userRoute = require('./routes/user.routes');
const authRoute = require('./routes/auth.routes');
const productRoute = require('./routes/products.routes');
const orderRoute = require('./routes/order.routes');
// use routes
app.use('/api', userRoute);
app.use('/auth', authRoute);
app.use('/products', productRoute);
app.use('/orders', orderRoute);
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '/client/build/index.html'));
});
我的環境文件
MONGO_URL = mongodb+srv://user:[email protected]/prospero?retryWrites=true&w=majority SECRET = pass NODE_ENV = production PASS_SEC = marc
我的設定檔
export const API_URL = (process.env.NODE_ENV === 'production') ? '/' : 'http://localhost:8000/';
我的 gitignore 檔案
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # production # misc .DS_Store .env.local .env.development.local .env.test.local .env.production.local npm-debug.log* yarn-debug.log* yarn-error.log*
json 檔案
{
"name": "04-prosperostore",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon index.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/MarcinBieniek/ProsperoStore.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/MarcinBieniek/ProsperoStore/issues"
},
"homepage": "https://github.com/MarcinBieniek/ProsperoStore#readme",
"dependencies": {
"@mui/x-data-grid": "^6.0.2",
"axios": "^1.3.4",
"bcryptjs": "^2.4.3",
"connect-mongo": "^4.6.0",
"cors": "^2.8.5",
"crypto-js": "^4.1.1",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"express-session": "^1.17.3",
"mongoose": "^7.0.1",
"multer": "1.4.4",
"nodemon": "^2.0.21",
"path": "^0.12.7",
"redux-thunk": "^2.4.2"
}
}