Replit/Heroku에 React/Node 페이지를 배포하면 빈 페이지가 나타납니다.

Question

React와 NodeJS/Express를 사용하여 전자상거래 서비스를 만들고 있습니다. 내 프로젝트를 Replit에 배포했지만 불행히도 내 로컬 서버에서만 작동합니다. 다른 장치에서는 화면이 비어 있습니다. 내 서버 설정이 엉망인 것 같아요. StackOverflow에서 비슷한 주제를 발견했지만 해결책을 찾지 못했습니다. 올바르게 설정하는 방법에 대한 조언을 제공해 드리겠습니다.

내 index.js 서버

으아아아

내 환경 파일

으아아아

내 프로필

으아아아

내 gitignore 파일

으아아아

json 파일

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'));
});

Answer 1

이것을 시도해 보세요

package.json 파일에 이 줄을 추가해 보세요

으아아아