Deploy Web-frontend app with BuildKit

Deploy Web-frontend app with BuildKit

9eed44f137609e6ce3b6f1e14f80b9e1?s=128

Masayuki Izumi

November 21, 2018
Tweet

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 

    0QFOQVMMSFR
  6. ©2018 Wantedly, Inc. Deploy flow Typical one in Wantedly .BOBHFE$*TFSWJDFT

     0QFOQVMMSFR  )PPL  5FTUT  EPDLFSCVJME  EPDLFSQVTI
  7. ©2018 Wantedly, Inc. Deploy flow Typical one in Wantedly .BOBHFE$*TFSWJDFT

     0QFOQVMMSFR  )PPL  5FTUT  EPDLFSCVJME  EPDLFSQVTI  LVCFDUMTFUJNBHF
  8. ©2018 Wantedly, Inc. Deploy flow Typical one in Wantedly .BOBHFE$*TFSWJDFT

     0QFOQVMMSFR  )PPL  5FTUT  EPDLFSCVJME  EPDLFSQVTI  LVCFDUMTFUJNBHF 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

     0QFOQVMMSFR  )PPL  5FTUT  EPDLFSCVJME  EPDLFSQVTI  LVCFDUMTFUJNBHF 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 LVCFJOIPVTFCVJMEEFQMPZUPPM
  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  0QFOQVMMSFR  )PPL  5FTUT  EPDLFSCVJME  EPDLFSQVTI  LVCFDUMTFUJNBHF 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  0QFOQVMMSFR  )PPL  5FTUT  EPDLFSCVJME  EPDLFSQVTI  LVCFDUMTFUJNBHF 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 /PEFKTXFCTFSWFS IUUQTQFPQMFXBOUFEMZDPN

  17. ©2018 Wantedly, Inc. Architecture /PEFKTXFCTFSWFS IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU

  18. ©2018 Wantedly, Inc. Architecture /PEFKTXFCTFSWFS IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU JOEFYIUNM

  19. ©2018 Wantedly, Inc. Architecture /PEFKTXFCTFSWFS IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU JOEFYIUNM 3FRVFTUBTTFUT

  20. ©2018 Wantedly, Inc. Architecture /PEFKTXFCTFSWFS IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU JOEFYIUNM 3FRVFTUBTTFUT

  21. ©2018 Wantedly, Inc. Architecture /PEFKTXFCTFSWFS IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU JOEFYIUNM 3FRVFTUBTTFUT

  22. ©2018 Wantedly, Inc. Architecture /PEFKTXFCTFSWFS IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU JOEFYIUNM 3FRVFTUBTTFUT

  23. ©2018 Wantedly, Inc. Architecture /PEFKTXFCTFSWFS IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU JOEFYIUNM "TTFUT 

    KT  DTT  KQH FUD  &BDIGJMFOBNFIBTIBTI
 FHmain.bb4195e0.js 3FRVFTUBTTFUT ,4 /PEFKTTFSWFS EJTUSJCVUFTPOMZJOEFYIUNM
  24. ©2018 Wantedly, Inc. Architecture /PEFKTXFCTFSWFS IUUQTQFPQMFXBOUFEMZDPN 3FRVFTU JOEFYIUNM "TTFUT 

    KT  DTT  KQH FUD  &BDIGJMFOBNFIBTIBTI
 FHmain.bb4195e0.js 3FRVFTUBTTFUT ,4 /PEFKTTFSWFS EJTUSJCVUFTPOMZJOEFYIUNM Too much? ‣ ੩తϑΝΠϧͷ഑৴͚ͩͳΒ4 $MPVEGSPOU͚ͩͰ΋ྑ͍ʁ ‣ ͋ͱͰϦονͳ͜ͱΛͨ͘͠ͳΔ͔΋ʁ  FH4FSWFS4JEF3FOEFSJOH ‣ ͲΜͳߏ੒Ͱ΋ɼσϓϩΠϑϩʔͷҰ؏ੑ͸ॏཁ  ϓϩμΫτ։ൃͯ͠Δଆ͕༨ܭͳ͜ͱΛ
 ஌Βͳ͍͍ͯ͘Πϯϑϥ ݸਓతͳҙݟͰ͢
  25. ©2018 Wantedly, Inc. ؀ڥม਺ͷಡΈग़͠ ‣ #BDLFOE  ΞϓϦέʔγϣϯىಈ࣌ʹಡΈࠐ·ΕΔ %JGGFSFODFTCX#BDLFOE8FC'SPOUFOE

  26. ©2018 Wantedly, Inc. ؀ڥม਺ͷಡΈग़͠ ‣ #BDLFOE  ΞϓϦέʔγϣϯىಈ࣌ʹಡΈࠐ·ΕΔ ‣ 8FC'SPOUFOE

     Ϗϧυ࣌ʹಡΈࠐ·ΕΔ  ΞϓϦέʔγϣϯίʔυ͸Ϣʔβ͔Βݟ͑Δ %JGGFSFODFTCX#BDLFOE8FC'SPOUFOE
  27. ©2018 Wantedly, Inc. ؀ڥม਺ͷಡΈग़͠ ‣ #BDLFOE  ΞϓϦέʔγϣϯىಈ࣌ʹಡΈࠐ·ΕΔ ‣ 8FC'SPOUFOE

     Ϗϧυ࣌ʹಡΈࠐ·ΕΔ  ΞϓϦέʔγϣϯίʔυ͸Ϣʔβ͔Βݟ͑Δ %JGGFSFODFTCX#BDLFOE8FC'SPOUFOE ؀ڥ͝ͱʹϏϧυΛ෼͚͍ͨ ‣ FHຊ൪༻KTʹ2"ͷ63-͸ೖΕͨ͘ͳ͍ ‣ ҰํͰɼϏϧυͷϙʔλϏϦςΟ͸ҡ͍࣋ͨ͠
 ʢखݩͰ΋ALVCFCVJMEAͰຊ൪Πϝʔδ͕࡞ΕΔੈքʣ
  28. None
  29. None
  30. ©2018 Wantedly, Inc. TFD  PG&OWT  ੜޙϲ݄ͷϓϩδΣΫτ .BD#PPL1SP্ͰίϨͳͷͰɼ$*্ͩͱʜ

  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ͱOPEFKTTFSWFSͷAZBSOA͕ฒྻʹग़དྷͨ  Ϗϧυࣗମ͸T ௚ྻ͕Tͷฒྻʹͳ͚ͬͨͩͳͷͰɼӨڹ͸ͳͦ͞͏

    Discussion ܭଌͤͣਪଌͰݴͬͯΔͷͰɼશવӕ͔΋͠Εͳ͍
  42. ©2018 Wantedly, Inc. ‣ ૣ͘ͳͬͨͷ͸AZBSOAʢґଘؔ܎ͷΠϯετʔϧʣ͕ฒྻԽͰ͖ͨͷ͕େ͖͍ʁ  XFCGSPOUFOEͷAZBSOAͱOPEFKTTFSWFSͷAZBSOA͕ฒྻʹग़དྷͨ  Ϗϧυࣗମ͸T ௚ྻ͕Tͷฒྻʹͳ͚ͬͨͩͳͷͰɼӨڹ͸ͳͦ͞͏

    ‣ AXFCQBDLA͸*0ΑΓ$16PSNFNPSZCPVOEͳ͸ͣ  Ϛγϯύϫʔ͕଍Γͳ͍ͷ͔΋ʁ Discussion ܭଌͤͣਪଌͰݴͬͯΔͷͰɼશવӕ͔΋͠Εͳ͍
  43. ©2018 Wantedly, Inc. ‣ ૣ͘ͳͬͨͷ͸AZBSOAʢґଘؔ܎ͷΠϯετʔϧʣ͕ฒྻԽͰ͖ͨͷ͕େ͖͍ʁ  XFCGSPOUFOEͷAZBSOAͱOPEFKTTFSWFSͷAZBSOA͕ฒྻʹग़དྷͨ  Ϗϧυࣗମ͸T ௚ྻ͕Tͷฒྻʹͳ͚ͬͨͩͳͷͰɼӨڹ͸ͳͦ͞͏

    ‣ AXFCQBDLA͸*0ΑΓ$16PSNFNPSZCPVOEͳ͸ͣ  Ϛγϯύϫʔ͕଍Γͳ͍ͷ͔΋ʁ ‣ MBZFSDBDIJOH͕ޮ͔ͳ͍$*ͩͬͨ  ͔ͤͬ͘Ωϟογϡޮ཰্͕͕ͬͨͷΛ׆͔͖͠Ε͍ͯͳ͍ Discussion ܭଌͤͣਪଌͰݴͬͯΔͷͰɼશવӕ͔΋͠Εͳ͍
  44. ©2018 Wantedly, Inc. ‣ ૣ͘ͳͬͨͷ͸AZBSOAʢґଘؔ܎ͷΠϯετʔϧʣ͕ฒྻԽͰ͖ͨͷ͕େ͖͍ʁ  XFCGSPOUFOEͷAZBSOAͱOPEFKTTFSWFSͷAZBSOA͕ฒྻʹग़དྷͨ  Ϗϧυࣗମ͸T ௚ྻ͕Tͷฒྻʹͳ͚ͬͨͩͳͷͰɼӨڹ͸ͳͦ͞͏

    ‣ AXFCQBDLA͸*0ΑΓ$16PSNFNPSZCPVOEͳ͸ͣ  Ϛγϯύϫʔ͕଍Γͳ͍ͷ͔΋ʁ ‣ MBZFSDBDIJOH͕ޮ͔ͳ͍$*ͩͬͨ  ͔ͤͬ͘Ωϟογϡޮ཰্͕͕ͬͨͷΛ׆͔͖͠Ε͍ͯͳ͍ ʮϚγϯύϫʔΛࢦఆͰ͖ΔʯʮMBZFSDBDIJOH͕༗ޮʯͳ$*ͩͱߋʹΑ͘ͳΔ͔΋ʢFH$JSDMF$*ʣ Discussion ܭଌͤͣਪଌͰݴͬͯΔͷͰɼશવӕ͔΋͠Εͳ͍