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

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

OSC 2020 広島 (OSC2020 Online/Hiroshima) のライトニングトークの資料です。

Transcript

1. Next.js + Heroku + Docker Ͱ΋ ۄͶ͗ͷोͰྦ͕ग़ΜΑ͏ʹ ʙ PyCon mini Hiroshima ͷαΠτߏஙͷҰίϚʙ ๺㝳೗๏ OSC 2020 ޿ౡ 2020೥9݄19೔(౔)
2. ࣗݾ঺հ
4. ๺㝳೗๏ • ͖͍ͨͩΏ͖ͷΓ • ʹΐ΄͏, Nyoho • ϋΠύɾϝσΟΞɾτϥϯεϨʔλ • ೔༵ϓϩάϥϚ
5. ݕࡧ ৄ͘͠͸ iPad ޿ౡห
6. ʮ͜Μͳײ͡ͷ͕ग़͖ͯ·͢ɻʯ
7. ݕࡧ ࠷ۙ͸ ؟ڸࢢ৔ ޿ౡห
8. Next.js + Heroku + DockerͰ΋ ۄͶ͗ͷोͰྦ͕ग़ΜΑ͏ʹ ʙ1Z$PO
   NJOJ
   )JSPTIJNB
   αΠτߏஙͷҰίϚʙ
   
9. Next.js + Heroku + DockerͰ΋ ۄͶ͗ͷोͰྦ͕ग़ΜΑ͏ʹ ʙ1Z$PO
   NJOJ
   )JSPTIJNB
   αΠτߏஙͷҰίϚʙ
   
11. PyCon mini Hiroshima 2020 ΦϯϥΠϯ 10݄10೔ • Φʔϓϯιʔεͷϓϩάϥϛϯάݴޠ Python ʹؔ͢ΔΠϕϯτ • 2020೥ 10݄ 10೔(౔) 14:00ʙ • ࢀՃඅແྉ • ςʔϚ “ͭͳ͕Ζ͏ Python” • https://hiroshima.pycon.jp/ ࢀՃొ࿥΋ͪ͜Β͔Β
12. ຊ೔ Cձ৔ 10:00ʙͷ࿥ը΋ੋඇ͝ཡ͍ͩ͘͞!
13. Next.js + Heroku + DockerͰ΋ ۄͶ͗ͷोͰྦ͕ग़ΜΑ͏ʹ ʙ1Z$PO
    NJOJ
    )JSPTIJNB
    αΠτߏஙͷҰίϚʙ
    
14. Next.js + Heroku + DockerͰ΋ ۄͶ͗ͷोͰྦ͕ग़ΜΑ͏ʹ ʙ1Z$PO
    NJOJ
    )JSPTIJNB
    αΠτߏஙͷҰίϚʙ
    
15. PyCon mini HiroshimaͷαΠτߏங • PyCon mini Hiroshima 2019, 2020 ͷαΠτ࡞ΓΛ୲౰ • GitHub ϓϥΠϕʔτϦϙδτϦͰ؅ཧ • Next.js ͔Β੩తϑΝΠϧΛϏϧυ → ΢Σϒαʔό΁ • มߋ͸جຊϓϧϦΫΤετϕʔεͰ • ϨϏϡʔΛ؆ུԽ͢ΔͨΊʹ Heroku Review Apps Λಋೖ
16. Heroku ͷ Review Apps From https://devcenter.heroku.com/articles/github-integration-review-apps
17. Heroku ͷ Review Apps • GitHub ͷϓογϡΛݕ஌ͯ͠ Heroku ʹϨϏϡʔͷͨΊͷ΢ΣϒΞϓϦΛσ ϓϩΠͯ͘͠ΕΔ • Heroku ͸ࠓ Docker ίϯςφ͕࢖͑Δ • ࣮࣭ͲΜͳΞϓϦ΋ಈ͔ͤΔ • PyCon mini HiroshimaͰ͸ Next.js → Ϗϧυ → ੩తϑΝΠϧΛ Nginx Ͱ഑৴ • ຊ൪؀ڥΛ໛ͨ͠ Nginx ϕʔεͷ Dockerfile Λॻ͍ͯ Heroku Ͱಈ͔ͤΔɻ
18. ໰୊: ۄͶ͗ʹͳΔ
19. PyCon mini Hiroshima 2020 • Python ʹؔ͢ΔΠϕϯτ • 2020೥ 10݄ 10೔(౔) 14:00ʙ • ࠓ೥͸ΦϯϥΠϯ • ࢀՃొ࿥ͨ͠Β Slack ΁͝ট଴ • ࢀՃऀߨԋऀೖΓཚΕΔ Slack Ͱϲ݄͔͚ͯΞΠεϒϨΠΫ
    • ςʔϚ “ͭͳ͕Ζ͏ Python”
