Deploy Web-frontend app with BuildKit

Docker Meetup Tokyo #26 https://dockerjp.connpass.com/event/106358/

Transcript

1. ©2018 Wantedly, Inc. Deploy Web-frontend app with BuildKit our experimental deploy flow for web-frontend Docker Meetup Tokyo #26 21.Nov.2018 - @izumin5210
2. ©2018 Wantedly, Inc. izumin5210 Engineer at Wantedly, Inc. ‣ Wantedly People - Backend - Golang, Ruby, etc. - Web Frontend - Advisor, Reviewer, Frontend Ops, etc. ‣ Lead Gopher ʢ˞ࣗশʣ
   ‣ Wrote github.com/izumin5210/grapi
3. ©2018 Wantedly, Inc. ˞
   8FCϑϩϯτΤϯυͷ
 ා͍࿩͸΄ͱΜͲ ͠·ͤΜ
4. ©2018 Wantedly, Inc. Deploy flow Typical one in Wantedly
5. ©2018 Wantedly, Inc. Deploy flow Typical one in Wantedly  0QFO
   QVMMSFR
6. ©2018 Wantedly, Inc. Deploy flow Typical one in Wantedly .BOBHFE
   $*
   TFSWJDFT  0QFO
   QVMMSFR  )PPL  5FTUT
    EPDLFS
   CVJME
    EPDLFS
   QVTI
7. ©2018 Wantedly, Inc. Deploy flow Typical one in Wantedly .BOBHFE
   $*
   TFSWJDFT  0QFO
   QVMMSFR  )PPL  5FTUT
    EPDLFS
   CVJME
    EPDLFS
   QVTI  LVCFDUM
   TFU
   JNBHF
8. ©2018 Wantedly, Inc. Deploy flow Typical one in Wantedly .BOBHFE
   $*
   TFSWJDFT  0QFO
   QVMMSFR  )PPL  5FTUT
    EPDLFS
   CVJME
    EPDLFS
   QVTI  LVCFDUM
   TFU
   JNBHF env: # encrypted credentials here - secure: "..." install: # install `kube` - bash <(curl -sL https://...) script: - kube build deploy: - skip_cleanup: true provider: script script: kube prod deploy $TRAVIS_COMMIT on: branch: master
9. ©2018 Wantedly, Inc. Deploy flow Typical one in Wantedly .BOBHFE
   $*
   TFSWJDFT  0QFO
   QVMMSFR  )PPL  5FTUT
    EPDLFS
   CVJME
    EPDLFS
   QVTI  LVCFDUM
   TFU
   JNBHF env: # encrypted credentials here - secure: "..." install: # install `kube` - bash <(curl -sL https://...) script: - kube build deploy: - skip_cleanup: true provider: script script: kube prod deploy $TRAVIS_COMMIT on: branch: master LVCF
   JOIPVTF
   CVJME
   
   EFQMPZ
   UPPM
10. ©2018 Wantedly, Inc. Deploy flow From laptops .BOBHFE
    $*
    TFSWJDFT
11. ©2018 Wantedly, Inc. Deploy flow From laptops .BOBHFE
    $*
    TFSWJDFT kubectl set image
12. ©2018 Wantedly, Inc. Deploy flow From laptops .BOBHFE
    $*
    TFSWJDFT kubectl set image - kube deploy qa <branch_name> - kube prod rollback
13. ©2018 Wantedly, Inc. Deploy flow From laptops .BOBHFE
    $*
    TFSWJDFT kubectl set image - kube deploy qa <branch_name> - kube prod rollback Prod cluster QA cluster ... ...
14. ©2018 Wantedly, Inc. Deploy flow All services on k8s in Wantedly .BOBHFE
    $*
    TFSWJDFT  0QFO
    QVMMSFR  )PPL  5FTUT
     EPDLFS
    CVJME
     EPDLFS
    QVTI  LVCFDUM
    TFU
    JNBHF All services on k8s ‣ 70 various sizes of microsevices ‣ Engineers operate services through `kube` command - deploy, rollback, tail logs, ... ‣ We have a cluster for each environment - Production, QA, ...
15. ©2018 Wantedly, Inc. Deploy flow All services on k8s in Wantedly .BOBHFE
    $*
    TFSWJDFT  0QFO
    QVMMSFR  )PPL  5FTUT
     EPDLFS
    CVJME
     EPDLFS
    QVTI  LVCFDUM
    TFU
    JNBHF All services on k8s ‣ 70 various sizes of microsevices ‣ Engineers operate services through `kube` command - deploy, rollback, tail logs, ... ‣ We have a cluster for each environment - Production, QA, ... Prod cluster QA cluster ... ...
