Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 ["ngin...
Steps
$ docker build -t simonaco.azurecr.io/angular-
cli-nginx:1.0 .
$ docker login —username <your-username> —
password <...
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
Deploy Angular to the Cloud
Deploy Angular to the Cloud
Deploy Angular to the Cloud
Deploy Angular to the Cloud
Deploy Angular to the Cloud
Deploy Angular to the Cloud
Deploy Angular to the Cloud
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Lean React - Patterns for High Performance [ploneconf2017]
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Deploy Angular to the Cloud

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Deploy Angular to the Cloud

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

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

Views

Total views

1,228

On Slideshare

0

From embeds

0

Number of embeds

181

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×