Code and Deploy Angular to the Cloud

Simona Cotin
Simona.cotin@microsoft.com
Simona Cotin
Cloud Dev Advocate @ Microsoft
@simona_cotin
CICD
You too feel like this is devops
job?
Or super complicated UIs?
And show you that you too can
be a CICD master
So let’s first see what CICD
stands for
Couldn’t
I
Care …
Dless?
Continuous Integration
Continuous Delivery
Continuous Integration
Continuous Delivery
Ingredients
Automation
Build
Deploy
Test
Ingredients
Change
Management
Source code
Database schemas
Deployment scripts
Ingredients
Continuous
Integration
Frequent commits
Test runs for each commit
Fixing prod is the main priority
Why
Continuous
Delivery
Deployment risk
Real progress
User feedback
Tasks
Build
Deploy
Test
Build
$ ng build —prod —build-optimizer
Test $ ng test —single-run
DEMO
Can we do better?
software will always run the same
Containerized
regardless of the environment
Isolated
Docker
Repeatable Microservices
DEMO
Dockerfile
FROM nginx:alpine
LABEL author="Simona Cotin"
COPY ./dist /usr/share/nginx/html
EXPOSE 80 443
ENTRYPOINT ["nginx","-g","daemon
off;"]
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
Docker
Private
Registry
Azure Container registry
Deploy
Fully
managed
platform
Azure App Service
Autoscaling
Load
balancing
DEMO
• Build & test using the angular cli
• Automate Build and tests with CircleCI
• Automatic deployment to Azure App Service
References
Github
CircleCI
Azure App Service
https://aka.ms/U1o3i4
https://circleci.com/
https://aka.ms/plone-containers
Thank you!
simona.cotin@microsoft.com
@simona_cotin

Deploy Angular to the Cloud