16. ©2018 Wantedly, Inc. Architecture /PEFKT
    
    XFC
    TFSWFS
    IUUQTQFPQMFXBOUFEMZDPN
17. ©2018 Wantedly, Inc. Architecture /PEFKT
    
    XFC
    TFSWFS
    IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU
18. ©2018 Wantedly, Inc. Architecture /PEFKT
    
    XFC
    TFSWFS
    IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU JOEFYIUNM
19. ©2018 Wantedly, Inc. Architecture /PEFKT
    
    XFC
    TFSWFS
    IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU JOEFYIUNM 3FRVFTU
    BTTFUT
20. ©2018 Wantedly, Inc. Architecture /PEFKT
    
    XFC
    TFSWFS
    IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU JOEFYIUNM 3FRVFTU
    BTTFUT
21. ©2018 Wantedly, Inc. Architecture /PEFKT
    
    XFC
    TFSWFS
    IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU JOEFYIUNM 3FRVFTU
    BTTFUT
22. ©2018 Wantedly, Inc. Architecture /PEFKT
    
    XFC
    TFSWFS
    IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU JOEFYIUNM 3FRVFTU
    BTTFUT
23. ©2018 Wantedly, Inc. Architecture /PEFKT
    
    XFC
    TFSWFS
    IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU JOEFYIUNM "TTFUT
     KT
    DTT
    KQH
    FUD
     &BDI
    GJMFOBNF
    IBT
    IBTI
 FH
    main.bb4195e0.js 3FRVFTU
    BTTFUT ,4
    /PEFKT
    TFSWFS
    EJTUSJCVUFT
    POMZ
    JOEFYIUNM
24. ©2018 Wantedly, Inc. Architecture /PEFKT
    
    XFC
    TFSWFS
    IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU JOEFYIUNM "TTFUT
     KT
    DTT
    KQH
    FUD
     &BDI
    GJMFOBNF
    IBT
    IBTI
 FH
    main.bb4195e0.js 3FRVFTU
    BTTFUT ,4
    /PEFKT
    TFSWFS
    EJTUSJCVUFT
    POMZ
    JOEFYIUNM Too much? ‣ ੩తϑΝΠϧͷ഑৴͚ͩͳΒ
    4
    
    $MPVEGSPOU
    ͚ͩͰ΋ྑ͍ʁ
    ‣ ͋ͱͰϦονͳ͜ͱΛͨ͘͠ͳΔ͔΋ʁ
     FH
    4FSWFS
    4JEF
    3FOEFSJOH
    ‣ ͲΜͳߏ੒Ͱ΋ɼσϓϩΠϑϩʔͷҰ؏ੑ͸ॏཁ
     ϓϩμΫτ։ൃͯ͠Δଆ͕༨ܭͳ͜ͱΛ
 ஌Βͳ͍͍ͯ͘Πϯϑϥ
    ݸਓతͳҙݟͰ͢
25. ©2018 Wantedly, Inc. ؀ڥม਺ͷಡΈग़͠ ‣ #BDLFOE
     ΞϓϦέʔγϣϯىಈ࣌ʹಡΈࠐ·ΕΔ %JGGFSFODFT
    CX
    #BDLFOE
    
    8FC'SPOUFOE
26. ©2018 Wantedly, Inc. ؀ڥม਺ͷಡΈग़͠ ‣ #BDLFOE
     ΞϓϦέʔγϣϯىಈ࣌ʹಡΈࠐ·ΕΔ ‣ 8FC
    'SPOUFOE
     Ϗϧυ࣌ʹಡΈࠐ·ΕΔ
     ΞϓϦέʔγϣϯίʔυ͸Ϣʔβ͔Βݟ͑Δ %JGGFSFODFT
    CX
    #BDLFOE
    
    8FC'SPOUFOE
27. ©2018 Wantedly, Inc. ؀ڥม਺ͷಡΈग़͠ ‣ #BDLFOE
     ΞϓϦέʔγϣϯىಈ࣌ʹಡΈࠐ·ΕΔ ‣ 8FC
    'SPOUFOE
     Ϗϧυ࣌ʹಡΈࠐ·ΕΔ
     ΞϓϦέʔγϣϯίʔυ͸Ϣʔβ͔Βݟ͑Δ %JGGFSFODFT
    CX
    #BDLFOE
    
    8FC'SPOUFOE ؀ڥ͝ͱʹϏϧυΛ෼͚͍ͨ
    ‣ FH
    ຊ൪༻KT
    ʹ
    2"
    ͷ
    63-
    ͸ೖΕͨ͘ͳ͍
    ‣ ҰํͰɼϏϧυͷϙʔλϏϦςΟ͸ҡ͍࣋ͨ͠
 ʢखݩͰ΋
    ALVCF
    CVJMEA
    Ͱຊ൪Πϝʔδ͕࡞ΕΔੈքʣ
