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

Next.js + Heroku + Dockerでも玉ねぎの汁で涙が出んように 〜PyCon...

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

北䑓如法

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. PyCon mini Hiroshima 2020 ΦϯϥΠϯ 10݄10೔ • Φʔϓϯιʔεͷϓϩάϥϛϯάݴޠ Python ʹؔ͢ΔΠϕϯτ

    • 2020೥ 10݄ 10೔(౔) 14:00ʙ • ࢀՃඅແྉ • ςʔϚ “ͭͳ͕Ζ͏ Python” • https://hiroshima.pycon.jp/ ࢀՃొ࿥΋ͪ͜Β͔Β
  3. PyCon mini HiroshimaͷαΠτߏங • PyCon mini Hiroshima 2019, 2020 ͷαΠτ࡞ΓΛ୲౰

    • GitHub ϓϥΠϕʔτϦϙδτϦͰ؅ཧ • Next.js ͔Β੩తϑΝΠϧΛϏϧυ → ΢Σϒαʔό΁ • มߋ͸جຊϓϧϦΫΤετϕʔεͰ • ϨϏϡʔΛ؆ུԽ͢ΔͨΊʹ Heroku Review Apps Λಋೖ
  4. Heroku ͷ Review Apps • GitHub ͷϓογϡΛݕ஌ͯ͠ Heroku ʹϨϏϡʔͷͨΊͷ΢ΣϒΞϓϦΛσ ϓϩΠͯ͘͠ΕΔ

    • Heroku ͸ࠓ Docker ίϯςφ͕࢖͑Δ • ࣮࣭ͲΜͳΞϓϦ΋ಈ͔ͤΔ • PyCon mini HiroshimaͰ͸ Next.js → Ϗϧυ → ੩తϑΝΠϧΛ Nginx Ͱ഑৴ • ຊ൪؀ڥΛ໛ͨ͠ Nginx ϕʔεͷ Dockerfile Λॻ͍ͯ Heroku Ͱಈ͔ͤΔɻ
  5. PyCon mini Hiroshima 2020 • Python ʹؔ͢ΔΠϕϯτ • 2020೥ 10݄

    10೔(౔) 14:00ʙ • ࠓ೥͸ΦϯϥΠϯ • ࢀՃొ࿥ͨ͠Β Slack ΁͝ট଴ • ࢀՃऀߨԋऀೖΓཚΕΔ Slack Ͱϲ݄͔͚ͯΞΠεϒϨΠΫ • ςʔϚ “ͭͳ͕Ζ͏ Python”
  6. ໰୊: λϚωΪʹͳΔ /HJOY / /2020 /2019 %PDLFSίϯςφ )FSPLVͷ࡞Δίϯςφ )FSPLV 3FWJFX"QQ

    ຊ൪؀ڥ / /2020 /2019 /HJOY PORT 28147 PORT 80 or 443 PORT 80 or 443 $PORT ֎ ֎
  7. ໰୊: λϚωΪʹͳΔ /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
  8. ۄͶ͗ͷो͕ඈͼࢄΔ? %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/ ʹసૹͯ͠͠·͏!
  9. ۄͶ͗ͷो͕ඈͼࢄΒͳ͍ൿࡦ • port_in_redirect off; • ͜ΕͰ Docker ಺ͷ Nginx ͷϦμΠϨΫτͰϙʔτ͸సૹ͞Εͳ͍ɻ

    • ·ͱΊ • ͜ΕͰ Heroku Review App Λ༻͍ͨɺαΠτߋ৽ pull request ͕ ਖ਼ৗʹɺ؆୯ʹɺ։͚ΔΑ͏ʹͳͬͨɻ • PyCon mini Hiroshima 2020 ΦϯϥΠϯɺΈΜͳདྷͯͶ!
  10. • ·ͱΊ • ͜ΕͰ Heroku Review App Λ༻͍ͨɺαΠτߋ৽ pull request

    ͕ ਖ਼ৗʹɺ؆୯ʹɺ։͚ΔΑ͏ʹͳͬͨɻ • PyCon mini Hiroshima 2020 ΦϯϥΠϯɺΈΜͳདྷͯͶ!
  11. PyCon mini Hiroshima 2020 ΦϯϥΠϯ 10݄10೔ • Python ʹؔ͢ΔΠϕϯτ •

    2020೥ 10݄ 10೔(౔) 14:00ʙ • ࠓ೥͸ΦϯϥΠϯ • ࢀՃొ࿥ͨ͠Β Slack ΁͝ট଴ • ࢀՃऀߨԋऀೖΓཚΕΔ Slack Ͱϲ݄͔͚ͯΞΠεϒϨΠΫ • ςʔϚ “ͭͳ͕Ζ͏ Python” • https://hiroshima.pycon.jp/ ࢀՃొ࿥΋ͪ͜Β͔Β
  12. ෇࿥: 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;'