Как развернуть React на IIS? - PullRequest
Новая
       15

Как развернуть React на IIS?

0 голосов
/ 01 марта 2019

При работе на локальном хосте предполагается, что приложение находится в корневом каталоге локального сервера dev

localhost: 50001 / index.html

Но при развертывании вна удаленном сервере IIS, там работают другие веб-приложения, и каждое отдельное приложение должно быть создано как «Приложение» (терминология IIS)

Так, например, «Веб-сайт по умолчанию» находится на порту 80;другие приложения (также на порту 80) имеют свое собственное имя приложения.

MYSERVERNAME / App1 /
MYSERVERNAME / App2 /
MYSERVERNAME / MyReactApp /

Итактеперь, чтобы добраться до моего приложения React, у меня есть дополнительный путь http://MYSERVERNAME/MyReactApp/index.html

index.html, созданный 'npm run build', содержит абсолютные пути;Чтобы мое развертывание работало, я вручную отредактировал index.html, чтобы он содержал относительные пути

Так, например, вместо: 

<script type="text/javascript" src="/static/js/main.d17bed58.js"></script>

я добавил. (Точку) перед всемипути для получения: 

<script type="text/javascript" src="./static/js/main.d17bed58.js"></script>

Это работает в основном, и все скрипты загружаются изначально.НО я не доволен результатом, потому что любые ссылки и маршруты на стороне клиента (то есть от реакции-маршрутизатора), которые я нажимаю в приложении, вернутся, предполагая, что приложение размещено в корне веб-сервера.т.е.

http://MYSERVERNAME/

http://MYSERVERNAME/Home

http://MYSERVERNAME/MyWorkOrder/

http://MYSERVERNAME/MyWorkOrder/123456

Более того, если я наберу любую из ссылок прямо в браузере (или обновлю страницу), она, очевидно, потерпит неудачу.

Напомним.вопрос в том, что мне нужно всегда поддерживать «истинный» путь http://MYSERVERNAME/myReactApp при развертывании в IIS.Как это сделать?

Ответы [ 2 ]

0 голосов
/ 08 августа 2019

Что я в итоге сделал

1) После запуска npm build измените абсолютные пути на относительные пути в index.html (пример href = "./ etc ..." и src = "./ etc... ")

2) использовать базовое имя в(согласно ответу @mehamasum)

3) И, наконец, при обновлении страницы на несуществующем маршруте SERVER вам необходимо перенаправить то, что в противном случае было бы 404, в index.html, ипусть клиентская библиотека реагирует на работу маршрутизатора.Как?В диспетчере IIS перейдите в раздел IIS \ Страницы ошибок \ двойной щелчок \ Изменить код состояния 404 и в диалоговом окне «Редактировать пользовательскую страницу ошибки» выберите «Выполнить URL-адрес на этом сайте» и введите абсолютный путь / MyReactApp./index.html

0 голосов
/ 01 марта 2019

Из документов :

Построение для относительных путей

По умолчанию приложение Create React создает сборку, если ваше приложение размещено накорень сервера.Чтобы переопределить это, укажите homepage в вашем package.json, например: 

"homepage": "http://mywebsite.com/relativepath",

Это позволит Create React App правильно определить корневой путь для использования в сгенерированном файле HTML.

Например: 

<script type="text/javascript" src="/static/js/main.xyz.js"></script>

станет: 

<script type="text/javascript" src="/relativepath/static/js/main.xyz.js"></script>

Если вы используете react-router@^4, вы можете получить root права на <Link> s, используя basename propна любой <Router>.Больше информации здесь .

Например: 

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">
...