Build your angular app using angular cli, run CICD using circleci and deploy it to Azure App service

1. Code and Deploy Angular to the Cloud
Simona Cotin
Simona.cotin@microsoft.com

2. Simona Cotin
Cloud Dev Advocate @ Microsoft
@simona_cotin

7. CICD

9. You too feel like this is devops
job?

11. Or super complicated UIs?

13. And show you that you too can
be a CICD master

14. So let’s first see what CICD
stands for

15. Couldn’t
I
Care …
Dless?

16. Continuous Integration
Continuous Delivery

17. Continuous Integration
Continuous Delivery

18. Ingredients
Automation
Build
Deploy
Test

19. Ingredients
Change
Management
Source code
Database schemas
Deployment scripts

20. Ingredients
Continuous
Integration
Frequent commits
Test runs for each commit
Fixing prod is the main priority

21. Why
Continuous
Delivery
Deployment risk
Real progress
User feedback

22. Tasks
Build
Deploy
Test

23. Build
$ ng build —prod —build-optimizer

24. Test $ ng test —single-run

25. DEMO

26. Can we do better?

27. software will always run the same
Containerized
regardless of the environment

28. Isolated
Docker
Repeatable Microservices

29. DEMO

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

31. 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

32. Docker
Private
Registry
Azure Container registry
Deploy

33. Fully
managed
platform
Azure App Service
Autoscaling
Load
balancing

34. DEMO

35. • Build & test using the angular cli
• Automate Build and tests with CircleCI
• Automatic deployment to Azure App Service

37. References
Github
CircleCI
Azure App Service
https://aka.ms/U1o3i4
https://circleci.com/
https://aka.ms/plone-containers

38. Thank you!
simona.cotin@microsoft.com
@simona_cotin