Neste artigo, abordaremos como implantar um aplicativo Angular utilizando o DigitalOcean combinado com o GitHub para configurar um pipeline de entrega contínua (CI/CD) de forma eficiente e gratuita.

Esses dias, estava olhando algumas opções, para criar uma pipeline de um projeto pessoal, com bom custo beneficio, e me deparei com o serviço Platform App da digital ocean, é um PaaS (Plataforma como serviço) que simplifica o processo de implantação, gerenciamento e escalabilidade de aplicativos, sites estáticos e APIs, permitindo que desenvolvedores foquem no código sem se preocupar com a infraestrutura subjacente.

Em outras palavras, é um lugar onde vai hospedar suas aplicações, sem ter que se preocupar com infra, sistema operacional, plataforma para CI/CD, um serviço bem legalzinho, que vai te economizar um bom tempo, e fazer com que foque mais no desenvolvimento do seu produto, sem perder horas configurando VM, pipeline, Firewall, conectividade, etc...

O mais legal, é que ele oferece 3 aplicações web estáticas, 100% free, dai resolvi fazer um teste e implantar um frontend feito com angular que tenho aqui, e funcionou perfeitamente, dito isso, resolvi escrever aqui e compartilhar o passo a passo de como funciona este processo.

Pré-requisitos:

• Ter uma conta na digital ocean.
• Conhecimento de GIT e Github.
• Angular-Cli instalado.

Obs: Neste exemplo, estarei utilizando a versão 18 do angular.

Passo 01 (Criar novo projeto com angular-clie):

ng new <project-name>

Na criação do projeto, será perguntado se deseja habilitar a renderização do lado do servidor (SSR), neste caso deixe marcado com "N", pois para nos encaixarmos no plano FREE, o aplicativo deve ser estatico, e caso queira habilitar SSR, você precisará selecionar um plano que tenha um servidor web, e não será gratuito.

Passo 02 (Ajustar configurações do projeto):

Ajuste o processo de build no arquivo angular.json, por default o angular vem configurado para gerar um build de aplicativo para executar em um servidor, precisamos que gere os arquivos para executar de forma estatica.

Ajuste de o arquivo para conforme o trecho abaixo de:

"architect": {
    "build": {
        "builder": "@angular-devkit/build-angular:application",
        "options": {
            "outputPath": "dist/angular-platform-app",
            "index": "src/index.html",
            "browser": "src/main.ts",
            .....

Para:

"architect": {
    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            .....

Neste caso a alteração aqui foi feita em "builder" alterado de application para browser, e consequentemente a chave "browser" para "main".

Também foi alterado "outputPath" para que os arquivos fiquem na raiz da pasta "dist".

DIFF:

Passo 03 (NPM Install):

Importante rodar um NPM install no projeto recem criado, pois ele adiciona alguns metadados com relação ao node no package-lock.json que no caso se não for versionado, ocasionará erro no build dentro da plataforma.

Passo 04 (Versionamento no github):

Aqui é somente comitar e subi em seu repositório no github mesmo, não vou entrar no mérito de como faz este processo.

Passo 05 (Criar APP no Platform App da DigitalOcean) conforme steps abaixo:

No menu "CREATE", selecione o produto "Platform APP"

Deixe marcado a opção Github e será necessário conceder permissão para DigitalOcean enxergar seus repositórios:

Após conceder a permissão, ele deve aparecer no combo de repositórios, dai basta selecionar e configurar a branch no qual será disparado a trigger para deployment, o source directory e o checkbox para indicar se o deployment será automático conforme seja comitado nesta determinada branch:

Avance para próxima etapa, e neste momento que precisaremos ajustar o resourceType para efetuar o deploymeny em um "Static WEB", por padrão ele vem marcado como "WebServer". No APP basta clicar em Edit, e na opção "ResourceType" clicar também em Edit e selecionar a opção "Static Site", conforme imagem abaixo:

Após editar, basta voltar em "Back" e avançar para próxima etapa.

Agora basta avanças as etapas, não precisa de mais nenhuma configuração adicional e por fim criar o recurso, aqui você poderá vê que o preço ficou em $0.00:

Finish, aplicativo criado e implantado:

Aplicação no AR:

É isso pessoal, espero que o conteúdo seja util, e estou aberto a sugestões e críticas com relação ao conteúdo.

Um abs!

Links importantes:

Repositório utilizado no exemplo:
https://github.com/ledsonsilva/angular-platform-app-example

Documentação PlaformApp:
https://docs.digitalocean.com/products/app-platform/

Documentação Angular:
https://angular.dev/installation