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

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

853cd87b5c317b8c16b0e78c2efbf8d1?s=47 北䑓如法
September 19, 2020

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) のライトニングトークの資料です。

853cd87b5c317b8c16b0e78c2efbf8d1?s=128

北䑓如法

September 19, 2020
Tweet

More Decks by 北䑓如法

Other Decks in Programming

Transcript

  1. Next.js + Heroku + Docker Ͱ΋ ۄͶ͗ͷोͰྦ͕ग़ΜΑ͏ʹ ʙ PyCon mini

    Hiroshima ͷαΠτߏஙͷҰίϚʙ ๺㝳೗๏ OSC 2020 ޿ౡ 2020೥9݄19೔(౔)
  2. ࣗݾ঺հ

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

  5. ݕࡧ ৄ͘͠͸ iPad ޿ౡห

  6. ʮ͜Μͳײ͡ͷ͕ग़͖ͯ·͢ɻʯ

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

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

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

  10. None
  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$PONJOJ)JSPTIJNBαΠτߏஙͷҰίϚʙ

  14. Next.js + Heroku + DockerͰ΋ ۄͶ͗ͷोͰྦ͕ग़ΜΑ͏ʹ ʙ1Z$PONJOJ)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. ۄͶ͗ͷो͕ඈͼࢄΔ

  30. None
  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;'