Рейтинг:0

Сервер Nginx React будет искать статические ресурсы только в корне.

флаг cn

Мое приложение для реагирования работает, если обратный прокси-сервер nginx установлен следующим образом:

сервер {
    слушать 80;
    server_name my_public_vps_addr; 

    место расположения / {
        прокси_пароль http://127.0.0.1:3000/;
    }
}

Я могу правильно загрузить страницу по адресу http://my_public_vps_addr/.

Но я хочу получить доступ к сайту через http://my_public_vps_addr/ecapp/.

Итак, я настроил nginx:

сервер {
    слушать 80;
    server_name my_public_vps_addr; 

    местоположение /ecapp/ {
        прокси_пароль http://127.0.0.1:3000/;
    }
}

Теперь, если я загружу страницу по адресу http://my_public_vps_addr/ecapp/ и проверю консоль, я получу:

ПОЛУЧИТЬ http://my_public_vps_addr/static/js/bundle.js
[HTTP/1.1 404 не найдено 147 мс]
ПОЛУЧИТЬ http://my_public_vps_addr/static/js/0.chunk.js
[HTTP/1.1 404 не найдено 433 мс]
ПОЛУЧИТЬ http://my_public_vps_addr/static/js/main.chunk.js
[HTTP/1.1 404 не найдено 424 мс]

Я определил возможную причину. Активы должны быть получены из http://my_public_vps_addr/ecapp/static/js/bundle.js и т. д. вместо http://my_public_vps_addr/static/js/bundle.js.

Чтобы исправить эту ошибку, я приведу соответствующий исходный код:

сервер.js

константный экспресс = требуется ('экспресс');
константное сжатие = требуется('сжатие');
постоянный путь = требуется ('путь');
константное приложение = экспресс();

app.use(сжатие());
app.use(express.static(path.join(__dirname, 'build')));

app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const PORT = process.env.PORT || 3000;

app.listen(ПОРТ, () => {
    console.log(`Приложение работает на порту ${PORT}`);
});

я пытался app.use('/ecapp/static', express.static(path.join(__dirname, 'build'))); но не повезло.

Routes.js

константные маршруты = () => {
    возвращаться (
        <Браузермаршрутизатор>
            <Переключатель>
                <Route path="/" точный компонент={Home} />
                ...
            </переключатель>
        </Браузермаршрутизатор>
    );
};

я пытался <BrowserRouter basename='/ecapp'></BrowserRouter> но не повезло.

Я думаю, что приложение будет правильно загружаться по адресу http://my_public_vps_addr/ecapp/, если я смогу настроить страницу для поиска ресурсов по адресу http://my_public_vps_addr/ecapp/static/*. Мне нужна помощь в этом.

Ivan Shatsky avatar
флаг gr
Это больше вопрос SO, чем SF. Я не эксперт по React, но могу предложить проверить [Как развернуть приложение React в подкаталоге](https://medium.com/@svinkle/how-to-deploy-a-react-app-to- a-subdirectory-f694d46427c1), она помогает некоторым людям с похожими вопросами о SO делать то, о чем вы просите.
rafawhs avatar
флаг cn
Если ваш nginx имеет сложную конфигурацию для правил расположения/кеша, включите журнал отладки docs.nginx.com/nginx/admin-guide/monitoring/logging и посмотрите, какое правило применяется.У меня была такая же проблема, и это был конфликт между настройками истечения срока действия js и html.
Рейтинг:1
флаг cn

Я понял это, поэтому я публикую свое решение здесь.

ЗАДАЧА

Разместить сайт create-react-app по адресу http://my_public_vps_addr:port/sub_path.

ПРОЦЕДУРА

  1. в файле .env: а) установить NODE_ENV=производство б) установите для PUBLIC_URL значение http://my_public_vps_addr:port/sub_path
  2. установить базовое имя: <Router basename=’/sub_path’></Router>
  3. npm запустить сборку а) это создает статические файлы внутри каталога build/.
  4. Скопируйте содержимое build/* в /var/www/sub_path/html/sub_path/
  5. cd в /var/www/sub_path/html/ а) судо найти . -type d -exec chmod 755 {} \; б) судо найти . -type f -exec chmod 644 {} \;
  6. коснитесь /etc/nginx/sites-available/sub_path а) ln -s /etc/nginx/sites-available/sub_path /etc/nginx/sites-enabled/sub_path
  7. Содержимое /etc/nginx/sites-available/sub_path
    сервер {
      слушать порт;
      слушать [::]: порт;
      корень /var/www/sub_path/html;
      индекс index.html index.htm index.nginx-debian.html;
      server_name my_public_vps_addr:port;
      расположение /sub_path {
        try_files $uri $uri//index.html =404
      }
    }
  1. Перезапустите службу nginx: а) sudo systemctl перезапустить nginx.service
  2. Ваш сайт должен быть доступен по адресу http://my_public_vps_addr:port/sub_path.
  3. Вот оно!
Ivan Shatsky avatar
флаг gr
Хотя в целом это правильный подход, особенно по сравнению с использованием `sub_filter`, ваша директива `try_files` неверна. Правильным будет `try_files $uri $uri//sub_path/index.html` (или, может быть, даже `try_files $uri/sub_path/index.html`).
Рейтинг:0
флаг cn

Я изменил на:

местоположение /ecapp/ {
        sub_filter '<script src="/static' '<script src="/ecapp/static';
        sub_filter_once выключен;
        proxy_set_header Accept-Encoding "";
        прокси_пароль http://127.0.0.1:3000;
}

И сейчас вид-источник: http://my_public_vps_ip_addr/ecapp/ является:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="/manifest.json" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="/ecapp/static/js/bundle.js"></script><script src="/ecapp/static/js/0.chunk.js"></script><script src="/ecapp/static/js/main.chunk.js"></script></body>
</html>

Но теперь загрузка http://my_public_vps_ip_addr/ecapp/ дает:

Сценарий из «http://my_public_vps_addr/ecapp/static/js/bundle.js» был загружен, несмотря на то, что его тип MIME («текст/html») не является допустимым типом MIME JavaScript.
...
Uncaught SyntaxError: ожидаемое выражение, получено '<'

http://my_public_vps_addr/ecapp/static/js/bundle.js и т.д. не возвращает содержимого.

флаг us
Это подход, который только дает головную боль в будущем. Вам необходимо правильно настроить приложение React, как указано в комментариях выше.

Ответить или комментировать

Большинство людей не понимают, что склонность к познанию нового открывает путь к обучению и улучшает межличностные связи. В исследованиях Элисон, например, хотя люди могли точно вспомнить, сколько вопросов было задано в их разговорах, они не чувствовали интуитивно связи между вопросами и симпатиями. В четырех исследованиях, в которых участники сами участвовали в разговорах или читали стенограммы чужих разговоров, люди, как правило, не осознавали, что задаваемый вопрос повлияет — или повлиял — на уровень дружбы между собеседниками.