Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Optimize and Deploy Angular
John Papa
Developer Advocate, Microsoft
@john_papa
Building Angular
Generating Code
$ ng generate component customer
$ ng generate service customer-data
$ ng generate class customer-model
Sy...
$ ng build Development build
When it’s Time to Build
Output to /dist folder, by default (see .angular-cli.json)
$ ng build...
Environment environment.prod.ts
ng build --prod
Cache-busting all build files
Source maps not generated
Extracted CSS yes,...
The Angular CLI
makes production builds
smaller and faster
DEMO
Optimized build with source maps
Analyze and Optimize
$ ng build --prod --build-optimizer -sm
Analyze the source$ source-m...
How do we make it work
everywhere?
Do the versions of Node
match, both locally and
in the cloud?
Automate
the build and deploy steps with
consistency and confidence
Docker Containers
Dockerfile
3
2
1
Configurable to adapt to different environments
Provides a recipe for creating and running our app
Self c...
Sample Dockerfile
Now we can automate
Running Angular in Docker
Create Dockerfile
Running Angular in Docker
Build and RunCreate Dockerfile
DebugBuild and Run
Running Angular in Docker
Create Dockerfile
DEMO
Containerize with Docker
$ docker-compose up –d
$ docker tag myimage myreg.azurecr.io/papa/myimage
$ docker push myreg.azu...
CI/CD
Automated Deployment
Container
Registry
CI/CD
Server
Push to
Github
Web App in
the Cloud
DEMO
Host in the cloud with Azure App Service on Linux
Deploying Angular to the Cloud
Continuously build and deploy with VSTS
B...
• Angular CLI optimizes the builds
• Docker makes it run “everywhere”
• CI/CD server automates build and
deploy
• VS Code ...
https://aka.ms/ng-essentials
https://aka.ms/vsc-docker
https://aka.ms/vsc-azure-cli
https://aka.ms/ng-cosmosdb
Thank You!
@john_papa
Prochain SlideShare
Chargement dans…5
×

Optimizing and Deploying Angular

1 320 vues

Publié le

You've built your app, but is it fast? Can you deploy it to the cloud with confidence? If you paused, then this session is for you! We'll use the Angular CLI, AOT, lazily loaded routes, and other tools to optimize our apps and inspect them. Learn how to run your apps locally and in the cloud with confidence! You'll shout "it works on my machine and in the cloud". The good news is there are tools to make this all within your reach and 20 minutes are all we need to get you there.

Publié dans : Technologie
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn }
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Optimizing and Deploying Angular

  1. 1. Optimize and Deploy Angular John Papa Developer Advocate, Microsoft @john_papa
  2. 2. Building Angular
  3. 3. Generating Code $ ng generate component customer $ ng generate service customer-data $ ng generate class customer-model Syntax: ng generate <blueprint> <options>  customer.component.ts  customer-data.service.ts  customer-model.ts
  4. 4. $ ng build Development build When it’s Time to Build Output to /dist folder, by default (see .angular-cli.json) $ ng build --prod --build-optimizer Production builds Minified, optimized, cache busting
  5. 5. Environment environment.prod.ts ng build --prod Cache-busting all build files Source maps not generated Extracted CSS yes, to css file(s) Uglification yes environment.ts ng build only images referenced in css generated global CSS output to .js no Bundling yes AOT yes yes no
  6. 6. The Angular CLI makes production builds smaller and faster
  7. 7. DEMO
  8. 8. Optimized build with source maps Analyze and Optimize $ ng build --prod --build-optimizer -sm Analyze the source$ source-map-explorer dist/main.xxx.js https://www.npmjs.com/package/source-map-explorer
  9. 9. How do we make it work everywhere?
  10. 10. Do the versions of Node match, both locally and in the cloud?
  11. 11. Automate the build and deploy steps with consistency and confidence
  12. 12. Docker Containers
  13. 13. Dockerfile 3 2 1 Configurable to adapt to different environments Provides a recipe for creating and running our app Self contained script
  14. 14. Sample Dockerfile Now we can automate
  15. 15. Running Angular in Docker Create Dockerfile
  16. 16. Running Angular in Docker Build and RunCreate Dockerfile
  17. 17. DebugBuild and Run Running Angular in Docker Create Dockerfile
  18. 18. DEMO
  19. 19. Containerize with Docker $ docker-compose up –d $ docker tag myimage myreg.azurecr.io/papa/myimage $ docker push myreg.azurecr.io/papa/myimage Build the image Tag it Push it to Azure Push the Docker image to the Azure Container Registry
  20. 20. CI/CD
  21. 21. Automated Deployment Container Registry CI/CD Server Push to Github Web App in the Cloud
  22. 22. DEMO
  23. 23. Host in the cloud with Azure App Service on Linux Deploying Angular to the Cloud Continuously build and deploy with VSTS Build, run and debug locally with Docker 3 2 1
  24. 24. • Angular CLI optimizes the builds • Docker makes it run “everywhere” • CI/CD server automates build and deploy • VS Code tooling makes it all easier Summary
  25. 25. https://aka.ms/ng-essentials https://aka.ms/vsc-docker https://aka.ms/vsc-azure-cli https://aka.ms/ng-cosmosdb
  26. 26. Thank You! @john_papa

×