deploying_angular.pdf

Transcript

1. To the Cloud !
   @john_papa
   John Papa
   Developer Advocate, Microsoft
   

   View Slide

2. Going to the cloud
   is easier with great tooling
   @john_papa
   

   View Slide

3. Optimize
   @john_papa
   

   View Slide

4. Build
   Optimize
   @john_papa
   

   View Slide

5. Deploy
   Build
   Optimize
   @john_papa
   

   View Slide

6. Building Angular
   @john_papa
   

   View Slide

7. Scaffold a new Angular App
   ng new my-app
   @john_papa
   

   View Slide

8. Add routing
   Set your prefix
   Define your styles
   Verify the flle names
   This is just the beginning
   ng new my-app --routing
   --prefix ma
   --style scss
   --dry-run
   Scaffold a new Angular App
   @john_papa
   

   View Slide

9. $ ng build Development build
   Consider the Personas When we Build
   $ ng build --prod
   --build-optimizer
   Production builds
   Minified, optimized, cache busting
   @john_papa
   

   View Slide

10. Environment environment.prod.ts
    ng build --prod --build-optimizer
    Cache-busting all build files
    Source maps not generated
    Uglification yes
    Bundling yes
    environment.ts
    ng build
    only images referenced in css
    generated
    no
    yes
    Code Splitting yes
    AOT yes
    yes
    no
    Tree Shaking yes
    no
    @john_papa
    

    View Slide

11. The Angular CLI
    makes production builds
    smaller and faster
    @john_papa
    

    View Slide

12. Tools to Analyze and Optimize
    $ ng build --prod --stats-json
    $ webpack-bundle-analyzer dist/stats.json
    Generate webpack statistics
    Analyze the statistics
    Optimized build with source maps
    Analyze the source
    $ ng build --prod --sm
    $ source-map-explorer dist/main.xxx.js
    https://www.npmjs.com/package/source-map-explorer
    https://www.npmjs.com/package/webpack-bundle-analyzer
    @john_papa
    

    View Slide

13. Webpack Bundle Analyzer
    

    View Slide

14. CLI Deploy to Azure
    @john_papa
    

    View Slide

15. @john_papa
    

    View Slide

16. Deploy the Node App to Azure
    @john_papa
    https://aka.ms/jp-vikings-azwebapp
    $ az webapp new –n vikings-rule
    

    View Slide

17. Easy Deploy
    @john_papa
    

    View Slide

18. Do the versions of Node
    match, both locally and
    in the cloud?
    @john_papa
    

    View Slide

19. Automate
    the build and deploy steps with
    consistency and confidence
    @john_papa
    

    View Slide

20. Debugging Node.js in Docker
    with VS Code
    @john_papa
    

    View Slide

21. Dockerfile
    @john_papa
    

    View Slide

22. Dockerfile
    1 Self contained script
    @john_papa
    

    View Slide

23. Dockerfile
    2
    1
    Provides a recipe for creating and running our app
    Self contained script
    @john_papa
    

    View Slide

24. Dockerfile
    3
    2
    1
    Configurable to adapt to different environments
    Provides a recipe for creating and running our app
    Self contained script
    @john_papa
    

    View Slide

25. Sample Dockerfile
    Sigh.
    @john_papa
    

    View Slide

26. Generate Docker files
    @john_papa
    

    View Slide

27. Generate Docker files
    https://aka.ms/docker-code
    VS Code can do that!
    @john_papa
    

    View Slide

28. Multi-stage Docker files?
    @john_papa
    https://aka.ms/ng-essentials
    Angular Essentials Extension for VS Code
    

    View Slide

29. Running Angular in Docker
    Create Dockerfile
    @john_papa
    

    View Slide

30. Running Angular in Docker
    Build and Run
    Create Dockerfile
    @john_papa
    

    View Slide

31. Debug
    Build and Run
    Running Angular in Docker
    Create Dockerfile
    @john_papa
    

    View Slide

32. Debugging
    Docker Apps
    @john_papa
    

    View Slide

33. Get Your Docker Inside VS Code !
    @john_papa
    https://aka.ms/docker-code
    

    View Slide

34. Tag, Run, Push from VS Code
    @john_papa
    https://aka.ms/docker-code
    

    View Slide

35. To the Cloud!
    @john_papa
    

    View Slide

36. Docker to the Cloud
    Compose
    @john_papa
    

    View Slide

37. Docker to the Cloud
    Tag
    Compose
    @john_papa
    

    View Slide

38. Docker to the Cloud
    Push
    Tag
    Compose
    @john_papa
    

    View Slide

39. Docker to the Cloud
    Push
    Tag
    Compose
    Web App in
    the Cloud
    @john_papa
    

    View Slide

40. Docker to the
    Cloud
    @john_papa
    

    View Slide

41. Key Points
    3
    2
    1
    @john_papa
    

    View Slide

42. Key Points
    JavaScript CLIs optimize the builds
    3
    2
    1
    @john_papa
    

    View Slide

43. Key Points
    Docker makes it run “everywhere”
    JavaScript CLIs optimize the builds
    3
    2
    1
    @john_papa
    

    View Slide

44. VS Code tooling makes it all easier
    Key Points
    Docker makes it run “everywhere”
    JavaScript CLIs optimize the builds
    3
    2
    1
    @john_papa
    

    View Slide

45. Great Tools Make
    Deployment You Better
    @john_papa
    

    View Slide

46. https://github.com/johnpapa/vikings
    https://aka.ms/ng-essentials
    https://aka.ms/vsc-node
    https://aka.ms/jp-viking-azdeploy
    https://aka.ms/jp-free
    @john_papa
    

    View Slide