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

Vite を使ってアプリケーションに環境変数を参照させる方法を考える

Vite を使ってアプリケーションに環境変数を参照させる方法を考える

2021.6.16 開催の Vue.js v-tokyo オンライン Meetup#13 - connpass に登壇した際のスライド資料です。

下記のブログ記事にてより詳しい内容を解説しています。
Vite を使ってアプリケーションに環境変数を参照させる方法を考える – PSYENCE:MEDIA

82ed567f8497acfed7f7b464225dd536?s=128

wakamsha

June 16, 2021
Tweet

Transcript

  1. 7JUFΛ࢖ͬͯΞϓϦέʔγϣϯʹ ؀ڥม਺Λࢀরͤ͞Δํ๏Λߟ͑Δ Make your App reference ENV_VARIABLES from Vite 7VFKTWUPLZPΦϯϥΠϯ.FFUVQ

     !XBLBNTIB /BPLJ:"."%"
  2. !XBLBNTIB *OUSPEVDFNZTFMG /BPLJ:"."%"ࢁా௚थ XFCϑϩϯτΤϯυɾσΟϕϩούʔ6*σβΠφʔ גࣜձࣾϦΫϧʔτʢॴଐʣ גࣜձࣾϦʔΨϧϑΥʔεʢۀ຿ҕୗʣ

  3. <ཁ݅> Ϗϧυ͝ͱʹΞϓϦέʔγϣϯͷৼΔ෣͍Λม͍͑ͨ

  4. Ϗϧυ͝ͱʹΞϓϦέʔγϣϯͷৼΔ෣͍Λม͍͑ͨ ։ൃ༻ͱຊ൪༻ͱͰૄ௨͢Δαʔό͕ҟͳΔ

  5. ։ൃ༻ͱຊ൪༻ͱͰૄ௨͢Δαʔό͕ҟͳΔ w'JSFCBTFͷΑ͏ͳ4BB4 w ։ൃ༻ͱຊ൪༻ͷͲͪΒͱૄ௨͢Δͷ͔ʹΑͬͯ࢖༻͢Δ"1*,FZ͕มΘΔ wࣗલͰ։ൃ͍ͯ͠Δ"1*αʔό w "1*ͷ#BTF63-͕ҟͳΔ͸ͣ

  6. ຊ൪༻్Ͱૄ௨αʔό͕ҟͳΔ w'JSFCBTFͷΑ͏ͳ4BB4 w ͲͪΒͱૄ௨͢Δͷ͔ʹΑͬͯ࢖༻͢Δ"1*,FZ͕มΘΔ wࣗલͰ։ൃ͍ͯ͠Δ"1*αʔό w "1*ͷ#BTF63-͕ҟͳΔ͸ͣ ͜ΕΒͷ஋͸ϋʔυίʔσΟϯά͠ʹ͍͘ ΞϓϦίʔυͷ֎Ͱ؅ཧ͍ͨ͠ ԿΒ͔ͷํ๏Ͱάϩʔόϧఆ਺Խ͠ɺϏϧυ࣌ʹΞϓϦίʔυ͔Β

    ࢀর͍ͤͨ͞
  7. 7JUFతʹ͸FOWϑΝΠϧͰ؅ཧ͢Δͷ͕ηΦϦʔ

  8. 7JUFతʹ͸FOWϑΝΠϧͰ؅ཧ͢Δͷ͕ηΦϦʔ vite —-mode stg ͱ࣮ߦ͢Δͱ .env ͱ .env.stg ͕ಡΈࠐ·ΕΔ

  9. 7JUFతʹ͸FOWϑΝΠϧͰ؅ཧ͢Δͷ͕ηΦϦʔ vite —-mode stg ͱ࣮ߦ͢Δͱ .env ͱ .env.stg ͕ಡΈࠐ·ΕΔ .envͷ਺͕૿͑ΔʹͭΕ؅ཧ͕େมʹͳΔ😨

  10. ελσΟαϓϦ&/(-*4)ͷ։ൃ؀ڥ͸Ҏ্͋Δ

  11. ελσΟαϓϦ&/(-*4)ͷ։ൃ؀ڥ͸Ҏ্͋Δ ͜͏ͳΔͱ΋͏੩తϑΝΠϧͰ؅ཧ͢Δͷ͸ʜ😇 ίϚϯυϥΠϯҾ਺Ͱ೚ҙͷ஋Λ7JUFʹ౉͍ͨ͠

  12. ελσΟαϓϦ&/(-*4)ͷ։ൃ؀ڥ͸Ҏ্͋Δ ☝͜Εͱಉ͜͡ͱΛ΍Γ͍ͨ

  13. <ղܾࡦ> 7JUFͷ+BWB4DSJQU"1*ͱZBSHTΛۦ࢖͢Δ

  14. None
  15. None
  16. 👍

  17. σϝϦοτ7JUFͷγϯϓϧ͕͞ଛͳΘΕΔ wઃఆϑΝΠϧ͕webpack.configͱେࠩͳ͍ن໛ʹͳͬͨ w ͔ͤͬ͘vite.configͰγϯϓϧΠʔδʔʹॻ͚͍ͯͨͷʹʜ w7BOJMMB+4Ͱॻ͘͜ͱʹͳͬͨ w vite.configͳΒ5ZQF4DSJQUͰهड़Ͱ͖Δͷʹʜ w UTOPEFಋೖ͢Δ͔UTDͰࣄલʹτϥϯεύΠϧ͢Ε͹5ZQF4DSJQU࢖͍ଓ͚ΒΕΔ͚Ͳɺ ͦ͜·Ͱ΍Δʜʁ

  18. 5IBOLZPV😃