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

ソースコードを快適に引き継いでいくためにやりたいこと/jtf2021w-f5-hassaku-building-development-environment-with-docker-and-vscode

hassaku63
January 24, 2021

 ソースコードを快適に引き継いでいくためにやりたいこと/jtf2021w-f5-hassaku-building-development-environment-with-docker-and-vscode

July Tech Festa 2021 Winter - Session F5

https://techfesta.connpass.com/event/193966/

hassaku63

January 24, 2021
Tweet

More Decks by hassaku63

Other Decks in Programming

Transcript

  1. ιʔείʔυΛշదʹҾ͖ܧ͍Ͱ͍ͨ͘Ίʹ
    ΍Γ͍ͨ͜ͱ
    @hassaku
    July Tech Festa 2021 Winter (2021.01.24) #JTF2021w_f
    - ίϯςφͱ VSCode Λ࢖ͬͯ։ൃ؀ڥΛշదʹ͢Δ -

    View Slide

  2. ࠓ೔࿩͍ͨ͜͠ͱ
    • VSCode ͱίϯςφΛ࢖ͬͯ։ൃ؀ڥΛշదʹ͍ͨ͠
    • ϩʔΧϧͰಈ͔ͤΔ։ൃ؀ڥΛखʹೖΕΔ
    • ͦͷଞɺVSCode ͰೖΕ͍ͯΔઃఆͷ࿩

    View Slide

  3. hassaku (twitter: @hassaku_63)
    Serverworks Co., Ltd.
    ࣾ಺SE

    View Slide

  4. Interested in:
    • AWS CDK
    • Serverless
    • Python
    • TypeScript

    View Slide

  5. ࣮ફ AWS CDK - TypeScript Ͱ
    Πϯϑϥ΋ΞϓϦ΋ʂ
    https://booth.pm/ja/items/1881928
    2020.03 - 2020.04

    ٕज़ॻయ Ԡԉࡇ (ٕज़ॻయ8)

    View Slide

  6. Agenda
    1. ॱௐʹҾ͖ܧ͛ͳ͔ͬͨࢥ͍ग़
    2. “ִ཭͞Εͨ” ։ൃ؀ڥ
    3. Docker Componse
    4. VSCode Remote Container

    View Slide

  7. ॱௐʹҾ͖ܧ͛ͳ͔ͬͨࢥ͍ग़
    ※લϑϦɻϑΟΫγϣϯͰ͢

    View Slide

  8. ͋Δ೔ͷʢՍۭʣ
    ࣾ಺SE
    ࠓ೔͔ΒอकΑΖ͘͠Ͷ
    ػೳվमͱόάใࠂ΋དྷͯΔ͔Β
    ͳΔ͸΍ͰΑΖ͘͠ͶɻͳΔ͸΍Ͱ

    View Slide

  9. Կ͔ΒΩϟονΞοϓ͢Δʁ
    1. ۓٸੑ·ͨ͸ॏཁ౓ͷߴ͍ Issue ͷ֬ೝ
    2. ΞϓϦέʔγϣϯͷ೺Ѳ
    1. υΩϡϝϯςʔγϣϯͷॴࡏ
    2. ߏ੒ɺιʔεͷཧղ
    3. σϓϩΠํ๏ͷ֬ೝ
    4. ؂ࢹܥͷ࢓૊Έͷ༗ແ
    3. ݕূ؀ڥͷௐୡ

    View Slide

  10. ΞϓϦέʔγϣϯͷ೺Ѳ
    ԿΛ೺Ѳ͢Δ͔ʁ
    • શମߏ੒ਤ
    • ґଘؔ܎ʢ֎෦αʔϏεʗύοέʔδʣ
    • ΞϓϦʗϞδϡʔϧߏ੒
    • ओཁͳϢʔεέʔε

    View Slide

  11. ΞϓϦέʔγϣϯͷ೺Ѳ
    Ͳ͏΍ͬͯ೺Ѳ͢Δ͔ʁ
    • υΩϡϝϯςʔγϣϯͷॴࡏΛ֬ೝ
    • ιʔεͷ֬ೝ
    • ϑϨʔϜϫʔΫ౳ͷґଘؔ܎
    • σΟϨΫτϦߏ੒
    • ݕূ؀ڥΛ༻ҙͯ͠ಈ͔ͯ͠ΈΔ

    View Slide

  12. ΞϓϦέʔγϣϯͷ೺Ѳ
    Ͳ͏΍ͬͯ೺Ѳ͢Δ͔ʁ
    • υΩϡϝϯςʔγϣϯͷॴࡏΛ֬ೝ
    • ιʔεͷ֬ೝ
    • ϑϨʔϜϫʔΫ౳ͷґଘؔ܎
    • σΟϨΫτϦߏ੒
    • ݕূ؀ڥΛ༻ҙͯ͠ಈ͔ͯ͠ΈΔ

    View Slide

  13. ʮಈ͔ͯ͠ΈΔʯ͜ͱͷ೉͠͞
    • ͜Ε͕Ͱ͖Δͱ৭ʑḿΔɻ͘͢͝ḿΔ
    • ಈ࡞ͷΠϝʔδΛ͔ͭΈ΍͍͢
    • ڍಈͷ࠶ݱݕূΛ͠΍͘͢ͳΔ
    • ֎෦Өڹ͕೺ѲͰ͖ͳ͍͏ͪ͸ᷖᮣʹಈ͔ͤͳ͍
    • ຊ൪؀ڥͷ֎෦αʔϏεΛݺͼग़ͯ͠͠·͏͔΋ʁ
    • σʔλετΞͷ໰୊
    • ͋Δఔ౓ͷσʔλ͕ͳ͍ͱ࣮ࡍͷڍಈʹ͍ۙಈ࡞͕ݟ͑ͳ͍
    • ݕূதʹॻ͖׵͑ͨσʔλͷ෭࡞༻Ͱ࠶ݱੑ͕औΕͳ͘ͳΔ
    • ্هΛΫϦΞͯ͠΋ɺʮͪΌΜͱʯಈ͔͢·Ͱʹ͸ϋʔυϧ͕͋Δ
    • ʁʁʁʮಈ͘͸ͣͳͷʹɺͳΜ͔ݟ஌Β͵Τϥʔ͕ग़ͯࢭ·ͬͯ͠·͏ΜͰ͚͢Ͳɾɾɾʯ
    • ϩʔΧϧPCʹطʹೖ͍ͬͯΔґଘؔ܎ͷ໰୊ɻωΠςΟϒϥΠϒϥϦͳͲ
    • ్தͰݕূ໨తͰΠϯετʔϧ͍ͯͨ͠ʢຊདྷෆཁͳʣґଘؔ܎ͷ͍ͤͰඍົʹ؀ڥࠩҟ͕͋ͬͨ

    View Slide

  14. • ͜Ε͕Ͱ͖Δͱ৭ʑḿΔɻ͘͢͝ḿΔ
    • ಈ࡞ͷΠϝʔδΛ͔ͭΈ΍͍͢
    • ڍಈͷ࠶ݱݕূΛ͠΍͘͢ͳΔ
    • ֎෦Өڹ͕೺ѲͰ͖ͳ͍͏ͪ͸ᷖᮣʹಈ͔ͤͳ͍
    • ຊ൪؀ڥͷ֎෦αʔϏεΛݺͼग़ͯ͠͠·͏͔΋ʁ
    • σʔλετΞͷ໰୊
    • ͋Δఔ౓ͷσʔλ͕ͳ͍ͱ࣮ࡍͷڍಈʹ͍ۙಈ࡞͕ݟ͑ͳ͍
    • ݕূதʹॻ͖׵͑ͨσʔλͷ෭࡞༻Ͱ࠶ݱੑ͕औΕͳ͘ͳΔ
    • ্هΛΫϦΞͯ͠΋ɺʮͪΌΜͱʯಈ͔͢·Ͱʹ͸ϋʔυϧ͕͋Δ
    • ʁʁʁʮಈ͘͸ͣͳͷʹɺͳΜ͔ݟ஌Β͵Τϥʔ͕ग़ͯࢭ·ͬͯ͠·͏ΜͰ͚͢Ͳɾɾɾʯ
    • ϩʔΧϧPCʹطʹೖ͍ͬͯΔґଘؔ܎ͷ໰୊ɻωΠςΟϒϥΠϒϥϦͳͲ
    • ్தͰݕূ໨తͰΠϯετʔϧ͍ͯͨ͠ʢຊདྷෆཁͳʣґଘؔ܎ͷ͍ͤͰඍົʹ؀ڥࠩҟ͕͋ͬͨ
    ʮಈ͔ͯ͠ΈΔʯ͜ͱͷ೉͠͞
    ͜ͷ΁ΜͷਏΈΛίϯςφϕʔεͷ։ൃ؀ڥ

    ʢͱ VSCode Ͱʣܰݮ͍ͨ͠

    View Slide

  15. “ִ཭͞Εͨ” ։ൃ؀ڥ

    View Slide

  16. ؾ҆͘৮ΕΔ؀ڥ͕΄͍͠
    • ֎෦Өڹ͕ͳ͍͜ͱΛ֬৴Ͱ͖Δ͜ͱ
    • ΞϓϦ͔Βͷ Outbound ੍͕ݶʗېࢭ͞Ε͍ͯΔ
    • DBͷσʔλ͸ৗʹҰఆͷεφοϓγϣοτΛอ͍ͬͯͯ΄͍͠
    • ݕূͷաఔͰมߋͨ͠σʔλ͸Ϧηοτ͍ͨ͠

    View Slide

  17. ։ൃ؀ڥͱͯ͠ͷίϯςφ (docker)
    • ؀ڥͷ࠶ݱੑ
    • ։ൃ؀ڥʗಈ࡞؀ڥ͸ Dockerfile ʹهड़ͯ͠Ϗϧυ
    • Կ౓΋࢖͍ࣺͯͰ͖Δ
    • ϩʔΧϧPCͷ؀ڥࠩҟΛഉআ
    • DockreHub ͷެࣜΠϝʔδ͕ॆ࣮
    • ༗໊Ͳ͜Ζ͸͍͍ͩͨ͋Δ
    • DBܥͷΠϝʔδ͸ dump ͔ΒॳظσʔλΛऔΓࠐΉํ๏΋αϙʔτ
    • docker-compose
    • AP-DB ͷෳ਺ίϯϙʔωϯτͷߏ੒΋ͱΕΔ
    • N/W पΓͷઃఆ΋ compose ͷઃఆϑΝΠϧͰهड़

    View Slide

  18. docker-compose

    View Slide

  19. ExampleʢDjango + PostgreSQLʣ
    $POUBJOFS
    "QQ

    $POUBJOFS
    %#

    Host machine Docker
    #SJHEF
    *'
    /FUXPSL
    *'
    Internet
    access

    View Slide

  20. ExampleʢDjango + PostgreSQLʣ
    $POUBJOFS
    "QQ

    $POUBJOFS
    %#

    Host machine Docker
    #SJHEF
    *'
    /FUXPSL
    *'
    Internet
    access

    View Slide

  21. ExampleʢDjango + PostgreSQLʣ
    $POUBJOFS
    "QQ

    $POUBJOFS
    %#

    Host machine Docker
    #SJHEF
    *'
    /FUXPSL
    *'
    Internet
    access

    View Slide

  22. Example
    σΟϨΫτϦߏ੒
    • config … ϓϩδΣΫτ
    • polls … Django App
    • Dockerfile … ΞϓϦέʔγϣϯίϯςφ
    • docker-compose … ݕূ؀ڥ
    • requirements*.txt … ґଘؔ܎
    # project
    # djnago app dir

    View Slide

  23. Example
    docker-compose.yml
    • services
    • db … PostgreSQL
    • app … Django DevServer
    • networks
    • ϒϦοδ & ֎΁ͷ௨৴Λېࢭ

    View Slide

  24. Example
    docker-compose.yml
    • services
    • db … PostgreSQL
    • app … Django DevServer
    • networks
    • ϒϦοδ & ֎΁ͷ௨৴Λېࢭ
    ্ཱͪ͛Δ
    ίϯςφͷఆٛ

    View Slide

  25. Example
    docker-compose.yml
    • services
    • db … PostgreSQL
    • app … Django DevServer
    • networks
    • ϒϦοδ & ֎΁ͷ௨৴Λېࢭ
    ίϯςφͷ N/W

    View Slide

  26. Example - docker-compose
    docker-compose.yml
    networks

    View Slide

  27. Example - docker-compose
    docker-compose.yml
    services.db

    View Slide

  28. Example - docker-compose
    docker-compose.yml
    services.app
    command:
    python3 manage.py \
    runserver \
    —settings config.settings_local

    View Slide

  29. Example - App
    settings_local.py

    View Slide

  30. Example - App
    settings_local.py
    • docker-compose.yml ͷઃఆ಺༰ͱ

    ಉ͡΋ͷΛهड़
    • DBͷϗετ໊͸ yml Ͱఆٛͨ͠

    αʔϏε໊ (=db) ͰղܾՄೳ

    View Slide

  31. Example
    Django settings
    settings_local.py
    • docker-compose.yml ͷઃఆ಺༰ͱ

    ಉ͡΋ͷΛهड़
    • DBͷϗετ໊͸ yml Ͱఆٛͨ͠

    αʔϏε໊ (=db) ͰղܾՄೳ

    View Slide

  32. Example - Build & Run
    > docker-compose build
    > docker-compose up -d
    > docker-compose ps

    View Slide

  33. Tips(1) - DB migration
    docker-compose exec ίϚϯυͰ migrate ͢Δ
    > docker-compose exec
    manage.py migration

    View Slide

  34. Tips(1) - DB migration
    docker-compose exec ίϚϯυͰ migrate ͢Δ
    > docker-compose exec
    https://matsuand.github.io/docs.docker.jp.onthefly/compose/reference/exec/
    manage.py dbshell

    View Slide

  35. Tips(2) - ॳظσʔλ౤ೖ
    ެࣜΠϝʔδ͕౤ೖํ๏Λఏڙ͍ͯ͠Δ
    Postgres Ͱ͸ɺ /docker-entrypoint-initdb.d/ ഑Լʹ
    *.sql ·ͨ͸ *.sql.gz ܗࣜͷμϯϓΛ഑ஔ͓͚ͯ͠͹OK
    https://hub.docker.com/_/postgres
    # Initialization scripts

    View Slide

  36. Tips(2) - ॳظσʔλ౤ೖ (sample)
    σΟϨΫτϦߏ੒

    View Slide

  37. Tips(2) - ॳظσʔλ౤ೖ (sample)
    docker-compose.yml ʢൈਮʣ
    postgres/Dockerfile

    View Slide

  38. VSCode - Remote Container

    View Slide

  39. Remote Container
    https://code.visualstudio.com/docs/remote/containers
    • VSCode ͷ֦ுػೳ
    • VSCode ্Ͱίϯςφͷ։ൃ؀ڥΛಈ͔ͤΔ

    View Slide

  40. ͳʹ͕خ͍͠ʁ
    • ·ͬ͞Βͳ VM ʹઐ༻ͷ։ൃ؀ڥΛ࡞ͬͯ։ൃͰ͖ΔΠϝʔδ
    • docker-compose ୯ମͷ৔߹͸ΞϓϦͷ࣮ߦ؀ڥͷΈίϯςφԽ͢Δ
    • VSCode ্ͷ࣮ߦίϯςΩετίϯςφͷதʹͳΔ
    • ΤσΟλɺλʔϛφϧͳͲ
    • VSCode ͷଞͷػೳ͕ซ༻Ͱ͖Δʢ֦ுػೳ΋ؚΉʣ
    • ίϯςφ্ͷ։ൃ؀ڥͰ΋σόοΨ͕࢖͑ΔΑ͏ʹͳΔ
    • Linter ΍ Git पลͷ֦ுػೳͳͲ

    View Slide

  41. Remote Container
    ίϚϯυύϨοτ (Ctrl+P) Λ։͍ͯ “Add Development Container …” Λબ୒
    ϕʔεʹ͢Δ؀ڥΛબ୒ (Python3 & PostgreSQL)

    View Slide

  42. Remote Container
    ίϯςφ؀ڥΛϏϧυ … Rebuild Container
    ίϯςφ؀ڥͰ VSCode Λ։͖௚͢

    …Open Workspace in Container

    View Slide

  43. Remote Container
    Remote Container ؔ܎ͷઃఆϑΝΠϧ͕ੜ੒͞ΕΔ
    # VSCode Remote Container ͷઃఆϑΝΠϧ

    View Slide

  44. ↓ ”Dev Container”

    View Slide

  45. ↑ ίϯςφ಺ͷ /workspace Ͱλʔϛφϧ͕ىಈ

    View Slide

  46. Remote Container
    Remote Container ؔ܎ͷઃఆϑΝΠϧ͕ੜ੒͞ΕΔ
    # VSCode Remote Container ͷઃఆϑΝΠϧ
    ੜ੒͞Ε֤ͨϑΝΠϧͷղઆ
    ʢVSCode ʹ੾Γସ͑ʣ

    View Slide

  47. ༨ஊ
    όΠϒϧ͕طʹ͋ͬͨ
    Atsushi Morimoto (@74th) ஶ
    https://74th.booth.pm/items/2425642

    View Slide

  48. ͓ΘΓʹ

    View Slide

  49. ·ͱΊ
    • docker-compose Ͱؾָʹ࡞ΕΔʢյͤΔʣ։ൃ؀ڥΛ

    खʹೖΕΑ͏
    • VSCode ͸͍͍ͧ
    • ࢿྉɺαϯϓϧίʔυ͸ޙ೔ެ։༧ఆʢtwitterʣ
    • ʢυΩϡϝϯτ΋ॻ͜͏ʣ

    View Slide