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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

࣮ફ AWS CDK - TypeScript Ͱ Πϯϑϥ΋ΞϓϦ΋ʂ https://booth.pm/ja/items/1881928 2020.03 - 2020.04  ٕज़ॻయ Ԡԉࡇ (ٕज़ॻయ8)

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

ॱௐʹҾ͖ܧ͛ͳ͔ͬͨࢥ͍ग़ ※લϑϦɻϑΟΫγϣϯͰ͢

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

“ִ཭͞Εͨ” ։ൃ؀ڥ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

docker-compose

Slide 19

Slide 19 text

ExampleʢDjango + PostgreSQLʣ $POUBJOFS "QQ $POUBJOFS %# Host machine Docker #SJHEF *' /FUXPSL *' Internet access

Slide 20

Slide 20 text

ExampleʢDjango + PostgreSQLʣ $POUBJOFS "QQ $POUBJOFS %# Host machine Docker #SJHEF *' /FUXPSL *' Internet access

Slide 21

Slide 21 text

ExampleʢDjango + PostgreSQLʣ $POUBJOFS "QQ $POUBJOFS %# Host machine Docker #SJHEF *' /FUXPSL *' Internet access

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Example - docker-compose docker-compose.yml networks

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Example - docker-compose docker-compose.yml services.app command: python3 manage.py \ runserver \ —settings conﬁg.settings_local

Slide 29

Slide 29 text

Example - App settings_local.py

Slide 30

Slide 30 text

Example - App settings_local.py • docker-compose.yml ͷઃఆ಺༰ͱ  ಉ͡΋ͷΛهड़ • DBͷϗετ໊͸ yml Ͱఆٛͨ͠  αʔϏε໊ (=db) ͰղܾՄೳ

Slide 31

Slide 31 text

Example Django settings settings_local.py • docker-compose.yml ͷઃఆ಺༰ͱ  ಉ͡΋ͷΛهड़ • DBͷϗετ໊͸ yml Ͱఆٛͨ͠  αʔϏε໊ (=db) ͰղܾՄೳ

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

VSCode - Remote Container

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

↓ ”Dev Container”

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

͓ΘΓʹ

Slide 49

Slide 49 text

·ͱΊ • docker-compose Ͱؾָʹ࡞ΕΔʢյͤΔʣ։ൃ؀ڥΛ  खʹೖΕΑ͏ • VSCode ͸͍͍ͧ • ࢿྉɺαϯϓϧίʔυ͸ޙ೔ެ։༧ఆʢtwitterʣ • ʢυΩϡϝϯτ΋ॻ͜͏ʣ