Next.js + Heroku + Dockerでも玉ねぎの汁で涙が出んように〜PyCon mini Hiroshima サイト構築の一コマ〜 / Avoiding onion essence with Next.js + Heroku + Docker -- development of the site of PyCon mini Hiroshima

Slide 1

Slide 1 text

Next.js + Heroku + Docker Ͱ΋ ۄͶ͗ͷोͰྦ͕ग़ΜΑ͏ʹ ʙ PyCon mini Hiroshima ͷαΠτߏஙͷҰίϚʙ ๺㝳೗๏ OSC 2020 ޿ౡ 2020೥9݄19೔(౔)

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

๺㝳೗๏ • ͖͍ͨͩΏ͖ͷΓ • ʹΐ΄͏, Nyoho • ϋΠύɾϝσΟΞɾτϥϯεϨʔλ • ೔༵ϓϩάϥϚ

Slide 5

Slide 5 text

ݕࡧ ৄ͘͠͸ iPad ޿ౡห

Slide 6

Slide 6 text

ʮ͜Μͳײ͡ͷ͕ग़͖ͯ·͢ɻʯ

Slide 7

Slide 7 text

ݕࡧ ࠷ۙ͸ ؟ڸࢢ৔ ޿ౡห

Slide 8

Slide 8 text

Next.js + Heroku + DockerͰ΋ ۄͶ͗ͷोͰྦ͕ग़ΜΑ͏ʹ ʙ1Z$PONJOJ)JSPTIJNBαΠτߏஙͷҰίϚʙ

Slide 9

Slide 9 text

Next.js + Heroku + DockerͰ΋ ۄͶ͗ͷोͰྦ͕ग़ΜΑ͏ʹ ʙ1Z$PONJOJ)JSPTIJNBαΠτߏஙͷҰίϚʙ

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

PyCon mini Hiroshima 2020 ΦϯϥΠϯ 10݄10೔ • Φʔϓϯιʔεͷϓϩάϥϛϯάݴޠ Python ʹؔ͢ΔΠϕϯτ • 2020೥ 10݄ 10೔(౔) 14:00ʙ • ࢀՃඅແྉ • ςʔϚ “ͭͳ͕Ζ͏ Python” • https://hiroshima.pycon.jp/ ࢀՃొ࿥΋ͪ͜Β͔Β

Slide 12

Slide 12 text

ຊ೔ Cձ৔ 10:00ʙͷ࿥ը΋ੋඇ͝ཡ͍ͩ͘͞!

Slide 13

Slide 13 text

Next.js + Heroku + DockerͰ΋ ۄͶ͗ͷोͰྦ͕ग़ΜΑ͏ʹ ʙ1Z$PONJOJ)JSPTIJNBαΠτߏஙͷҰίϚʙ

Slide 14

Slide 14 text

Next.js + Heroku + DockerͰ΋ ۄͶ͗ͷोͰྦ͕ग़ΜΑ͏ʹ ʙ1Z$PONJOJ)JSPTIJNBαΠτߏஙͷҰίϚʙ

Slide 15

Slide 15 text

PyCon mini HiroshimaͷαΠτߏங • PyCon mini Hiroshima 2019, 2020 ͷαΠτ࡞ΓΛ୲౰ • GitHub ϓϥΠϕʔτϦϙδτϦͰ؅ཧ • Next.js ͔Β੩తϑΝΠϧΛϏϧυ → ΢Σϒαʔό΁ • มߋ͸جຊϓϧϦΫΤετϕʔεͰ • ϨϏϡʔΛ؆ུԽ͢ΔͨΊʹ Heroku Review Apps Λಋೖ

Slide 16

Slide 16 text

Heroku ͷ Review Apps From https://devcenter.heroku.com/articles/github-integration-review-apps

Slide 17

Slide 17 text

