Executando Angular App no Amazon CloudFront com S3 e utilizando Azure DevOps

Serviços em cloud/nuvem é um assunto que já é comum no mundo da tecnologia. Grandes empresas, hoje, como Microsoft Azure, AWS (Amazon Web Services) e GCP (Google Cloud Platform), já fornecem serviços em cloud de alta qualidade como SaaS (Software as a Service),IaaS (Infrastructure as a Service) ou até mesmo CaaS (Container as a Service), por exemplo. Seja para hospedar uma aplicação web, uma API (Application Programming Interface), um banco de dados ou Serveless, que seria a programação sem serviço. Neste contexto, irei falar um pouco sobre um serviço específico da AWS, que é o CloudFront, e como ele pode nos ajudar a disponibilizar uma aplicação, especificamente em Angular, porém poderia ser em qualquer outra linguagem. Além disso, vamos utilizar o Azure DevOps para criar uma pipeline de CI (Continuous Integration) e CD (Continuous Delivery).

É um serviço de rede de entrega de conteúdo (CDN) que entrega dados, vídeos, aplicativos e APIs a clientes em qualquer parte do mundo. É integrado com a AWS e funciona, em conjunto, com outros serviços como Amazon EC2, Elastic Load Balancing ou Amazon S3, como origens para os aplicativos.

Amazon S3 (Simple Storage Service) é um serviço de armazenamento de objetos, onde pode-se armazenar qualquer volume de dados os quais podem ser utilizados para sites, aplicações para dispositivos móveis, backup e restauração, arquivamento, etc. Conforme falado no tópico anterior e neste, o Amazon S3 é um serviço que fornece uma origem para aplicativos e, especificamente neste caso, iremos utilizar, junto com o Amazon CloudFront, para disponibilizar uma aplicação front-end.

A Microsoft, concorrente direta da AWS, fornece uma gama variada de serviços e ferramentas e uma delas que será utilizada é o Azure DevOps, o qual também provê vários tipos de serviços com Boards, Pipelines, Repositórios, Planejamento de Testes ou Pacotes Compartilhados. Será utilizado, neste caso, apenas o serviço de Pipeline e Repositório. Onde será criado os pipelines de CI/CD em conjunto com o código hospedado, em Git, no repositório da ferramenta.

Conforme o próprio site diz, é uma estrutura de design de aplicativo e plataforma de desenvolvimento para criar aplicativos SPA (Single Page Application). É um framework, diferente de outros SPAs que são apenas bibliotecas, que permite criar aplicações responsivas e performáticas.

Desenvolvimento Cloud🖥️

Antes de tudo, é preciso ter uma conta na AWS. Feito isso, precisa-se ser configurado uma instância do Amazon S3.

Localize o serviço no console, conforme imagem abaixo:

Ao acessar, cria-se um novo bucket:

Ao clicar na opção de criar novo bucket, será solicitado algumas informações para criação do mesmo, conforme mostrado abaixo:

É preciso definir um nome, a região e se deseja copiar as configurações de algum outro bucket já existente. Neste caso, não será importado nenhuma configuração e a região será a padrão (Leste dos EUA (Ohio)).

Na próxima etapa é possível configurar algumas opções como controle de versão e tags. Neste caso, também, não será adicionado nenhuma configuração e será deixado as opções padrões.

Na 3ª (terceira) etapa será definido as permissões. Nesta demonstração foi deixado como público, porém o recomendado é deixá-lo privado.

Por fim, será exibido todo o resumo das configurações que foram feitas, caso esteja tudo correto, basta clicar na opção “Criar bucket”.

Obs.: É importante nas propriedades de seu bucket não esteja configurado nenhum tipo de criptografia, pois impede que o CloudFront use-o de maneira correta.

Agora é preciso criar uma distribuição do CloudFront, a qual será apontada para o Amazon S3 que foi criado anteriormente. No console, busque pelo serviço, conforme mostrado na imagem abaixo:

Ao abrir o serviço, seleciona-se o botão para criar nova distribuição:

Será apresentado duas opções. Uma é destinada para distribuições web e a outra é destinada para RMTP (Real-Time Messaging Protocol). É escolhida a primeira opção:

