Мое приложение отлично работает в среде разработчиков, где я использую прокси. После того, как я подтолкнул к героку (производство), я увидел пустой экран. В Chrome Developer Tools я увидел следующие две ошибки:
Unexpected token. manifest.json:1
Uncaught SyntaxError: Unexpected token < main.bac17543.js:1
Когда я нажал на эти две ошибки, я увидел, что файл манифеста, файл main.css и файл main.css имеют файл HTML в качестве источника. Не удается загрузить другие файлы из клиента / build / index.html.
Хорошо, поэтому, экспериментируя с этим, я обнаружил, что когда я запускаю "npm run dev", он прекрасно работает на клиентском порту. Однако возникает ошибка, когда приложение запускается на порт сервера и обслуживает файл index.html со следующим экспресс-кодом, показанным в курсе:
if (process.env.NODE_ENV === 'production') {
//Express will serve up production assets like main.js file
app.use(express.static('/client/build'));
//Express will serve up html file if it doesn't recognize the route
const path = require('path');
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
});
}
Этот код успешно обслуживает HTML-файл. Но все остальные файлы, на которые есть ссылки, терпят неудачу.
После нескольких перезагрузок в Heroku я воспроизвел ошибку, вынув производственный оператор if и перейдя к localhost: 5000 (sever port). После запуска «npm run build» из папки клиента я получил те же ошибки при запуске «npm run dev». Даже если я переключаю «build» на «public» для запуска index.html до «npm run build», я получаю те же ошибки. Чтобы проверить, был ли вызван html-файл, я написал <h3>testing html</h3>, и HTML-код успешно отобразился на экране в качестве единственного содержимого. Но, похоже, файлы манифеста, favicon, css и javascript не были найдены, возвращая исходный файл index.html и выдавая ошибку в начале файла: "<." </p>
Вот мой файл index.html в папке сборки:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="./manifest.json"><link rel="shortcut icon" href="./favicon.ico"><title>Compass</title><link href="./static/css/main.c092d6b6.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/main.bac17543.js"></script></body></html>
И вот оно в общей папке:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<h3>this HTML is called, but the javascript file fails when served from Express</h3>
<div id="root"></div>
</body>
</html>
Я пробовал абсолютные и относительные пути в атрибутах href и src в обеих папках. Пока еще нет кубиков. Я уверен, что пути правильные, потому что они работают иначе, но по какой-то причине он не читается правильно. Пути сборки: сервер / сборка / index.html, сервер / сборка / статика / css / main.d3f5fbbb.css и сервер / сборка / статика / js / main.69f468ec.js.
Возможно, есть какая-то проблема с конфигурацией? Я не коснулся конфигурации для веб-пакета или чего-либо еще. Я просто не уверен, почему доллар останавливается на HTML-файле при обслуживании из экспресс. Можете ли вы, пожалуйста, посоветовать?