Implantando um aplicativo Angular com DigitalOcean e GitHub de forma gratuita

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

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:

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

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:

Finish, aplicativo criado e implementado:

É 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:

Documentação Angular:

https://angular.dev/installation