Como configurar um retro em 2023 (IIS) (Nitro HTML5) - [ Parte 3 ]

Esta é a parte 3, que é a última parte da série: Como configurar uma série retro (IIS):
O que abordaremos na parte 3:

Spoiler: Vamos configurar

Na parte 3, que é a última e última parte da série, iremos configurar:
Nitro v2 (mais recente em julho de 2023)
Como configurar o Nitro v2:

Spoiler: Configure o Nitro v2

Finalmente! Estamos na parte em que não apenas compilaremos o cliente Nitro v2, mas também configuraremos tudo para que possamos realmente nos divertir e jogar em seu hotel recém-instalado. Emocionante, certo? Vamos indo!

Etapa um:
a primeira etapa em nossa jornada de configuração do Nitro v2 é cloná-lo-

Spoiler: Configure o cliente nitro

Aqui vamos nos concentrar na clonagem, compilação e configuração do cliente nitro.

Clone Nitro v2:

Para clonar o cliente nitro, basta abrir o prompt de comando e escrever o seguinte:

Código:
cd C:\inetpub\wwwroot\atomcms\public\client\nitro && git clone https://github.com/billsonnn/nitro-react.git && cd nitro-react

Se você não tem certeza de como clonar o repositório Nitro v2, veja como fazer: https://gyazo.com/b1c422336451ed22e2054e654ba4384d - Não se importe que a estrutura da pasta seja um pouco diferente da sua, esse gif demorou um pouco voltar.

Agora dentro da pasta " C:/inetpub\wwwroot/atomcms/public/client/nitro ", copie os arquivos " renderer-config.json " e os arquivos " ui-config.json " e cole-os em " C:/inetpub /wwwroot/atomcms/public/client/nitro/nitro-react/public "pasta.

Depois que os dois arquivos de configuração forem copiados, abra o " renderer-config.json " e o " ui-config.json " no seu editor preferido e vincule tudo corretamente - Não se preocupe se você estiver acompanhando a série desde o primeiro passo , você pode simplesmente substituir as entradas "SEU-DOMÍNIO" pelo seu próprio domínio e salvar os dois arquivos.
Compile o cliente nitro:

Spoiler: Compilar Nitro v2

Perfeito! Já avançamos muito e agora é hora de construir o Nitro v2 em ativos compilados - esta é uma etapa muito fácil e não exige muito de nós, então vamos lá!

No prompt de comando, verifique se você ainda está na pasta " C:\inetpub\wwwroot\atomcms\public\client\nitro\nitro-react ", caso não esteja, basta usar o comando abaixo:

Código:
cd C:\inetpub\wwwroot\atomcms\public\client\nitro\nitro-react

Depois de verificar que está na pasta nitro-react, basta usar o seguinte comando para compilar o Nitro v2

Código:
yarn install && yarn build:prod
A compilação dos ativos pode demorar um pouco, então seja paciente.

Aqui está um GIF mostrando um pouco do processo de compilação: https://gyazo.com/d4406535d1bf6aa6bbe168b8db88efde

Assim que a compilação do Nitro v2 for concluída, seu terminal deverá ser parecido com a imagem abaixo.

Spoiler: compilado com sucesso

Depois que o cliente nitro for compilado, ele deverá se parecer com a imagem abaixo:

Agora devemos corrigir o caminho para nossos ativos nitro e para isso basta abrir o index.html dentro da pasta nitro-react/dist no seu editor preferido. Depois de aberto você deve adicionar um ponto "." na frente de todos os ativos - Consulte a tela abaixo, em caso de incerteza.

Configure o plug-in WebSocket:

Spoiler: Configure o plugin Nitro WebSocket

Agora teremos que editar algumas coisas em nosso banco de dados para que o emulador lide com nossas solicitações corretamente ao conectar-se ao cliente Nitro v2.

Portanto, abra o DBeaver, encontre a tabela “emulator_settings” e encontre a entrada “websockets.whitelist”. Depois de encontrar a entrada “websockets.whitelist”, altere seu valor de “localhost” para:

Código:
*.YOUR-DOMAIN-WITHOUT-HTTPS://

Também teremos que mudar mais uma coisa, que é o "ws.nitro.ip.header". Depois de encontrá-lo, altere seu valor para:

Código:
CF-Connecting-IP

Agora você pode clicar em "salvar" e os dados serão carregados na próxima inicialização do emulador.

Se feito corretamente, deverá ficar como na imagem abaixo:

Spoiler: como deveria ser