Neste momento é necessário informar e configurar algumas coisas.

Nesta primeira etapa, informa-se apenas o nome de origem do domínio.

Será apresentado uma lista de todos os possíveis domínio existentes em sua conta, selecione o domínio referente ao Bucket criado no Amazon S3. Ain informá-lo o ID da origem será preenchido automaticamente.

Na sessão de comportamento do cache mantém-se as configurações padrões.

Nas configurações da distribuição, também mantém-se algumas das configurações padrões. Contudo, vale ressaltar que é possível selecionar qual região sua distribuição irá atuar, onde irá ter uma diferença nos valores. É possível, também, adicionar um domínio customizado e, por fim, adicionar um certificado SSL customizado com o seu domínio. A única modificação que será feita é definir o Objeto Raiz Padrão, onde, no nosso caso, será o “index.html”.

Terminando de realizar as configurações básicas, a distribuição será criada.

Para finalizar esta etapa, é preciso acessar as configurações da nossa distribuição, já criada, e configurar as páginas de erro.

Isso se dá pois, como será utilizado um SPA, o Amazon S3 não entende uma rota (exceto o index) recarregada no navegador. Com isso, é preciso informá-lo que para determinada rota é utilizado o “index.html”. E sempre que essa rota é aberta, ocorre o erro 403, e quando isso ocorre é necessário redirecionar para o “index.html”.

DevOps 🚀

Nesta etapa é preciso se cadastrar no Azure DevOps. Ao finalizar o cadastro essa ferramenta fornece vários tipos de serviços, conforme mostrado na imagem abaixo:

É uma ferramenta de gestão muito completa e seria interessante aprofundar em outros serviços que o mesmo oferece. Contudo, será utilizado, apenas, o “Repos” e “Pipelines”.

É o local que fica armazenado o código, no caso em Angular. Para criar um novo repositório, basta clicar neste serviço e selecionar a opção de criar um novo repositório. Além disso, é possível ver o histórico de commits, push, branches e realizar Pull Requests de maneira fácil.

Antes de continuar, é necessário adicionar duas extensões para a organização do Azure DevOps. Para isso é necessário ir no Visual Studio Marketplace e buscar/instalar as extensões Angular CLI, para que seja possível executar comandos do Angular, e o AWS Toolkit for Azure DevOps que permitirá o acesso aos serviços da AWS para poder realizar alguma ação.

O padrão o Azure DevOps não consegue se conectar de forma natural como ele se conecta no Microsoft Azure, por motivos lógicos pois ambos são da mesma empresa. Para conectar serviços externos é necessário adicionar uma nova conexão. Para isso, deve ser acessado as configurações do projeto:

Ir até a opção de Pipelines — Service connections:

E adicionar uma nova conexão referente a AWS:

Ao selecionar a opção, será solicitado o Access Key ID e o Secret Access Key. Para obter essas informações, é necessário acessar, novamente, o console da AWS e selecionar a opção “Minhas Credenciais de Segurança”:

E crie uma nova chave de acesso:

Onde será fornecido um ID e uma Chave. Guarde essas informações, pois em caso de perde e necessidade de utilizá-la novamente, você terá que criar uma nova. Com essa informações em mãos, forneça-as ao Azure DevOps nos campos em destaque e clique em salvar:

Com isso, pode-se continuar para as próximas etapas.

Após configurar o repositório, é necessário configurar uma pipeline de build. Nesta etapa pode-se colocar etapas como a execução de testes unitário. Além disso, irá ser gerado os arquivos de publicação do sistema (normalmente os arquivos localizados na pasta dist, quando executado local). Para isso, selecione a opção Pipelines e cria-se uma nova.

Irá solicitar a localização do código do projeto. Nas opções em destaque é sugerido a criação de um pipeline em YAML, porém é utilizado o modo clássico, conforme destacado na imagem.

Ao selecionar o modo clássico, será solicitado a localização do repositório, novamente, onde neste caso é no Azure Repository Git. E, também, o time de projeto, nome do repositório e qual sobre qual branch o pipeline irá ser executado:

Após estas configurações básicas, precisará informar um template para criação do pipeline. Neste momento escolhe-se um template vazio:

