Блог

Я новичок в NGINX, так что это может быть простым решением, но я не могу найти никакой хорошей документации о том, что я пытаюсь здесь сделать.

Итак, у меня есть веб-сайт, который размещен на сервере ubuntu aws с помощью nginx и pm2. моя проблема в том, что я хочу обслуживать веб-сайт по адресу www.mysite.com , а приложение react — по адресу www.mywebsite.com/app . кажется, что это не самое сложное, что нужно сделать. Однако у меня возникли проблемы, и я не могу заставить его работать так, как хотелось бы. (частично это связано с тем, что я также хочу разместить сервер API на www.mywebsite.com/api , но после этого это проблема). Сначала я смог просто разместить приложение react на www.mysite.com со следующей конфигурацией nginx:

 server {
    listen 80;
    server_name 18.191.56.251;
    root /home/ubuntu/app/src;
location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_max_temp_file_size 0;
    proxy_pass http://127.0.0.1:3000/;
    proxy_redirect off;
    proxy_read_timeout 240s;
}
}
  

Но когда я переключаю его на подмаршрут, изменяя конфигурацию следующим образом:

 server {
    listen 80;
    server_name x.x.x.x;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        proxy_redirect off;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        proxy_redirect off;
        proxy_set_header   X-Forwarded-Proto $scheme;

        proxy_connect_timeout       600;
        proxy_send_timeout          600;
        proxy_read_timeout          600;
        send_timeout                600;

    location /status {
        return 200;
    }

    location /app {
        proxy_pass http://127.0.0.1:3000;
    }

    location / {
        proxy_pass http://...:3011/;
    }
}
  

Тогда мой базовый маршрут www.mywebsite.com для статического веб-сайта работает нормально, но www.mywebsite.com/app не работает и «загружает» пустую страницу, но при проверке вы видите, что приложение не может загрузить некоторые ресурсы:

 bundle.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
0.chunk.js:1 
Failed to load resource: the server responded with a status of 404 (Not Found)
main.chunk.js:1 
Failed to load resource: the server responded with a status of 404 (Not Found)
  

РЕДАКТИРОВАТЬ дополнительные исследования:
Если я проверю запрос на ресурс, я увижу, что его URL- www.mywebsite.com/static/js/XXX.js но статическая папка находится по адресу ~/app/build/static . это проблема nginx или pm2 с размещением статических файлов?

Любая помощь приветствуется, спасибо

Поэтому мне все равно понравился бы другой результат, чем этот, но я нашел обходной путь для этого, я добавил следующее после location /app :

 location /static {
     proxy_pass http://127.0.0.1:3000;
}
  

мне не нравится это решение, потому что, если у меня в конечном итоге будет статический контент как часть других проектов, это не сработает, но каким-то образом все ресурсы для моего веб-сайта упакованы в правильный прокси по адресу / . итак, в настоящее время все работает.