Code and
Deploy Angular
to the Cloud
Prereq
▪ angular-cli
▪ Npm install -g
@angular/cli
▪ Create a new
app
▪ docker
▪ Brew cask install
docker
▪ Docker pull
nginx:alpine
▪ Github Account
▪ CircleCI Account
▪ Azure Account
Simona Cotin
Cloud Dev Advocate
@simona_cotin
Asim Hussain
Cloud Dev Advocate
@jawache
CICD
Couldn’t
I
Care …
Dless?
Continuous Integration
Continuous Delivery
Scary
Scary
Not my job
Scary
Not my job
Mad terminal skills
Ingredients
Automation
Build
Deploy
Test
DEMO
Can we do better?
Docker
Isolated Repeatable
Docker
DEMO
So how do we deploy?
Create a custom
Docker Image
Dockerfile
FROM nginx:alpine
LABEL author="Simona Cotin"
COPY ./dist /usr/share/nginx/html
EXPOSE 80 443
ENTRYPOINT ["nginx","-g","daemon off;"]
$ docker build -t simonaco.azurecr.io/angular-cli-nginx:1.0 .
Tag Repository
Image name
Version
Build
Context
Azure Container Registry
Docker
Private
Registry
Deploy
Azure container registry
Azure App Service
Fully
managed
platform
Autoscaling
Load
balancing
Azure app service
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
DEMO
Simona Cotin
Cloud Dev Advocate
@simona_cotin
Asim Hussain
Cloud Dev Advocate
@jawache
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/

Code and Deploy Angular to the Cloud