Heroku ͷ Review Apps • GitHub ͷϓογϡΛݕ஌ͯ͠ Heroku ʹϨϏϡʔͷͨΊͷ΢ΣϒΞϓϦΛσ ϓϩΠͯ͘͠ΕΔ • Heroku ͸ࠓ Docker ίϯςφ͕࢖͑Δ • ࣮࣭ͲΜͳΞϓϦ΋ಈ͔ͤΔ • PyCon mini HiroshimaͰ͸ Next.js → Ϗϧυ → ੩తϑΝΠϧΛ Nginx Ͱ഑৴ • ຊ൪؀ڥΛ໛ͨ͠ Nginx ϕʔεͷ Dockerﬁle Λॻ͍ͯ Heroku Ͱಈ͔ͤΔɻ

Slide 18

Slide 18 text

໰୊: ۄͶ͗ʹͳΔ

Slide 19

Slide 19 text

PyCon mini Hiroshima 2020 • Python ʹؔ͢ΔΠϕϯτ • 2020೥ 10݄ 10೔(౔) 14:00ʙ • ࠓ೥͸ΦϯϥΠϯ • ࢀՃొ࿥ͨ͠Β Slack ΁͝ট଴ • ࢀՃऀߨԋऀೖΓཚΕΔ Slack Ͱϲ݄͔͚ͯΞΠεϒϨΠΫ • ςʔϚ “ͭͳ͕Ζ͏ Python”

Slide 20

Slide 20 text

໰୊: ۄͶ͗ʹͳΔ?

Slide 21

Slide 21 text

໰୊: λϚωΪʹͳΔ /HJOY / /2020 /2019 %PDLFSίϯςφ )FSPLVͷ࡞Δίϯςφ )FSPLV 3FWJFX"QQ ຊ൪؀ڥ / /2020 /2019 /HJOY

Slide 22

Slide 22 text

໰୊: λϚωΪʹͳΔ /HJOY / /2020 /2019 %PDLFSίϯςφ )FSPLVͷ࡞Δίϯςφ )FSPLV 3FWJFX"QQ ຊ൪؀ڥ / /2020 /2019 /HJOY PORT 28147 PORT 80 or 443 PORT 80 or 443 $PORT ֎ ֎

Slide 23

Slide 23 text

໰୊: λϚωΪʹͳΔ /HJOY / /2020 /2019 %PDLFSίϯςφ )FSPLVͷ࡞Δίϯςφ )FSPLV 3FWJFX"QQ ຊ൪؀ڥ / /2020 /2019 /HJOY PORT 28147 T 80 or 443 PORT 80 or 443 $PORT ֎ ֎ /HJOY PORT 3001ͳͲ $PORT ϩʔΧϧ%PDLFS։ൃ %PDLFSίϯςφ docker run -d -e PORT=3001 -p 3001:3001 -t an-image

Slide 24

Slide 24 text

ී௨͸͜ΕͰ͑͑Μ͡Ό͚Ͳ Ͷ

Slide 25

Slide 25 text

ϦμΠϨΫτ͍ͨ͠

Slide 26

Slide 26 text

ϦμΠϨΫτ͍ͨ͠ • ຖ೥ɺτοϓ͸ͦͷ೥ͷαΠτʹϦμΠϨΫτ(సૹ)͍ͨ͠ • hiroshima.pycon.jp ʹ๚໰ͩͬͨ͘͞Βɺ • hiroshima.pycon.jp/2020/ ʹసૹ͍ͯ͠Δɻ

Slide 27

Slide 27 text

ϦμΠϨΫτ͍ͨ͠ • ຖ೥ɺτοϓ͸ͦͷ೥ͷαΠτʹϦμΠϨΫτ(సૹ)͍ͨ͠ • hiroshima.pycon.jp ʹ๚໰ͩͬͨ͘͞Βɺ • hiroshima.pycon.jp/2020/ ʹసૹ͍ͯ͠Δɻ • Nginx Ͱ / Λ /2020/ ʹ͢Δʹ͸ • rewrite ^/()$ $1/2020/ redirect;

Slide 28

Slide 28 text

͢Δͱ

Slide 29

Slide 29 text

ۄͶ͗ͷो͕ඈͼࢄΔ

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

