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

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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. 7JUFతʹ͸FOWϑΝΠϧͰ؅ཧ͢Δͷ͕ηΦϦʔ
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. View Slide

15. View Slide

16. 👍
    

    View Slide

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

    View Slide

18. 5IBOLZPV😃
    

    View Slide