После развертывания Heroku клиент React завершается неудачно с Axios при указании localhost

Question

У меня есть клиент React и сервер NODE.JS.

Клиент на порту 3000, Сервер на 5000.

Когда я делаю запросы от клиента, это выглядит так:

import axios from "axios";
const axiosInstance = axios.create({
baseURL: "http://localhost:5000"
});

try {
const res = await axiosInstance.post("/api/myRoute", ....);

... more code 
}


catch(...) { 

}

Проблема в том, что когда я загружаю приложение в Heroku, клиент получает 404 для запросов Axios, хотя я использовал в server.js, process.env.PORT:

  const PORT = process.env.PORT || 5000;
  app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

Как мы можем использовать Axios на Heroku, не указывая localhost в качестве baseUrl?

Answer 1

Благодаря @Willman я исправил проблему - для тех, кто сталкивается с той же проблемой, просто добавьте это:

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
    // add other server routes to path array
    app.use(proxy(['/api' ], { target: 'http://localhost:5000' }));
} 

К вашему server.js / index.js на стороне сервера.

Спасибо@ Willman.

Answer 2

В разработке, когда вы переходите на localhost:3000, вы посещаете сервер разработки, для которого create-react-app сценарии запущены для вас с npm start. Затем этот сервер отправляет пакет разработки вашего приложения в ваш браузер.

Вы также запустите второй сервер для вашего API localhost:5000. Это сервер, к которому ваше приложение React (которое теперь работает в браузере) отправляет локальные запросы API.

У вас (вероятно) не будет 2 работающих серверов в зависимости от ваших настроек. Вместо этого ваш нод / экспресс-бэкэнд будет обслуживать ваш файл сборки, когда есть запрос, который не обрабатывается вашей API-маршрутизацией (и, следовательно, вероятно, является маршрутом на стороне клиента)

Предположим, что структура проекта выглядит следующим образом:

-> MyCoolApp
  -> index.js // express server
  -> client // create-react-app application
     -> src
        -> index.js
        -> setupProxy.js

Сначала настроить http-proxy-middleware для того, чтобы запросы API к вашему серверу из вашего клиентского приложения выполнялись одинаково при разработке и производстве с использованиемaxios.get('/api/route')

// place in src with index.js no need to import anywhere
const proxy = require('http-proxy-middleware')

module.exports = function(app) {
    // add other server routes to path array
    app.use(proxy(['/api' ], { target: 'http://localhost:5000' }));
}

Далее Настройте ваш сервер index.js так, чтобы он работал по-разному в рабочей / промежуточной и рабочей разработке (при условии, что вы используете экспресс) :

const express = require('express');
const app = express();

require('./routes')(app); //these are your api routes

//Non api requests in production
if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging') {
    // Add production middleware such as redirecting to https

    // Express will serve up production assets i.e. main.js
    app.use(express.static(__dirname + '/client/build'));
    // If Express doesn't recognize route serve index.html
    const path = require('path');
    app.get('*', (req, res) => {
        res.sendFile(
            path.resolve(__dirname, 'client', 'build', 'index.html')
        );
    });
}

//start server
const PORT = process.env.PORT || 5000; //Heroku sets port dynamically
app.listen(PORT, () => {
    console.log('listening...');
}).on('error', err => {
    console.log(`Error Code: ${err.code}`);
});

Наконец, когда Heroku завершит установку корневых зависимостей, она запустит скрипт под названием heroku-postbuild, который вы можете поручить герою установить ваши клиентские зависимости и построить ваше производственное приложение React.

На вашем сервере package.json добавьте / измените следующие сценарии:

"scripts": {
    "start": "node index.js",
    "server": "node index.js",
    "client": "npm run start --prefix client",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },

Эта последняя часть полезна, так как Heroku основан на git, и это плохая практика для фиксации вашего буild directory / files to git (не забудьте добавить каталог сборки в gitignore, если вы сохраняете сборки локально!)

Кроме того, Heroku по умолчанию устанавливает только производственные зависимости (но не разработку)зависимости), если это желаемое поведение, вы можете пропустить NPM_CONFIG_PRODUCTION=false