Данная статья будет полезна начинающим разработчикам, которые создают свои первые приложения на React’e и хотят проверить их работу в интернете опубликовав с помощью веб-сервера IIS (Internet Information Services)
Начнем с того, что у вас уже есть созданное приложение с минимальным набором компонентов. То есть локально вы уже видите ваше приложение у себя в браузере. Вся публикация сводится к выполнению нескольких пунктов:
- Наличие внешнего статического IP
- Установки самого IIS на ваш компьютер
- Создание сайта на IIS
- Создание билда вашего приложения
- Проброс портов на роутере
- ДОП (если вы используете свой API для получения данных из базы, к примеру, MongoDB необходимо опубликовать и его)
Наличие внешнего ip необходимо для перенаправления запросов из вне через роутер на веб-сервер iis.
Установка веб-сервера iis разбирается во многих статьях, поэтому подробности я упущу. Просто напомню, что необходимо зайти в «Программы и компоненты» —> «Включение или отключение компонентов Windows»
Далее публикую настройки, которые уже имеются у меня, у компонента IIS
Открываем Диспетчер служб IIS и создаем сайт
Ставим на папку с сайтом нужные права, для тестового сайта можете просто дать полные права группе IIS_IUSRS. Делаем привязки к порту, у меня это будет порт 8081 и протокол HTTPS. Вы можете оставить HTTP или создать самоподписанный сертификат в интерфейсе Диспетчера служб IIS.
Для получения доступа к сайту из вне, делаем проброс портов на вашем роутере. У меня проброс сделан с 8080 на 8081 порт, на котором висит сайт с приложением.
Переходим к сборке приложения. Тут все довольно просто, так как при открытии вашего приложения через, к примеру, VSCode будет доступен скрипт для сборки.
Запускаем скрипт и через некоторое время в папке проекта, если настройки не меняли, будет создан сайт.
файлы в самой папке будут примерно такие:
Далее все эти файлы из папки Build необходимо копировать в папку, к которой привязан сайт на IIS. Если забыли какой путь указывали, его можно посмотреть в «Дополнительные параметры…» —> «Физический путь»
Если все верно настроили и пробросили порты, можно заходить по адресу: https://ваш_белый_ip:8080 или http://ваш_белый_ip:8080 вы должны увидеть свое приложение. Порт указываете тот, который использовали при настройке.
ДОПОЛНИТЕЛЬНО
Если вы используете свое API вам необходимо его публиковать. Для этого необходимо поставить расширение iis url rewrite. Оно необходимо, чтобы публиковать приложение и API по протоколу HTTPS. Так как локально, ваш API будет на localhost и запросы через защищенное соединение не будут корректно доходить до него. iis url rewrite будет перенаправлять запросы убирая с них «обертку»
Важно отметить следующее. Для публикации API необходимо создать еще 1 сайт на IIS и в папке сайта разместить всего 1 файл : web.config в которому будет код такого вида:
Однако размещенный код вручную, прямо в файл конфига будет работать неправильно. Потому что в конфиге не указывается один параметр, который указывается при настройке через интерфейс.
Чтобы создать правило необходимо зайти в расширение в настройках сайта для API и добавить новое правило:
И так вы увидите дополнительную галку «Включить разгрузку SSL» без которой запросы к API не работают.
После создания правила, необходимо сделать еще 1 проброс портов. Уже на API. В данном случае надо использовать такие порты, которые у вас прописаны в запросах из приложения, по средствам которых вы получаете данные из базы.
