Docker - Rodando Angular e API REST no container - II

 Neste tutorial vamos criar uma aplicação Angular e uma aplicação ASP.NET Core Web API a seguir vamos conteinerizar essas aplicações usando o docker compose.

Continuando a primeira parte do artigo vamos criar agora a aplicação Angular PaisesUI.

Criando a aplicação Angular

Para criar a aplicação Angular digite o comando em um terminal do PowerShell:

ng new PaisesUI

A seguir entre na pasta PaisesUI abra o projeto no VS Code digitando : code.

A seguir dentro da pasta src/app vamos criar os arquivos typescript :

1- CountriesModel.ts

export class Country{
     name:string;
     capital:string
}

2- country-service.ts

import {Injectable} from '@angular/core'
import {HttpClientModule, HttpClient} from '@angular/common/http'
import { Country } from './CountriesModel';

@Injectable({
    providedIn:'root'
})
export class CountryService{

    apiURL="http://localhost:5005/Countries/GetAll"

    httpClient:HttpClient

    constructor(private thttpClient: HttpClient) {
        this.httpClient= thttpClient;

    }

    GetAll(){
        return this.httpClient.get<Country[]>(this.apiURL)
       

    }
}

A seguir vamos definir o código a seguir nos arquivos:

1- app.component.html

<div style="text-align:center">
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      background-color: #2196F3;
      padding: 10px;
    }
    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
    </style>
  <h1>
    Welcome
  </h1>
    <div class="grid-container">
      <div  class="grid-item" *ngFor="let country of countries">
          <strong>{{ country?.name }}</strong>
          {{country?.capital}}
        </div>
      </div>
</div>

2- app.component.ts

import { Component } from '@angular/core';
import { CountryService } from './country.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'KnowThatCountryUI';
  countryService:CountryService;
  countries=[];
 
  constructor(private tCountryService:CountryService) {
      this.countryService=tCountryService;
      this.GetAll();
  }

  GetAll(){
    this.countryService.GetAll().subscribe(response=>
       this.countries=response);
  }
}

3- app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Pronto !!

Podemos executar o projeto abrindo um terminal e digitando : dotnet run

Iremos obter a interface do swagger acessando  : https://localhost:7297/swagger/index.html

Na próxima parte do artigo iremos criar a aplicação Angular.

Criando a aplicação Angular

Vamos agora criar nossa aplicação Angular usando o comando dotnet new e especificando o template angular.

dotnet new angular -o angular-app

O argumento -o fará com que o novo projeto seja criado em uma subpasta chamada angular-app.

Isso criará um projeto .NET Core ASP.NET com um aplicativo Angular em sua pasta ClientApp.

Depois de executar o comando, vá para o novo diretório e inicie o Visual Studio Code digitando : code .

Com isso teremos o projeto aberto no VS Code:

Adicionando os arquivos do Docker

Com a extensão do Docker para VS Code instalada, podemos adicionar arquivos do Docker facilmente por meio da paleta de comandos.

Abra a paleta de comandos usando as opções de menu ctrl+shift+P ou View->Command Palette;

A seguir execute o comando Docker: Add Docker Files to Workspace. (Dica: digite “docker” para filtrar comandos.)

A seguir selecione as seguintes opções conforme solicitado:

Se você estiver executando o Docker no Windows, é importante certificar-se de que o Docker esteja configurado para executar o tipo certo de contêineres (Windows vs Linux).

Depois de responder às perguntas da extensão do Docker, um arquivo Dockerfile será gerado na pasta do projeto.

Vamos fazer uma alteração no arquivo para poder instalar também o NodeJS para nosso aplicativo cliente. As linhas necessárias para fazer isso estão destacadas no Dockerfile completo abaixo.

Um Dockerfile é um arquivo texto que descreve as etapas que o Docker precisa para preparar uma imagem, incluindo a instalação de pacotes, criação de diretórios e definição de variáveis de ambiente entre outras coisas.

Criando a Imagem

Com o arquivo Dockerfile criado podemos criar a imagem Docker e para isso podemos clicar com o botão do mouse sobre o arquivo e selecionar a opção Build Image ou usar o comando abaixo:

docker build -t angularapp .

Ao final do processo teremos a imagem : angularapp criada conforme mostra a figura:

Para verificar a imagem criada no ambiente Docker podemos abrir um terminal e digitar o comando:
docker images



Agora vamos criar um container com o comando docker run usando a imagem angularapp.

Para isso vamos emitir o comando abaixo na janela de comandos:

docker run -d -p 7000:80 angularapp

Neste comando temos:

Agora para acessar a aplicação Angular no container basta abrir um navegador e digitar: localhost:7000



A imagem mostra a aplicação Angular em execução no container Docker, e com isso acabamos de conteinerizar nossa aplicação Angular.

E estamos conversados

"Bem-aventurados os que guardam os seus testemunhos, e que o buscam com todo o coração"
Salmos 119:2

Referências:

José Carlos Macoratti