Por fim, configura-se a pipeline criada de acordo com a necessidade de seu projeto. Como se trata de um projeto em Angular e, neste caso, utilizou-se o NPM para instalar as dependências/pacotes, será feito o mesmo nesta pipeline. Por isso, adiciona-se uma primeira task:

E pesquisa-se e adiciona-se a task “npm”:

Não será feito nenhuma configuração adicional, pois a intenção é apenas instalar as dependências do projeto. E, nesta task, o comando de instalação já está selecionado por padrão:

Após isso, adiciona-se outra task referente ao Angular CLI, o qual instalamos sua extensão.

Iremos utilizar essa task para executar o comando de build da aplicação e gerar os arquivos para publicação. Como será publicado no modo produção, iremos, apenas, adicionar um argumento de configuração apontando para variável de ambiente chamada “production”.

Por fim, adiciona-se uma última task para publicação dos arquivos gerados pelo build em um outro local, chamada de “Publish Artifacts”:

Nesta etapa será informado o local em que os arquivos de publicação estão e o nome do artefato a ser publicado:

Terminando esta etapa, basta salvar o que foi feito. O pipeline irá ficar desta maneira:

Antes de prosseguir, é necessário habilitar o Continuous Integration do pipeline de build. Pois a cada Pull Request feito e completado será executado, automaticamente, o pipeline de build que, por sua vez, ao terminar será executado o pipeline de release. Para fazer isto, é necessário ir na aba “Triggers” e habilitar a opção, conforme mostrado:

Nesta última etapa, irá ser configurar o pipeline de release, responsável por publicar nossos arquivos, gerados pelo build no pipeline anterior, no Amazon S3 (o qual é o provedor das informações). Para isso, seleciona-se a opção “Releases”, dentre as opções existentes no serviço de Pipelines:

Inicia-se o processo de criação de novo pipeline:

E novamente, define-se um template vazio:

Será pre-definido um nome padrão para o primeiro estágio, o qual não será alterado.

Agora, elege-se um artefato que será utilizado para o pipeline:

Para isso, clica-se na opção de adicionar artefato e será exigido o tipo da origem (no caso build), o projeto vinculado, a pipeline de build, versão e um Alias. Após selecionar o projeto e a pipeline de build, as demais informações padrões serão mantidas.

Logo após, será criado uma trigger para o Continuous Deployment. Com isso, habilita-se a opção de criar uma nova release toda vez que um novo build estiver válido.

Por fim, configura-se a pipeline de release, selecionando a opção, conforme em destaque na imagem:

Feito isso, será aberto uma nova tela parecida com a tela de criação de pipeline de build. E para este cenário, será adicionado apenas uma task, chamada de Amazon S3 Upload, que terá a função de realizar o upload dos arquivos de build.

Será necessário informar a credencial da AWS, neste caso o serviço de conexão que foi criado anteriormente, a região que se encontra o bucket existente no S3 a pasta onde está localizado os arquivos para publicação e, por fim, o controle de acesso que terá esses arquivos no S3, conforme mostrado abaixo:

Obs.: Caso seja informado um nome de um bucket inexistente, selecione o último checkbox para criar caso não exista.

E assim ficará o pipeline:

Com isso, todo o processo foi criado. Para executá-lo basta criar um novo Pull Request, de alguma branch para a master, e completá-lo, conforme exibido na imagem:

Obs.: Pode-se adicionar condições para se completar um PR, como aprovadores, se passou em todos os testes unitário e se houve conflito ao realizar o merge (isso já é padrão).

A fazer esse procedimento, nossos pipelines serão executados e a aplicação em angular será publicada e disponibilizada dentre alguns minutos.

Conclusão

Disponibilidade de aplicações e segurança é algo primordial para o desenvolvimento e percebe-se que os serviços da AWS fornecem isso e, em vários pontos, flexibilidade em como pode-se utilizá-los. Além disso, a automação vem para agregar muito, onde o programador não precisa mais se preocupar em como vai publicar sua aplicação, pois, uma vez configurado os pipelines eles não precisam ser revisitados, só em casos de alteração de ambiente ou criação de novos.

Referências

Bachelor in Computer Science, MBA in Software Architecture and .NET Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store