Hoje iremos implantar o aplicativo React em um servidor IIS, então vamos começar a codificar, para entender melhor como funciona e o que significa.

O que é o IIS?

IIS significa “Internet Information Services”, que é um servidor web fornecido pela Microsoft para hospedar os sites e outras coisas na web.

Como habilitar o IIS?

Se você já ativou o IIS, pode pular esta etapa. Mas se você ainda não o ativou, siga as etapas abaixo:
1 - Abra o Painel de Controle e clique em “Programas e Recursos”.
2 - Clique em “Ativar ou desativar recursos do Windows”.
3 - Selecione Serviços de Informações da Internet e clique no botão OK.
4 - Para ver se o IIS está ou não habilitado, pressione a tecla Windows + R e digite inetmgr e clique em OK.
5 - O Gerenciador do IIS está aberto.

Crie um aplicativo React simples

Abra um prompt de comando ou seu terminal favorito e digite o comando abaixo para criar um aplicativo de reação.

npx create-react-app iis-devto

Depois de criar o aplicativo com sucesso, vá para o novo aplicativo.

cd iis-devto

Para ver como fica, digite o comando abaixo:

npm start

e ele iniciará o servidor de desenvolvimento como padrão ele é apresentado no http://localhost:3000/. Você pode ver a página de destino padrão:

Para hospedar o aplicativo em qualquer servidor web, primeiro precisamos criar uma compilação de produção. Para criar uma compilação de produção do nosso aplicativo react usando o comando abaixo:

npm run build

A saída do comando acima cria uma nova pasta de compilação dentro do projeto que contém a compilação de produção. Até agora, criamos um aplicativo React e criamos uma compilação de produção desse aplicativo. Agora o próximo passo é implantá-lo no IIS,
pressione a tecla Windows + R e escreva inetmgr para abrir o Gerenciador do IIS, como você pode ver a tela abaixo:

Primeiro, vamos criar um novo Pool de Aplicativos, então clique com o botão direito do mouse em Pools de Aplicativos e clique em Adicionar Pool de Aplicativos. Em seguida, dê o nome que desejar e clique no botão OK.

Depois disso, clique com o botão direito do mouse no novo pool de aplicativos e selecione Configurações avançadas. Você verá a janela abaixo:

Em seguida, clique em Identidade e escolha uma conta personalizada e clique no botão definir e adicione suas credenciais do Windows e clique em OK.

Depois disso, clique com o botão direito do mouse em Sites e clique em Adicionar site. Adicione o nome do site e selecione o pool de aplicativos que criamos anteriormente. Depois disso, na seção de caminho físico, você deve fornecer o caminho da pasta de compilação e também fornecer o número da porta onde deseja hospedar.

Agora clique com o botão direito do mouse no novo site, ou seja, ReactApp > Gerenciar site > Navegar. Seu aplicativo de reação agora foi implantado com sucesso.

Agora, o próximo passo é adicionar roteamento em nosso aplicativo react. Então crie 2 componentes e também adicione o pacote react-router-dom para roteamento ( ⚠ Aqui não vamos entrar em detalhes sobre o roteamento)

Crie uma compilação de produção novamente e tente navegar no aplicativo que hospedamos no IIS. Você verá o aplicativo funcionando bem, mas agora tente atualizar a página e veja o que acontece, você receberá algo semelhante ao erro abaixo:

Portanto, para corrigir esse problema, você deve instalar o módulo URL Rewrite. Após a instalação bem-sucedida, você deve criar um web.config arquivo na public pasta do aplicativo e copiar e colar o conteúdo abaixo.

<?xml version="1.0"?> 
<configuration> 
<system.webServer> 
<rewrite> 
<rules> 
<rule name="React Routes" stopProcessing="true"> 
<match url=".*" /> 
<conditions logicGrouping="MatchAll"> 
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> 
</conditions> 
<action type="Rewrite" url="/" /> 
</rule> 
</rules> 
</rewrite> 
</system.webServer> 
</configuration>

Novamente, construa o aplicativo no modo de produção e navegue. Portanto, agora, se você atualizar o aplicativo, não receberá um erro e poderá ver a página correta. É isso, então você criou e implantou com sucesso o aplicativo React no servidor IIS.

Fontes onde pesquisei esse conteúdo:

• https://www.iis.net/downloads/microsoft/url-rewrite