DEV Community

Cover image for Implantando um aplicativo Angular com DigitalOcean e GitHub de forma gratuita
Ledson Oliveira da Silva
Ledson Oliveira da Silva

Posted on

1

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 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>
Enter fullscreen mode Exit fullscreen mode

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.

Image description

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",
            .....
Enter fullscreen mode Exit fullscreen mode

Para:

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

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:

Image description

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"

Image description

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

Image description

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:

Image description

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:

Image description

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:

Image description

Finish, aplicativo criado e implantado:

Image description

Aplicação no AR:

Image description

É 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

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay