Implantando seu Aplicativo Angular no Azure com FileZilla

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!

Conteúdo Relacionado

Voltar para o blog

Deixe um comentário

Os comentários precisam ser aprovados antes da publicação.