Implantando seu Aplicativo Angular no Azure com FileZilla

No cenário digital de hoje, implantar aplicativos da web na nuvem é uma prática comum. O Azure fornece várias opções de implantação, incluindo GitHub, Azure DevOps , Bitbucket , FTP ou um repositório Git local. Neste guia passo a passo, vamos nos concentrar no cliente FTP FileZilla como um meio de publicar seu aplicativo Angular UI no Azure. Siga estas etapas para tornar seu aplicativo Angular acessível ao mundo.

Pré-requisitos

Antes de começarmos, certifique-se de ter os seguintes pré-requisitos:

• Uma conta do Azure ativa
• Um aplicativo Angular criado e configurado localmente
• O cliente FTP FileZilla instalado em seu computador

Criando um Serviço de Aplicativo do Azure

1. Faça login no portal do Azure em https://portal.azure.com.
2. Clique em "Criar um recurso" e procure por "Serviço de Aplicativo". Selecione-o e clique em "Criar".
3. Preencha os detalhes do seu novo Serviço de Aplicativo:
   • Assinatura: Selecione a assinatura do Azure que você deseja usar.
   • Grupo de recursos: Crie um novo grupo de recursos ou selecione um existente.
   • Nome: Escolha um nome exclusivo para o seu Serviço de Aplicativo.
   • Publicar: Selecione "Código".
   • Runtime: Selecione o runtime adequado para seu aplicativo Angular (por exemplo, "Node 16.x").
   • Sistema operacional: Selecione o sistema operacional desejado (Windows ou Linux).
   • Região: Escolha a região mais próxima de seus usuários.
4. Clique em "Revisar + criar" e, em seguida, "Criar" para provisionar o seu novo Serviço de Aplicativo.

Configurando o Aplicativo Angular para Implantação

1. Abra seu projeto Angular em seu editor de código preferido.
2. Abra o arquivo angular.json e localize a seção "outputPath". Altere o valor para "dist/seu-aplicativo-angular", substituindo "seu-aplicativo-angular" pelo nome do seu aplicativo.
3. Execute o comando ng build --prod para gerar os arquivos de produção do seu aplicativo Angular.
4. Navegue até o diretório dist/seu-aplicativo-angular em seu terminal.

Implantando o Aplicativo Angular usando FileZilla

1. Abra o FileZilla e clique em "Arquivo" > "Gerenciar sites".
2. Clique em "Novo site" e preencha os seguintes detalhes:
   • Nome do site: Escolha um nome descritivo para seu site.
   • Tipo de host: Selecione "FTP - File Transfer Protocol".
   • Host: Copie o nome de host do seu Serviço de Aplicativo no Azure.
   • Usuário: Copie o nome de usuário do seu Serviço de Aplicativo no Azure.
   • Senha: Copie a senha do seu Serviço de Aplicativo no Azure.
3. Clique em "Conectar" para se conectar ao seu Serviço de Aplicativo no Azure.
4. No painel esquerdo do FileZilla, navegue até o diretório dist/seu-aplicativo-angular que você criou anteriormente.
5. No painel direito, navegue até o diretório raiz do seu Serviço de Aplicativo no Azure.
6. Arraste e solte os arquivos do seu aplicativo Angular do painel esquerdo para o painel direito para fazer o upload.
7. Aguarde até que o upload seja concluído.

Verificando a Implantação

1. Volte ao portal do Azure e navegue até o seu Serviço de Aplicativo.
2. Clique em "Visão geral" e copie a URL do seu aplicativo.
3. Abra um navegador da web e cole a URL. Você deve ver seu aplicativo Angular implantado e acessível ao público.

Parabéns! Você implantou com sucesso seu aplicativo Angular no Azure usando o cliente FTP FileZilla. Essa abordagem é útil quando você não deseja usar ferramentas de implantação mais avançadas, como o Azure DevOps ou o GitHub Actions. Lembre-se de atualizar regularmente seu aplicativo seguindo as mesmas etapas sempre que fizer alterações.

Considerações Finais

Implantar aplicativos na nuvem pode parecer intimidador, mas com as ferramentas certas, como o FileZilla, o processo pode ser bastante simples. Ao seguir este guia passo a passo, você agora tem as habilidades necessárias para implantar seu aplicativo Angular no Azure de maneira eficiente e confiável.

Boa sorte com sua implantação!