Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Serving for the win - deployments and infrastructure for the rest of us

Serving for the win - deployments and infrastructure for the rest of us

You’ve chosen your frameworks and libraries. You’ve learned how to write code which satisfies the buzzword and performance gods. Now you need to serve it to a global audience, and make things easy to preview, to test, to sign-off, and to evolve. But infrastructure design is difficult and boring for most of us. We just want to get our work out into the wild.

If only we had tools which would make us go, “Oh yeah! It all deploys perfectly every time” and shout, “You need another release? BAM! What’s next?

This talk looks at some case studies of projects making common mistakes, and some which benefit from a better approach. We’ll explore tools and techniques which ease the path to production. Things anyone can do to boost confidence in every release. And ways to optimise our hosting for performance, hassle free localisation and genuine A/B testing.

Phil Hawksworth

March 23, 2018
Tweet

More Decks by Phil Hawksworth

Other Decks in Technology

Transcript

  1. SERVING FOR THE WIN
    DEPLOYMENTS AND HOSTING FOR THE REST OF US
    PHIL HAWKSWORTH

    View Slide

  2. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    HELLO

    View Slide

  3. netlify Serving for the win Render Conference, 2018 @philhawksworth
    SOCK FETISH CONF
    OXFORD 2018

    View Slide

  4. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    PHIL HAWKSWORTH
    @

    View Slide

  5. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    MAKING THINGS

    View Slide

  6. Serving for the win Render Conference, 2018 @philhawksworth
    netlify

    View Slide

  7. Serving for the win Render Conference, 2018 @philhawksworth
    netlify

    View Slide

  8. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    SALES PITCH

    View Slide

  9. Serving for the win Render Conference, 2018 @philhawksworth
    netlify

    View Slide

  10. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    MY TRACK RECORD

    View Slide

  11. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    STATIC SITES
    GO ALL HOLLYWOOD
    7
    7
    @PHILHAWKSWORTH
    FRONTEERS, AMSTERDAM, 2015
    ~
    I
    C
    CAN SMELL YOUR
    MS

    View Slide

  12. netlify Serving for the win Render Conference, 2018 @philhawksworth
    SO, FOR THIS TALK

    View Slide

  13. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    TIME TO JAZZ IT UP

    View Slide

  14. SERVING FOR THE WIN
    DEPLOYMENTS AND HOSTING FOR THE REST OF US
    PHIL HAWKSWORTH

    View Slide

  15. SERVING FOR THE WIN
    DEPLOYMENTS AND HOSTING FOR THE REST OF US
    PHIL HAWKSWORTH

    View Slide

  16. SERVING FOR THE WIN
    DEPLOYMENTS AND HOSTING FOR THE REST OF US
    PHIL HAWKSWORTH

    View Slide

  17. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    EXOTIC OR NEW

    View Slide

  18. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    FUNDAMENTALS

    View Slide

  19. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    WE LEARN A LOT
    AT CONFERENCES

    View Slide

  20. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    CAPTIONS
    AREN'T
    OPTIONAL
    — Laura

    View Slide

  21. ENVIRONMENT
    VARIABLE
    EXFILTRATION 

    WITH NPM
    — Asim

    View Slide

  22. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    HEEBEEGEEBEES
    the

    View Slide

  23. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    CONFINING THESE LEARNINGS
    TO THEORY IS A WASTE

    View Slide

  24. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    CONFINING THESE LEARNINGS
    TO OUR LOCAL ENVIRONMENTS
    IS A WASTE

    View Slide

  25. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    LET’S MAKE SURE
    THE GOOD STUFF
    REACHES YOUR USERS

    View Slide

  26. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    PERFORMANCE?

    View Slide

  27. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DESIGNING FOR PERFORMANCE
    — Lara Callender Hogan

    View Slide

  28. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DESIGNING INFRASTRUCTURE
    FOR PERFORMANCE

    View Slide

  29. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DEPLOYMENTS
    DESIGNING
    INFRASTRUCTURE
    FOR PERFORMANCE

    View Slide

  30. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DEPLOYMENTS
    DESIGNING
    INFRASTRUCTURE
    FOR PERFORMANCE
    PROCESSES

    View Slide

  31. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DEPLOYMENTS
    DESIGNING
    INFRASTRUCTURE
    FOR PERFORMANCE
    PROCESSES
    MINDSET

    View Slide

  32. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    MINDSET

    View Slide

  33. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    OH GREAT…

    HALF AN HOUR OF SLIDES
    ABOUT PROCESS
    ALL OF YOU

    View Slide

  34. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    FOR THE NEXT 30 MINUTES OR SO
    / WHERE DOES IT HURT?
    / 3 STORIES
    / MINDSETS AND RESOURCES

    View Slide

  35. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    FOR THE NEXT 30 MINUTES OR SO
    / WHERE DOES IT HURT?
    / 3 STORIES
    / MINDSETS AND RESOURCES

    View Slide

  36. netlify Serving for the win Render Conference, 2018 @philhawksworth
    WHERE DOES IT HURT?

    View Slide

  37. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    CLIENTS / DEADLINES / COMPLEXITY
    PROJECTS USUALLY INVOLVE

    View Slide

  38. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    SLEEPLESS NIGHTS

    View Slide

  39. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    THE PERFECT PROJECT TIMELINE
    BRIEF AWARDS
    LAUNCH
    START
    SCOPE 

    RE-SCOPE CLIENT

    REVIEW
    FINAL 

    SIGN OFF
    FIXES
    “ ”
    "
    :lemon:

    View Slide

  40. netlify Serving for the win Render Conference, 2018 @philhawksworth
    LAUNCH DAY

    View Slide

  41. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    PROJECTS CAN BE HARD
    NEWSFLASH

    View Slide

  42. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    LEARNING
    PROJECTS USUALLY INVOLVE

    View Slide

  43. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    CHANGE
    PROJECTS USUALLY INVOLVE

    View Slide

  44. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    INFRASTRUCTURE

    View Slide

  45. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    OUR EVOLVING APPROACH TO INFRASTRUCTURE
    ON SITE
    HARDWARE
    SOME
    RACK SPACE
    VIRTUAL
    SERVER
    SOFTWARE

    AAS
    FUNCTIONS

    AAS
    (not Rackspace)
    (perhaps Rackspace)

    View Slide

  46. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    NEW DEPLOYMENT
    CONVENTIONS

    View Slide

  47. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    APPROACH

    View Slide

  48. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    MANAGING CHANGE
    MANAGING THE UNKNOWABLE
    THIS IS WHERE IT HURTS

    View Slide

  49. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    AT CRUNCH TIME,
    AS THE PRESSURE MOUNTS
    THIS IS WHERE IT HURTS

    View Slide

  50. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    WHEN THE PLAN GOES
    IN THE TRASH
    THIS IS WHERE IT HURTS

    View Slide

  51. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    CAN WE PLAN FOR
    THE PLAN GOING IN THE TRASH?

    View Slide

  52. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    FOR THE NEXT 30 MINUTES OR SO
    / WHERE DOES IT HURT?
    / 3 STORIES
    / MINDSETS AND RESOURCES

    View Slide

  53. netlify Serving for the win Render Conference, 2018 @philhawksworth
    DEPLOYING ON MY FIRST DAY
    Story one

    View Slide

  54. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    A LARGE NATION-WIDE
    HEALTHCARE SITE

    View Slide

  55. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    ONE TO NOT F**K UP

    View Slide

  56. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    IT SHOULD HAVE
    GONE LIVE
    ON FRIDAY
    MY NEW BOSS

    View Slide

  57. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    #

    View Slide

  58. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    CAN YOU HELP THE TEAM
    FIGURE OUT
    THE DEPLOYMENT?
    MY NEW BOSS

    View Slide

  59. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    THE PERFECT PROJECT TIMELINE
    BRIEF AWARDS
    LAUNCH
    START
    SCOPE 

    RE-SCOPE CLIENT

    REVIEW
    FINAL 

    SIGN OFF
    FIXES
    “ ”
    "
    “FIGURE OUT” DEPLOYMENT

    View Slide

  60. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    THE DEPLOYMENT

    View Slide

  61. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    STAGING
    BOB
    ALICE
    PROD

    View Slide

  62. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    FFFFFFFFFTP

    View Slide

  63. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    UNKNOWABLE STATE

    View Slide

  64. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    UNREPEATABLE PROCESS

    View Slide

  65. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DID IT GO LIVE?
    YES, IT DID
    WAS IT CORRECT?
    YES.
    PROBABLY.
    HONESTLY, I DON’T THINK WE
    CAN EVERY REALLY KNOW

    View Slide

  66. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    HOW DID THE NEXT
    DEPLOYMENT GO?
    I’M NOT READY TO
    TALK ABOUT THAT
    DO YOU NEED A HUG?
    YES. YES I DO

    View Slide

  67. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    VERSION CONTROL SHOULD
    EXTEND TO YOUR DEPLOYMENTS
    Lessons
    HUMAN INTERVENTION IN
    DEPLOYMENTS IS UNDESIRABLE
    ATOMIC DEPLOYS ARE PREFERABLE
    TO PIECEMEAL DEPLOYS

    View Slide

  68. netlify Serving for the win Render Conference, 2018 @philhawksworth
    SEARCHING FOR SYRIA
    Story two

    View Slide

  69. netlify Serving for the win Render Conference, 2018 @philhawksworth

    View Slide

  70. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    PLENTY OF CHANGE

    View Slide

  71. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    SIGNIFICANT POLITICAL SENSITIVITY

    View Slide

  72. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    GREATER STAKEHOLDER DIVERSITY

    View Slide

  73. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    A GLOBAL LAUNCH

    View Slide

  74. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    ONE TO NOT F**K UP

    View Slide

  75. netlify Serving for the win Render Conference, 2018 @philhawksworth

    View Slide

  76. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    ONE TO NOT F**K UP
    DEFINITELY

    View Slide

  77. “FIGURE OUT” DEPLOYMENT
    Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    THE PERFECT PROJECT TIMELINE
    BRIEF AWARDS
    LAUNCH
    START
    SCOPE 

    RE-SCOPE CLIENT

    REVIEW
    FINAL 

    SIGN OFF
    FIXES
    “ ”
    $

    View Slide

  78. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    AUTOMATE AS EARLY
    AND AS FAST AS YOU CAN
    BENEDEK GAGYI, RENDER 2018

    View Slide

  79. Serving for the win Render Conference, 2018 @philhawksworth
    netlify

    View Slide

  80. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DELIVERIES

    View Slide

  81. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DELIVER to QA

    View Slide

  82. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DELIVER to PRODUCERS

    View Slide

  83. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DELIVER to TRANSLATIONS
    TEAMS

    View Slide

  84. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DELIVER to THE CLIENT

    View Slide

  85. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DELIVER to THE CLIENT’S

    BOSSES

    View Slide

  86. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DELIVER to THE PUBLIC

    View Slide

  87. netlify Serving for the win Render Conference, 2018 @philhawksworth
    LET’S DELIVER ANY
    VERSION AT ANY TIME
    OUR AMBITION

    View Slide

  88. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    VERSION CONTROL

    View Slide

  89. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    TAGS SHOULD CREATE
    RESOURCES AT URLS

    View Slide

  90. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    URLS FTW

    View Slide

  91. netlify Serving for the win Render Conference, 2018 @philhawksworth
    AITCH TEE TEE PEE

    DOUBLE MEH
    ALEX SEXTON

    View Slide

  92. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    http foobar.com
    http foobar.com
    ://

    View Slide

  93. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    TAGS SHOULD CREATE
    RESOURCES AT URLS

    View Slide

  94. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DEV
    PROD
    STAGE
    GIT CI

    View Slide

  95. netlify Serving for the win Render Conference, 2018 @philhawksworth

    View Slide

  96. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DEV
    PROD
    STAGE
    GIT CI

    View Slide

  97. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DEV
    PROD
    LIVE
    GIT CI
    STAGE
    STAGE
    STAGE
    STAGE
    STAGE
    STAGE

    View Slide

  98. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DEV
    PROD
    LIVE
    GIT CI
    STAGE
    STAGE
    STAGE
    STAGE
    STAGE
    STAGE

    View Slide

  99. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DEMOS / DISCUSSIONS
    TESTS / ISSUES / SIGNOFF
    ALL HAPPENED AGAINST KNOWN VERSIONS

    View Slide

  100. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    ADDRESSABLE AND ACCESSIBLE
    BUILD VERSIONS ARE A HUGE WIN
    Lessons
    DECIDING WHEN AND WHAT TO TAG
    REQUIRES COORDINATION
    ATOMIC DEPLOYS TO PROD REMOVE
    UNCERTAINTY FROM LAUNCH DAY

    View Slide

  101. netlify Serving for the win Render Conference, 2018 @philhawksworth
    NETLIFY BUILDING NETLIFY
    Story three

    View Slide

  102. netlify Serving for the win Render Conference, 2018 @philhawksworth

    View Slide

  103. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    NETLIFY.COM IS A JAMSTACK
    SITE HOSTED ON NETLIFY USING
    NETLIFY TO NETLIFY NETLIFY

    View Slide

  104. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DEV
    PROD
    LIVE
    GIT CI
    STAGE
    STAGE
    STAGE
    STAGE
    STAGE
    STAGE

    View Slide

  105. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    DEV
    NETLIFY
    LIVE
    GIT
    CI
    STAGE
    STAGE
    STAGE
    CDN

    View Slide

  106. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    A GIT-BASED WORKFLOW
    ALL THE WAY TO PRODUCTION

    View Slide

  107. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    jamstack
    JAVASCRIPT / API / MARKUP

    View Slide

  108. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    APIs SITE
    (JAVASCRIPT)
    JAVASCRIPT
    MARKUP

    View Slide

  109. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    APIs SITE
    (JAVASCRIPT)
    JAVASCRIPT
    MARKUP

    View Slide

  110. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    BUILDS ARE BASED ON
    GIT COMMITS,

    SO WE HAVE HISTORY

    View Slide

  111. netlify Serving for the win Render Conference, 2018 @philhawksworth

    View Slide

  112. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    APIs SITE
    (JAVASCRIPT)
    JAVASCRIPT
    MARKUP

    View Slide

  113. netlify Serving for the win Render Conference, 2018 @philhawksworth

    View Slide

  114. netlify Serving for the win Render Conference, 2018 @philhawksworth

    View Slide

  115. netlify Serving for the win Render Conference, 2018 @philhawksworth

    View Slide

  116. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    APIs SITE
    (JAVASCRIPT)
    JAVASCRIPT
    MARKUP

    View Slide

  117. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    AUTOMATION BASED
    ON GIT ACTIVITY

    View Slide

  118. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    GENERATING PREVIEWS
    FROM PULL REQUESTS

    View Slide

  119. netlify Serving for the win Render Conference, 2018 @philhawksworth

    View Slide

  120. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    CONFIDENCE IN THE
    FUTURE STATE

    View Slide

  121. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    A/B TESTING

    View Slide

  122. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    A/B TESTING

    View Slide

  123. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    Lessons EMBRACING VERSION CONTROL
    CONVENTIONS REMOVES NEED TO
    REINVENT THEM
    REDUCED FRICTION BRINGS
    AGILITY AND CONFIDENCE
    JAMSTACK GOES BEYOND
    STATIC SITES

    View Slide

  124. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    FOR THE NEXT 30 MINUTES OR SO
    / WHERE DOES IT HURT?
    / 3 STORIES
    / MINDSETS AND RESOURCES

    View Slide

  125. netlify Serving for the win Render Conference, 2018 @philhawksworth
    RESOURCES
    CIRCLE CI JENKINS

    View Slide

  126. netlify Serving for the win Render Conference, 2018 @philhawksworth
    RESOURCES
    THENEWDYNAMIC.ORG JAMSTACK.ORG

    View Slide

  127. netlify Serving for the win Render Conference, 2018 @philhawksworth
    RESOURCES
    THEPOWEROFSERVERLESS.INFO HEADLESSCMS.ORG

    View Slide

  128. netlify Serving for the win Render Conference, 2018 @philhawksworth
    THEPOWEROFSERVERLESS.INFO

    View Slide

  129. netlify Serving for the win Render Conference, 2018 @philhawksworth
    MINDSETS

    View Slide

  130. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    EVERYTHING
    VERSION CONTROLFor

    View Slide

  131. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    EXPOSE THE RED LIGHTS

    View Slide

  132. Serving for the win Render Conference, 2018 @philhawksworth
    netlify

    View Slide

  133. Serving for the win Render Conference, 2018 @philhawksworth
    netlify

    View Slide

  134. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    1. MAKE IT SCRIPTED
    2. MAKE IT AUTOMATED
    3. MAKE IT REAL
    4. MAKE IT FIRST
    A NOTE ON DEPLOYMENT

    View Slide

  135. netlify Serving for the win Render Conference, 2018 @philhawksworth
    EXPECT TIMES
    OF CHAOS

    View Slide

  136. netlify Serving for the win Render Conference, 2018 @philhawksworth
    DON’T LET
    A LACK OF PROCESS
    BE WHAT CREATES IT

    View Slide

  137. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    IT’S AN AWFULLY FULL STACK
    A NOTE ON EXPERTISE

    View Slide

  138. Serving for the win Render Conference, 2018 @philhawksworth
    netlify
    USE THE SKILLS OF OTHERS
    A NOTE ON EXPERTISE

    View Slide

  139. netlify Serving for the win Render Conference, 2018 @philhawksworth
    BUILD BEAUTIFUL THINGS

    View Slide

  140. THANK YOU
    PHIL HAWKSWORTH
    HAWKSWORX.COM / TALKS / SERVE

    View Slide