Я прошел через множество руководств, в которых предлагается создать прокси-сервер в package.json и подключить интерфейс и серверную часть вашего приложения. Но это не сработает, когда вы собираетесь работать в продакшене, потому что вы, очевидно, не будете использовать там localhost.
Итак, как нам развернуть приложение, которое полностью построено (интерфейс и бэкэнд), но которое до сих пор работало на локальном хосте и, наконец, готово к производству. ХОРОШИЙ ВОПРОС!! Радуйтесь, что вы оказались здесь, ведь я вам именно это и покажу. Но имейте в виду, что я использую, вы изначально использовали приложение create-response-app, поскольку команды связаны с ним (я сделаю другую статью для babel).
Сначала перейдите в свой проект реакции и выполните команду
npm запустить сборку
Это сделает оптимизированную сборку вашего приложения для реагирования, а также сделает из него статические активы. Затем переместите эту сборку на свой сервер.
Каталог файлов должен выглядеть примерно так
Я использую экспресс, и в нем для обслуживания статических файлов мы используем команду
app.use(express.static(path.join(__dirname, 'build')));Скопируйте и вставьте эту команду в свой app.js.
Теперь последний шаг - обслуживание файла index.html из пакета при поступлении первоначального запроса.
app.get(‘/’, (req, res) => {
res.send(“index”);
});
Вот и все, теперь все готово. Он готов к развертыванию в любом месте (достаточно серверной части).
Если вы особенно хотите развернуть его на heroku, и вы также хотите автоматизировать выполнение команды сборки, сохраните все приложение реакции в папке клиента и в сценариях package.json типа server в следующем сценарии
"heroku-postbuild": "cd client && npm install && npm run build"Теперь вам просто нужно git push to heroku, и он позаботится о создании приложения для реагирования и всего остального, но теперь, когда мы изменили структуру папок проекта в app.js сервера, измените следующую строку кода '' `
app.use(express.static(path.join(__dirname, 'client/build')));