IIS - Como implantar o seu aplicativo React.js
Tags: javascript, react, beginners, server
Published: 2022-02-19 03:08:00

![IIS React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zo3gn9qa7n8yrs4ed36o.png)
 

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:

![React Web](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9nyc3w0i028w4f46rwt.png)

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:

![Windows R](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nra6yqvo5khkz374qemp.png)
 
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:

![Janela](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl81i1sbuj0gqjmmud0v.png)

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.

![Pool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/diwl2892y7ux7ty6l2vm.png)

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.

![React App Web](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fnxbmm2rmpirm1uwmcc.png)

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)

![Página Blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gs5y9gni3mfzuxbla4o.png)

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:

![Erro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9wttashpee54rk9d665.png)
 
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