30. ©2018 Wantedly, Inc. 
    TFD
    
    
    PG
    &OWT
    ੜޙϲ݄ͷϓϩδΣΫτ
    .BD#PPL
    1SP
    ্ͰίϨͳͷͰɼ$*
    ্ͩͱʜ
31. ©2018 Wantedly, Inc. ฒྻʹϏϧυ͍ͨ͠ʜ ͦΕͧΕͷϏϧυ͸ґଘؔ܎ʹͳ͍͸ͣͳͷͰɼฒྻԽ͢Δͱ଎͘ͳΔ͔΋
32. ©2018 Wantedly, Inc.
    #VJME,JU
    ͜͜·ͰͷൃදͰ࿩͞ΕͯΔ͸ͣͳͷͰɼৄࡉ͸ׂѪ
33. ©2018 Wantedly, Inc. Base Prod QA Server Setup stage Build stage(s) Server stage Install dependencies Build frontend app for each env Gather built apps from prev stages Build web server
34. # Build base #----------------------------------------------- FROM node:10.12.0-alpine as base RUN mkdir /app WORKDIR /app COPY ./package.json /app COPY ./yarn.lock /app RUN yarn COPY ./src /app/src COPY ./public /app/public COPY ./tsconfig*.json /app/ COPY ./tslint.json /app/ RUN rm ./.env* ‣ Setup stage ‣ ґଘؔ܎ͷΠϯετʔϧ͸͜͜Ͱ΍ͬͯɼ
 ޙΖͷεςʔδʹҾ͖ܧ͙
35. # Build for qa #----------------------------------------------- FROM node:10.12.0-alpine as qa ENV NODE_ENV qa COPY --from=base /app /app COPY ./.env.qa /app/.env WORKDIR /app RUN yarn build # Build for production #----------------------------------------------- FROM node:10.12.0-alpine as prod ENV NODE_ENV production COPY --from=base /app /app COPY ./.env.production /app/.env ‣ Build stage ‣ લεςʔδͰΠϯετʔϧͨͨ͠͠ґଘ
 ʢOPEF@NPEVMFTʣΛίϐʔͯ͘͠Δ
    ‣ ͕͜͜ίϐϖʹͳΓ͕ͪͳͷ͕ͭΒ͍ʜ
36. # Build for Node.js server #----------------------------------------------- FROM node:10.12.0-alpine as node # Timezone ENV TIMEZONE Asia/Tokyo RUN apk add --no-cache --update tzdata \ && ln -sf /usr/share/zoneinfo/$TIMEZONE /etc/localtime # Tini - to handle stop signal RUN apk add --no-cache --update tini # yarn RUN apk add --no-cache --update yarn WORKDIR /app COPY ./server/package.json /app/ COPY ./server/yarn.lock /app/ ‣ Final stage ‣ σϓϩΠ͞ΕΔΠϝʔδ
    ‣ αʔόΞϓϦέʔγϣϯΛಈ͔ͨ͢Ίͷ
 ґଘͷΠϯετʔϧ͕ඞཁ
37. RUN apk add --no-cache --update tini # yarn RUN apk add --no-cache --update yarn WORKDIR /app COPY ./server/package.json /app/ COPY ./server/yarn.lock /app/ RUN yarn --production COPY ./server /app/server COPY --from=qa /app/build/* /app/dist/qa/ COPY --from=prod /app/build/* /app/dist/production/ WORKDIR /app/server ENTRYPOINT ["/sbin/tini", "--"] CMD ["yarn", "start"] ‣ Final stage ‣ Ϗϧυ੒Ռ෺Λલεςʔδ͔Βίϐʔ
    ‣ ͋ͱ͸ී௨ͷʢʁʣ
    8FC
    αʔό
38. ©2018 Wantedly, Inc. 1.4x faster
39. ©2018 Wantedly, Inc. 1.4x faster ʢࢥͬͨΑΓߴ଎ʹͳΒͳ͔ͬͨʣ
40. ©2018 Wantedly, Inc. 0.28x... slower
41. ©2018 Wantedly, Inc. ‣ ૣ͘ͳͬͨͷ͸
    AZBSOAʢґଘؔ܎ͷΠϯετʔϧʣ͕ฒྻԽͰ͖ͨͷ͕େ͖͍ʁ
     XFCGSPOUFOE
    ͷ
    AZBSOA
    ͱ
    OPEFKT
    TFSWFS
    ͷ
    AZBSOA
    ͕ฒྻʹग़དྷͨ
     Ϗϧυࣗମ͸
    T
    
    ௚ྻ
    ͕
    T
    ͷฒྻʹͳ͚ͬͨͩͳͷͰɼӨڹ͸ͳͦ͞͏ Discussion
    ܭଌͤͣਪଌͰݴͬͯΔͷͰɼશવӕ͔΋͠Εͳ͍