Configure as regras de DNS e página da Cloudflare
Para que o nitro aceite nossas conexões por meio dos WebSockets, precisaremos fazer duas coisas em nosso painel da Cloudflare.

Spoiler: Configure as regras de DNS e página da Cloudflare

A primeira coisa será adicionar um registro DNS e a segunda é fazer uma regra de página, desabilitando SSL para nosso nitro WebSocket.

Adicione a regra DNS:

Para adicionar a regra DNS necessária, navegue até o painel da Cloudflare e clique no domínio que você está usando para o seu hotel. Depois de clicar em seu domínio, navegue até a página DNS clicando em “DNS” na barra lateral do Cloudflare.

Em seguida clique no botão azul que diz "Adicionar registro" - Uma nova linha deve ser adicionada logo abaixo e dentro do campo "Nome" escreva "nitro" para o campo "IPv4", escreva o IP do seu servidor e clique em "Salvar".

Se feito corretamente, deverá ficar como na imagem abaixo:

Spoiler: DNS da Cloudflare

Crie uma regra de página Cloudflare:

Em breve estaremos no final de nossa jornada, antes de podermos nos conectar ao nosso hotel recém-configurado, será necessário criar uma regra de página, desabilitando SSL para nosso subdomínio nitro e, felizmente para nós, Cloudflare torna isso extremamente fácil. Tudo o que precisamos fazer é encontrar “Regras” na navegação lateral do nosso painel Cloudflare e clicar nela. Depois de clicar no link de navegação "Regras", você deverá ver uma página, com um botão azul dizendo "Criar regra de página". Clique em “Criar regra de página”, que o levará para a seguinte página (veja a imagem abaixo):

Spoiler: Criar regra de página

Se for o caso, basta preencher os campos, para que fiquem como na imagem abaixo:

Spoiler: Como preencher os campos de regras da página

Depois de preencher os campos, como na imagem acima, clique em “Salvar e implantar”

Spoiler: regra da página Cloudflare

Estamos quase terminando - Permitir a porta 2096:
Nossa penúltima etapa desta incrível jornada é habilitar a porta 2096 para aceitar conexões TCP.

Para habilitar a porta 2096, basta procurar por “Firewall do Windows Defender com Segurança Avançada” no menu de pesquisa do Windows e clicar nela, depois de abrir o aplicativo “Firewall do Windows Defender com Segurança Avançada”, clicar em “Regras de Entrada” à esquerda e depois "Nova Regra..." à direita, um novo pop-up deve aparecer agora.

Depois de ver o pop-up, selecione “Porta” e clique em “Avançar” na próxima página, deixe tudo como está e digite “2096” no campo de texto ao lado de “Porta local específica” e clique em “Avançar” até você Você pode dar um nome à regra e inserir qualquer nome de sua escolha - o meu será "nitro" e clique em "Concluir".

Aqui está um GIF de como criar a regra de firewall: https://gyazo.com/f3c727037eaa5f9fe5dd85f3cadb57f3
Vincule o Atom CMS ao seu cliente nitro (última etapa):
Estamos quase terminando! a última etapa de nossa jornada é vincular o Atom CMS ao cliente nitro.

Spoiler: Vincule o cliente Nitro v2

Tudo o que precisamos fazer para conseguir isso é navegar de volta ao seu banco de dados e abrir a tabela "website_settings", rolar para baixo até encontrar a entrada "nitro_path". Uma vez encontrado, verifique se ele está configurado para corresponder à sua estrutura de pastas - Se você seguiu a estrutura fornecida nesses guias, funcionará imediatamente, nenhuma alteração adicional será necessária.

Depois que o caminho do cliente nitro for definido, vá para a seguinte pasta:

Código:
C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-react/dist

Uma vez dentro da pasta "C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-react/dist" abra o "index.html" no seu editor preferido e encontre:

Código:
"config.urls": ["renderer-config.json", "ui-config.json"],

e substitua a linha pelo seguinte código:


Código:
"config.urls": ["./renderer-config.json", "./ui-config.json"],

Se sua fonte parecer estranha no jogo, copie a pasta src dentro de "C:/inetpub/wwwroot/atomcms/public/client/nitro/nitro-react/dist" e cole-a em "C:/inetpub/wwroot/atomcms/ pasta pública".
Você finalmente conseguiu:

Spoiler: Você conseguiu!

Se você acompanhou e fez tudo corretamente, agora você deve conseguir entrar no cliente e se divertir muito!