The document provides a guide on how to deploy an Angular application to the cloud using Docker and Azure services. It highlights the creation of a custom Docker image, steps for building and pushing the image to Azure Container Registry, and deploying it on Azure App Service. Additionally, it includes links to resources for further learning.

1. Code and
Deploy Angular
to the Cloud

2. Simona Cotin
Cloud Dev Advocate @ Microsoft
@simona_cotin

8. CICD

9. Couldn’t
I
Care …
Dless?

10. Continuous Integration
Continuous Delivery

13. Scary

14. Scary
Not my job

15. Scary
Not my job
Mad terminal skills

16. Ingredients
Automation
Build
Deploy
Test

18. DEMO

19. Can we do better?

20. Docker

21. Isolated Repeatable
Docker

22. DEMO

23. So how do we deploy?

24. Create a custom
Docker Image

25. Dockerfile
FROM nginx:alpine
LABEL author="Simona Cotin"
COPY ./dist /usr/share/nginx/html
EXPOSE 80 443
ENTRYPOINT ["nginx","-g","daemon off;"]

26. $ docker build -t simonaco.azurecr.io/angular-cli-nginx:1.0 .
Tag Repository
Image name
Version
Build
Context

27. Azure Container Registry

28. Docker
Private
Registry
Deploy
Azure container registry

30. Azure App Service

31. Fully
managed
platform
Autoscaling
Load
balancing
Azure app service

34. Steps
$ docker build -t simonaco.azurecr.io/
angular-cli-nginx:1.0 .
$ docker login —username <your-username>
—password <your-password>
$ docker push simonaco.azurecr.io/angular-
cli-nginx:1.0

35. DEMO

38. Resources
▪ https://github.com/simonaco/awesome-app
▪ https://www.ng-conf.org/build-deploy-angular-cloud/
▪ https://youtu.be/61AgaccL9V8
▪ https://azure.microsoft.com/services/container-registry/
▪ https://docs.microsoft.com/en-us/azure/app-service/
containers/
▪ https://circleci.com/

39. Simona Cotin
Cloud Dev Advocate @ Microsoft
@simona_cotin
Thank you!