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

Deploy Web-frontend app with BuildKit

Deploy Web-frontend app with BuildKit

Masayuki Izumi

November 21, 2018
Tweet

More Decks by Masayuki Izumi

Other Decks in Programming

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

    View full-size slide

  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

    View full-size slide

  3. ©2018 Wantedly, Inc.
    ˞8FCϑϩϯτΤϯυͷ

    ා͍࿩͸΄ͱΜͲ
    ͠·ͤΜ

    View full-size slide

  4. ©2018 Wantedly, Inc.
    Deploy flow Typical one in Wantedly

    View full-size slide

  5. ©2018 Wantedly, Inc.
    Deploy flow Typical one in Wantedly
    0QFOQVMMSFR

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  10. ©2018 Wantedly, Inc.
    Deploy flow From laptops
    .BOBHFE$*TFSWJDFT

    View full-size slide

  11. ©2018 Wantedly, Inc.
    Deploy flow From laptops
    .BOBHFE$*TFSWJDFT
    kubectl set image

    View full-size slide

  12. ©2018 Wantedly, Inc.
    Deploy flow From laptops
    .BOBHFE$*TFSWJDFT
    kubectl set image
    - kube deploy qa
    - kube prod rollback

    View full-size slide

  13. ©2018 Wantedly, Inc.
    Deploy flow From laptops
    .BOBHFE$*TFSWJDFT
    kubectl set image
    - kube deploy qa
    - kube prod rollback
    Prod cluster QA cluster ...
    ...

    View full-size slide

  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, ...

    View full-size slide

  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 ...
    ...

    View full-size slide

  16. ©2018 Wantedly, Inc.
    Architecture
    /PEFKTXFCTFSWFS
    IUUQTQFPQMFXBOUFEMZDPN

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. ©2018 Wantedly, Inc.
    Architecture
    /PEFKTXFCTFSWFS
    IUUQTQFPQMFXBOUFEMZDPN
    3FRVFTU
    JOEFYIUNM
    "TTFUT
    KT DTT KQH FUD
    &BDIGJMFOBNFIBTIBTI

    FHmain.bb4195e0.js

    3FRVFTUBTTFUT
    ,4 /PEFKTTFSWFS
    EJTUSJCVUFTPOMZJOEFYIUNM

    View full-size slide

  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
    ‣ ͲΜͳߏ੒Ͱ΋ɼσϓϩΠϑϩʔͷҰ؏ੑ͸ॏཁ
    ϓϩμΫτ։ൃͯ͠Δଆ͕༨ܭͳ͜ͱΛ

    ஌Βͳ͍͍ͯ͘Πϯϑϥ
    ݸਓతͳҙݟͰ͢

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. ©2018 Wantedly, Inc.
    ؀ڥม਺ͷಡΈग़͠
    ‣ #BDLFOE
    ΞϓϦέʔγϣϯىಈ࣌ʹಡΈࠐ·ΕΔ
    ‣ 8FC'SPOUFOE
    Ϗϧυ࣌ʹಡΈࠐ·ΕΔ
    ΞϓϦέʔγϣϯίʔυ͸Ϣʔβ͔Βݟ͑Δ
    %JGGFSFODFTCX#BDLFOE8FC'SPOUFOE
    ؀ڥ͝ͱʹϏϧυΛ෼͚͍ͨ
    ‣ FHຊ൪༻KTʹ2"ͷ63-͸ೖΕͨ͘ͳ͍
    ‣ ҰํͰɼϏϧυͷϙʔλϏϦςΟ͸ҡ͍࣋ͨ͠

    ʢखݩͰ΋ALVCFCVJMEAͰຊ൪Πϝʔδ͕࡞ΕΔੈքʣ

    View full-size slide

  28. ©2018 Wantedly, Inc.
    TFD PG&OWT

    ੜޙϲ݄ͷϓϩδΣΫτ
    .BD#PPL1SP্ͰίϨͳͷͰɼ$*্ͩͱʜ

    View full-size slide

  29. ©2018 Wantedly, Inc.
    ฒྻʹϏϧυ͍ͨ͠ʜ
    ͦΕͧΕͷϏϧυ͸ґଘؔ܎ʹͳ͍͸ͣͳͷͰɼฒྻԽ͢Δͱ଎͘ͳΔ͔΋

    View full-size slide

  30. ©2018 Wantedly, Inc.
    #VJME,JU
    ͜͜·ͰͷൃදͰ࿩͞ΕͯΔ͸ͣͳͷͰɼৄࡉ͸ׂѪ

    View full-size slide

  31. ©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

    View full-size slide

  32. # 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
    ‣ ґଘؔ܎ͷΠϯετʔϧ͸͜͜Ͱ΍ͬͯɼ

    ޙΖͷεςʔδʹҾ͖ܧ͙

    View full-size slide

  33. # 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ʣΛίϐʔͯ͘͠Δ
    ‣ ͕͜͜ίϐϖʹͳΓ͕ͪͳͷ͕ͭΒ͍ʜ

    View full-size slide

  34. # 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
    ‣ σϓϩΠ͞ΕΔΠϝʔδ
    ‣ αʔόΞϓϦέʔγϣϯΛಈ͔ͨ͢Ίͷ

    ґଘͷΠϯετʔϧ͕ඞཁ

    View full-size slide

  35. 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αʔό

    View full-size slide

  36. ©2018 Wantedly, Inc.
    1.4x faster

    View full-size slide

  37. ©2018 Wantedly, Inc.
    1.4x faster
    ʢࢥͬͨΑΓߴ଎ʹͳΒͳ͔ͬͨʣ

    View full-size slide

  38. ©2018 Wantedly, Inc.
    0.28x... slower

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide