Nginx: обслуживайте несколько приложений React на одном сервере

Я пытаюсь установить несколько приложений React на одном сервере. Проблема в том, что после сборки проекта index.html из build/ обнаруживается, а вспомогательные файлы из build/static нет. Изначально с одним приложением у меня было location static/ с псевдонимом. Однако с несколькими проектами и несколькими static/ каталогами я не могу этого сделать. В основном я хочу, чтобы у каждого приложения была собственная статическая папка. Как мне решить мою проблему?

В браузере ошибка выглядит так:

GET http://my.servername/static/css/2.266e55a5.chunk.css net::ERR_ABORTED 404 (Not Found)

Моя текущая настройка выглядит так:

server {
    listen   80;
    server_name my.servername;
    root   /data/adpop/;


    location /possible-malware-domains-viewer/ {
            alias /data/adpop/possible-malware-domains-viewer/build/;
            try_files $uri /possible-malware-domains-viewer/index.html;

            add_header Access-Control-Allow-Origin *;
            autoindex on;

            # Simple requests
            if ($request_method ~* "(GET|POST)") {
                    add_header "Access-Control-Allow-Origin"  *;
            }

            # Preflighted requests
            if ($request_method = OPTIONS ) {
                    add_header "Access-Control-Allow-Origin"  *;
                    add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
                    add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
                    return 200;
           }
    }

    location /punycode-domains-viewer/ {
            alias /data/adpop/punycode-domains-viewer/build/;
            try_files $uri /punycode-domains-viewer/index.html;

            [...same settings as above...]
           }
    }
}

Я попытался объединить ответы из здесь, здесь или здесь, извините, если это выглядит беспорядочно или у меня есть серьезные ошибки. Если то, чего я пытаюсь достичь, не совсем нормально, предложите что-нибудь еще. Спасибо!


reactjs deployment nginx nginx-location
person Adrian Pop    schedule 14.06.2019    source источник
comment
Поэтому URI, начинающиеся с /static/, следует искать в нескольких каталогах, например /data/foo/build/static/ и /data/bar/build/static/?   -  person Richard Smith    schedule 14.06.2019
comment
@RichardSmith Совершенно верно. Каждое приложение должно знать о своей статической папке.   -  person Adrian Pop    schedule 14.06.2019
comment
@RichardSmith Например, приложение /punycode-domains-viewer/ должно искать свои статические файлы в data/adpop/punycode-domains-viewer/build/static/ и так далее. Я не хочу смешивать статические файлы нескольких приложений.   -  person Adrian Pop    schedule 14.06.2019

Ответы (1)


arrow_upward
3
arrow_downward

Совместное использование одного и того же префикса пространства имен URI в нескольких проектах и ​​каталогах не очень эффективно и не масштабируемо. Было бы предпочтительнее дать каждому проекту уникальный префикс URI, чтобы /project1/index.html находил свои ресурсы, используя URI, например /project1/foo.css. В качестве альтернативы можно использовать общий каталог сборки для файлов ресурсов и собрать их вместе в сценариях сборки.

Однако, если вы должны хранить файлы ресурсов в отдельных каталогах и использовать один и тот же префикс URI для ссылки на них, директива Nginx try_files может искать каталоги последовательно, пока не будет найдено подходящее имя файла.

Например:

root /data/adpop;

location /static/ {
    try_files
        /possible-malware-domains-viewer$uri
        /punycode-domains-viewer$uri
        =404;
}

URI /static/css/foo.css будет искать сначала в /data/adpop/possible-malware-domains-viewer/static/css/foo.css, а затем в /data/adpop/punycode-domains-viewer/static/css/foo.css. И если ни один файл не найден, возвращается статус 404.

Дополнительные сведения см. В этом документе.

person Richard Smith    schedule 14.06.2019
comment
Я знаю, что это не очень эффективно, но это всего лишь несколько простых и быстрых приложений, которые используются для отображения некоторых результатов, они быстро меняются. Возможно, я изменю все, чтобы использовать http-server или serve или другой пакет, используя только другие порты. Спасибо за ответ, попробовал, работает. - person Adrian Pop; 14.06.2019