Включение маршрута реакции / Экспресс с параметрами запроса в Nginx

#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 ), это работает как шарм. Спасибо!