#node.js #reactjs #express #nginx #routes
Вопрос:
Работа над веб-сайтом для сокращения ссылок. Сайт работает так, как задумано в моей рабочей среде localhost, но, похоже, я не могу получить маршрут экспресс-получения с параметрами запроса, работающий после включения Nginx на моем развернутом сервере Digital Ocean Ubuntu Linux.
Node.js / Экспресс-маршрут получения:
router.get("/:code", async (req, res) => {
try {
const url = await Url.findOne({ urlCode: req.params.code });
if (url) {
return res.redirect(url.longUrl);
} else {
return res.status(404).json("no url found");
}
} catch (error) {
console.error(error);
res.status(500).json("server error");
}
});
Конфигурационный файл Nginx (etc/nginx/sites-доступно / по умолчанию):
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
server_name myname.com www.myname.com;
location / {
proxy_pass http://localhost:3000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_cache_bypass $http_upgrade;
}
Если я изменю порт локального хоста на свой экспресс-сервер (7777), маршрут GET будет работать с параметром запроса URL (т.Е.: http://example.com/random8chars ), но интерфейс React не загружается.
Как настроено в настоящее время (порт 3000 / сервер реагирования), маршрут Postman GET к «/: code» возвращает желаемый результат, но когда я ввожу преобразованную ссылку в строку URL в Chrome, она возвращает заставку по умолчанию. страница. Фактически, когда я ввожу ЛЮБОЕ расширение за пределами имени моего сайта в Chrome, оно всегда показывает заставку по умолчанию. Я знаю, что это проблема с Nginx, но, похоже, я не могу заставить его работать.
Работал над этим весь день безрезультатно. Найдено несколько потоков переполнения стека, затрагивающих эту тему, но ничего не работает. Я попытался добавить второй маршрут определения местоположения в конфигурационный файл Nginx, но безрезультатно. пример того, что я пробовал:
location /:code {
proxy_pass http://localhost:7777/:code;
}
Пожалуйста, помогите! Я застрял и чувствую, что я так близок к тому, чтобы заставить это работать. Я был бы очень признателен за любую информацию об исправлении этого. Спасибо.
Ответ №1:
Я просто добавил комментарий, но у меня еще нет представителя. Итак, мне кажется, что Nginx пытается обслуживать другой файл, которого не существует. Попробуйте добавить:
location / {
try_files $uri /index.html;
}
Это заставит nginx всегда пытаться использовать правильный файл, игнорируя путь.
Комментарии:
1. спасибо за ответ, но, к сожалению, это не сработало. есть еще идеи?
Ответ №2:
итак, я наконец решил проблему! изначально я подходил к этой проблеме с неправильной точки зрения. видите ли, когда в моей среде разработки у меня был настроен прокси-сервер на моем сервере react для отправки любых неизвестных запросов на мой сервер express. дело в том, что прокси, установленный в package.json, не работает в производственной среде, поэтому мое приложение для сокращения ссылок работало в dev, но не дублировалось в производстве.
вот как я это решил:
я настроил nginx так, чтобы он указывал на мой экспресс-сервер @ порт 7777. я использовал команду сборки npm для экспорта моего приложения react в папку сборки, а затем настроил свой сервер express для обслуживания папки сборки. вот и все. когда вы получаете доступ к URL-адресу веб-сайта по умолчанию, он загружает папку сборки react, а затем, когда я добавляю сокращенную ссылку (GET /:code ), это работает как шарм. Спасибо!