ۄͶ͗ͷो͕ඈͼࢄΔ? %PDLFSίϯςφ )FSPLVͷ࡞Δίϯςφ / /2020 /2019 /HJOY PORT 28147 PORT 80 or 443 $PORT ֎ • GET / ͷϦΫΤετ͕֎͔Β͘Δ • Herokuͷίϯςφ͕಺ଆʹ౉͢ (ྫ͸PORT 28147) • ಺ଆͷDockerͷϙʔτ 28147 ʹ౉͢ • (͜͜͸ envsubst ͰઃఆͰ͖Δ(෇࿥)) • ͦͯ͠ Docker ίϯςφͷ Nginx ͕ಈ͖ग़͢ • / Λ /2020/ ʹసૹ͢Δͷ͕ͩ…… • ϩʔΧϧͷDockerͰ͸໰୊ͳ͍ͷ͕ͩɺHerokuʹ͍࣋ͬͯ͘ͱ…… • ://hostname/ ʹΞΫηεͨ͠Β…… • ://hostname:28147/2020/ ʹసૹͯ͠͠·͏!

Slide 32

Slide 32 text

ۄͶ͗ͷो͕ඈͼࢄΔ? • ://hostname/ ʹΞΫηεͨ͠Β…… • ://hostname:28147/2020/ ʹసૹͯ͠͠·͏!

Slide 33

Slide 33 text

ۄͶ͗ͷो͕ඈͼࢄΒͳ͍ൿࡦ • port_in_redirect off; • ͜ΕͰ Docker ಺ͷ Nginx ͷϦμΠϨΫτͰϙʔτ͸సૹ͞Εͳ͍ɻ • ·ͱΊ • ͜ΕͰ Heroku Review App Λ༻͍ͨɺαΠτߋ৽ pull request ͕ ਖ਼ৗʹɺ؆୯ʹɺ։͚ΔΑ͏ʹͳͬͨɻ • PyCon mini Hiroshima 2020 ΦϯϥΠϯɺΈΜͳདྷͯͶ!

Slide 34

Slide 34 text

• ·ͱΊ • ͜ΕͰ Heroku Review App Λ༻͍ͨɺαΠτߋ৽ pull request ͕ ਖ਼ৗʹɺ؆୯ʹɺ։͚ΔΑ͏ʹͳͬͨɻ • PyCon mini Hiroshima 2020 ΦϯϥΠϯɺΈΜͳདྷͯͶ!

Slide 35

Slide 35 text

PyCon mini Hiroshima 2020 ΦϯϥΠϯ 10݄10೔ • Python ʹؔ͢ΔΠϕϯτ • 2020೥ 10݄ 10೔(౔) 14:00ʙ • ࠓ೥͸ΦϯϥΠϯ • ࢀՃొ࿥ͨ͠Β Slack ΁͝ট଴ • ࢀՃऀߨԋऀೖΓཚΕΔ Slack Ͱϲ݄͔͚ͯΞΠεϒϨΠΫ • ςʔϚ “ͭͳ͕Ζ͏ Python” • https://hiroshima.pycon.jp/ ࢀՃొ࿥΋ͪ͜Β͔Β

Slide 36

Slide 36 text

෇࿥: Heroku ͷίϯςφͷϙʔτΛઃఆ͢Δ • Herokuͷίϯςφͷϙʔτ(ϥϯμϜ)ΛɺDocker ಺ͷ Nginx ʹઃఆ͢Δʹ͸ • Nginx ͷ conf ͷςϯϓϨʔτͷ server { } ʹ listen $PORT; Λॻ͍͓ͯ ͘ • Dockerﬁle Ͱ࣍ͷΑ͏ʹ envsubst (؀ڥม਺Λ୅ೖ(substitute)) ίϚϯυͰconf Λॻ͖׵͔͑ͯΒDocker಺ͰNginxΛ্ཱͪ͛Δ • CMD /bin/sh -c "envsubst '\$PORT' < /etc/nginx/conf.d/ default.conf.template > /etc/nginx/conf.d/default.conf" && nginx -g 'daemon off;'