20. ໰୊: ۄͶ͗ʹͳΔ?
21. ໰୊: λϚωΪʹͳΔ /HJOY / /2020 /2019 %PDLFSίϯςφ )FSPLVͷ࡞Δίϯςφ )FSPLV
    3FWJFX
    "QQ ຊ൪؀ڥ / /2020 /2019 /HJOY
22. ໰୊: λϚωΪʹͳΔ /HJOY / /2020 /2019 %PDLFSίϯςφ )FSPLVͷ࡞Δίϯςφ )FSPLV
    3FWJFX
    "QQ ຊ൪؀ڥ / /2020 /2019 /HJOY PORT 28147 PORT 80 or 443 PORT 80 or 443 $PORT ֎ ֎
23. ໰୊: λϚωΪʹͳΔ /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
24. ී௨͸͜ΕͰ͑͑Μ͡Ό͚Ͳ Ͷ
25. ϦμΠϨΫτ͍ͨ͠
26. ϦμΠϨΫτ͍ͨ͠ • ຖ೥ɺτοϓ͸ͦͷ೥ͷαΠτʹϦμΠϨΫτ(సૹ)͍ͨ͠ • hiroshima.pycon.jp ʹ๚໰ͩͬͨ͘͞Βɺ • hiroshima.pycon.jp/2020/ ʹసૹ͍ͯ͠Δɻ
27. ϦμΠϨΫτ͍ͨ͠ • ຖ೥ɺτοϓ͸ͦͷ೥ͷαΠτʹϦμΠϨΫτ(సૹ)͍ͨ͠ • hiroshima.pycon.jp ʹ๚໰ͩͬͨ͘͞Βɺ • hiroshima.pycon.jp/2020/ ʹసૹ͍ͯ͠Δɻ • Nginx Ͱ / Λ /2020/ ʹ͢Δʹ͸ • rewrite ^/()$ $1/2020/ redirect;
28. ͢Δͱ
29. ۄͶ͗ͷो͕ඈͼࢄΔ
31. ۄͶ͗ͷो͕ඈͼࢄΔ? %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/ ʹసૹͯ͠͠·͏!
32. ۄͶ͗ͷो͕ඈͼࢄΔ? • ://hostname/ ʹΞΫηεͨ͠Β…… • ://hostname:28147/2020/ ʹసૹͯ͠͠·͏!
33. ۄͶ͗ͷो͕ඈͼࢄΒͳ͍ൿࡦ • port_in_redirect off; • ͜ΕͰ Docker ಺ͷ Nginx ͷϦμΠϨΫτͰϙʔτ͸సૹ͞Εͳ͍ɻ • ·ͱΊ • ͜ΕͰ Heroku Review App Λ༻͍ͨɺαΠτߋ৽ pull request ͕ ਖ਼ৗʹɺ؆୯ʹɺ։͚ΔΑ͏ʹͳͬͨɻ • PyCon mini Hiroshima 2020 ΦϯϥΠϯɺΈΜͳདྷͯͶ!
34. • ·ͱΊ • ͜ΕͰ Heroku Review App Λ༻͍ͨɺαΠτߋ৽ pull request ͕ ਖ਼ৗʹɺ؆୯ʹɺ։͚ΔΑ͏ʹͳͬͨɻ • PyCon mini Hiroshima 2020 ΦϯϥΠϯɺΈΜͳདྷͯͶ!
35. PyCon mini Hiroshima 2020 ΦϯϥΠϯ 10݄10೔ • Python ʹؔ͢ΔΠϕϯτ • 2020೥ 10݄ 10೔(౔) 14:00ʙ • ࠓ೥͸ΦϯϥΠϯ • ࢀՃొ࿥ͨ͠Β Slack ΁͝ট଴ • ࢀՃऀߨԋऀೖΓཚΕΔ Slack Ͱϲ݄͔͚ͯΞΠεϒϨΠΫ
    • ςʔϚ “ͭͳ͕Ζ͏ Python” • https://hiroshima.pycon.jp/ ࢀՃొ࿥΋ͪ͜Β͔Β
36. ෇࿥: Heroku ͷίϯςφͷϙʔτΛઃఆ͢Δ • Herokuͷίϯςφͷϙʔτ(ϥϯμϜ)ΛɺDocker ಺ͷ Nginx ʹઃఆ͢Δʹ͸ • Nginx ͷ conf ͷςϯϓϨʔτͷ server { } ʹ listen $PORT; Λॻ͍͓ͯ ͘ • Dockerfile Ͱ࣍ͷΑ͏ʹ 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;'