Como implementar Docker en una app Angular

1. Germán Küber
Software Architect
Net-Baires
¿Y si contenerizamos
Angular?

2. >_

3. nginx
Imagenes
Docker Compose
Angular
Dockerfile
Containers

4. Conceptos básicos

5. Imágenes y Containers

7. Enviar nuestro código a producción

8. Enviar nuestro código fuente a producción

9. Porque usar
Docker?

10. Enviar una imagen Docker a producción

11. Que viaja en el Container
Código (Versión
especifica)
Variables de
Entorno
Configuración
Seguridad
Servidor
Todo lo
requerido

12. Beneficios de Contenedores
• Acelera la incorporación de nuevos desarrolladores
• Eliminar los conflictos de Aplicación
• Consistencia entre entornos
• Entrega Software mas rápido

13. ng serve_

14. Ejemplo Dockerfile
FROM node:latest as node
LABEL author="Germán Küber"
WORKDIR /app
COPY . .
RUN npm install
ENTRYPOINT [ "npm","run","start" ]
docker build –t imagen-angular-docker ._
docker run –p 4200:4200 imagen-angular-docker_

15. http Request
http Response
Angular + Docker

16. Ejemplo Dockerfile - Debug
FROM node:latest as node
LABEL author="Germán Küber"
WORKDIR /app
COPY . .
RUN npm install
ENTRYPOINT [ "npm","run","start" ]
docker run –p 4200:4200 –v $(pwd)/src:/app/src imagen-angular-docker_

17. docker run -p 8080:80 –v $(pwd)/dist:/usr/share/nginx/html nginx-angular_

18. Multi-Stage Dockerfiles
Stage 1
Compilar
Aplicación
1
Stage 2
Copias código y
crear Servidor
2
Imagen
intermedia
Imagen
Final

19. ### STAGE 1: Build ###
FROM node:8.1.4-alpine as builder
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
### STAGE 2: Setup ###
FROM nginx:1.13.3-alpine
COPY nginx/default.conf /etc/nginx/conf.d/
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /ng-app/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

20. Corriendo imagen productiva
docker build –t angular-prod ._
docker run –d –p 4200:80 angular-prod_

21. VS CODE

24. Publicar
imagen

25. Publicar imagen
docker tag angular-prod germankuber/my-app:1.0.1_
docker push germankuber/my-app:1.0.1_

26. https://hub.docker.com/

27. Docker Hub Imagen - Tag

28. Docker
Compose

29. version: '3.1'
services:
nginx:
container_name: nginx-angular
image: nginx-angular
build:
context: .
dockerfile: nginx.dockerfile
volumes:
- ./dist:/usr/share/nginx/html
ports:
- "8080:80"
- "443:443"
depends_on:
- node
networks:
- app-network

30. node:
container_name: angular-node-service
image: angular-node-service
build:
context: ./server
dockerfile: node.dockerfile
environment:
- NODE_ENV=development
ports:
- "3000:3000"
networks:
- app-network

31. Docker Compose
docker-compose build_
docker-compose up_

32. Docker-Compose
http Request
http Response

33. Enviando una imagen Docker a Producción

34. Germán Küber
Software Architect
Net-Baires
GRACIAS!!!