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:
Top comments (0)