42. ©2018 Wantedly, Inc. ‣ ૣ͘ͳͬͨͷ͸
    AZBSOAʢґଘؔ܎ͷΠϯετʔϧʣ͕ฒྻԽͰ͖ͨͷ͕େ͖͍ʁ
     XFCGSPOUFOE
    ͷ
    AZBSOA
    ͱ
    OPEFKT
    TFSWFS
    ͷ
    AZBSOA
    ͕ฒྻʹग़དྷͨ
     Ϗϧυࣗମ͸
    T
    
    ௚ྻ
    ͕
    T
    ͷฒྻʹͳ͚ͬͨͩͳͷͰɼӨڹ͸ͳͦ͞͏ ‣ AXFCQBDLA
    ͸
    *0
    ΑΓ
    $16
    PS
    NFNPSZ
    CPVOE
    ͳ͸ͣ
     Ϛγϯύϫʔ͕଍Γͳ͍ͷ͔΋ʁ Discussion
    ܭଌͤͣਪଌͰݴͬͯΔͷͰɼશવӕ͔΋͠Εͳ͍
43. ©2018 Wantedly, Inc. ‣ ૣ͘ͳͬͨͷ͸
    AZBSOAʢґଘؔ܎ͷΠϯετʔϧʣ͕ฒྻԽͰ͖ͨͷ͕େ͖͍ʁ
     XFCGSPOUFOE
    ͷ
    AZBSOA
    ͱ
    OPEFKT
    TFSWFS
    ͷ
    AZBSOA
    ͕ฒྻʹग़དྷͨ
     Ϗϧυࣗମ͸
    T
    
    ௚ྻ
    ͕
    T
    ͷฒྻʹͳ͚ͬͨͩͳͷͰɼӨڹ͸ͳͦ͞͏ ‣ AXFCQBDLA
    ͸
    *0
    ΑΓ
    $16
    PS
    NFNPSZ
    CPVOE
    ͳ͸ͣ
     Ϛγϯύϫʔ͕଍Γͳ͍ͷ͔΋ʁ ‣ MBZFS
    DBDIJOH
    ͕ޮ͔ͳ͍
    $*
    ͩͬͨ
     ͔ͤͬ͘Ωϟογϡޮ཰্͕͕ͬͨͷΛ׆͔͖͠Ε͍ͯͳ͍ Discussion
    ܭଌͤͣਪଌͰݴͬͯΔͷͰɼશવӕ͔΋͠Εͳ͍
44. ©2018 Wantedly, Inc. ‣ ૣ͘ͳͬͨͷ͸
    AZBSOAʢґଘؔ܎ͷΠϯετʔϧʣ͕ฒྻԽͰ͖ͨͷ͕େ͖͍ʁ
     XFCGSPOUFOE
    ͷ
    AZBSOA
    ͱ
    OPEFKT
    TFSWFS
    ͷ
    AZBSOA
    ͕ฒྻʹग़དྷͨ
     Ϗϧυࣗମ͸
    T
    
    ௚ྻ
    ͕
    T
    ͷฒྻʹͳ͚ͬͨͩͳͷͰɼӨڹ͸ͳͦ͞͏ ‣ AXFCQBDLA
    ͸
    *0
    ΑΓ
    $16
    PS
    NFNPSZ
    CPVOE
    ͳ͸ͣ
     Ϛγϯύϫʔ͕଍Γͳ͍ͷ͔΋ʁ ‣ MBZFS
    DBDIJOH
    ͕ޮ͔ͳ͍
    $*
    ͩͬͨ
     ͔ͤͬ͘Ωϟογϡޮ཰্͕͕ͬͨͷΛ׆͔͖͠Ε͍ͯͳ͍ ʮϚγϯύϫʔΛࢦఆͰ͖ΔʯʮMBZFS
    DBDIJOH
    ͕༗ޮʯͳ
    $*
    ͩͱߋʹΑ͘ͳΔ͔΋ʢFH
    $JSDMF$*ʣ Discussion
    ܭଌͤͣਪଌͰݴͬͯΔͷͰɼશવӕ͔΋͠Εͳ͍