Блог

Главная - Вопросы по программированию - Приложение Heroku показывает пустую страницу. реагировать / выражать/ узел

Приложение Heroku показывает пустую страницу. реагировать / выражать/ узел

#node.js #reactjs #express #heroku #web-deployment

Вопрос:

https://peaceful-basin-17224.herokuapp.com/

Конечно, «это работает на моей машине».

Когда я смотрю на сеть, я вижу, что ресурсы загружаются из index.html но больше ничего. Кроме того, по какой-то причине npm run build он, похоже, не работает. Я heroku bash войду в приложение и не найду /frontend/build

Я возился с этим со вчерашнего вечера и чувствую, что не добился никакого прогресса. Любая помощь будет признательна!

Часть моей server.js

 app.use(express.static(path.join(__dirname, '/frontend')));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, '/frontend/public', 'index.html'));
});

app.use(express.static(__dirname  'frontend'));
//Serve static assests if in production 
if(process.env.NODE_ENV === 'production'){ 
  //Set static folder 
  app.use(express.static('frontend/build'));
  app.get('*', (req, res)=>{ 
    res.sendFile(path.resolve(__dirname, 'frontend', 'public', 'index.html'))   });
}

Вот моя посылка.json:

  {
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "proxy": "http://localhost:3001",
    "main": "server.js",
    "scripts": {
    "test": "echo "Error: no test specified" amp;amp; exit 1",
    "start": "node server.js",
    "server": "nodemon server.js",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend amp;amp; npm run build"
      },
    "author": "",
    "license": "ISC",
    "dependencies": {
    "@mailchimp/mailchimp_marketing": "^3.0.69",
    "express": "^4.17.1",
    "simple-react-modal": "^0.5.1"
      }
    }

Комментарии:

1. Устанавливаете ли вы необходимые зависимости для своего интерфейса перед запуском сборки?

2. Я думал, что об этом позаботится интерфейс npm install —prefix в моем heroku-postbuild. Разве это было бы не так? Я не имею в виду это саркастически, симпатичный новичок

3. Недавно я развернул приложение той же конфигурации, используя его в качестве параметров запуска в своем файле package.json "start": "concurrently "npm run install amp;amp; npm run build" "npm run server"" , где установил и встроил оба компакт-диска в мой клиентский проект react.

4. просто попробовал это и, столкнувшись с той же проблемой, это неправильно? спасибо, что так быстро ответили. «сценарии»: { «тест»: «эхо «Ошибка: не указан тест» amp;amp; выход 1″, «запуск»: «одновременно «npm запуск установки иamp; npm запуск сборки» «сервер запуска npm»», «heroku-postbuild»: «NPM_CONFIG_PRODUCTION=ложная установка npm-префиксный интерфейс иamp; npm запуск сборки» },

5. Этот сценарий довольно специфичен для моего проекта, используйте его в качестве ссылки и создайте свой собственный сценарий. Вы также можете прочитать о сценариях package.json здесь .

Ответ №1:

Я думаю, что вы можете удалить весь этот код:

 app.use(express.static(path.join(__dirname, '/frontend')));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, '/frontend/public', 'index.html'));
});

app.use(express.static(__dirname  'frontend'));
//Serve static assests if in production 
if(process.env.NODE_ENV === 'production'){ 
  //Set static folder 
  app.use(express.static('frontend/build'));
  app.get('*', (req, res)=>{ 
    res.sendFile(path.resolve(__dirname, 'frontend', 'public', 'index.html'))   });
}

и ставил только это:

 app.use(express.static(path.join(__dirname, './frontend/build')));

Мой react.js папка имела название «интерфейс», и она находилась на одном уровне с моим server.js файл, вот почему это одна точка ./frontend/build . И не удаляйте build имя и не меняйте его на какое-либо другое имя.

И, пожалуйста, дайте мне знать, поможет ли этот ответ.

Метки: