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 7VFKT
   WUPLZP
   ΦϯϥΠϯ
   .FFUVQ  !XBLBNTIB
   /BPLJ
   :"."%"
   
2. !XBLBNTIB *OUSPEVDF
   NZTFMG /BPLJ
   :"."%"
   
   ࢁా
   ௚थ XFC
   ϑϩϯτΤϯυɾσΟϕϩούʔ
   
   6*
   σβΠφʔ
   גࣜձࣾϦΫϧʔτʢॴଐʣ
   גࣜձࣾϦʔΨϧϑΥʔεʢۀ຿ҕୗʣ
3. <
   ཁ݅
   >
   Ϗϧυ͝ͱʹΞϓϦέʔγϣϯͷৼΔ෣͍Λม͍͑ͨ
4. Ϗϧυ͝ͱʹΞϓϦέʔγϣϯͷৼΔ෣͍Λม͍͑ͨ ։ൃ༻ͱຊ൪༻ͱͰૄ௨͢Δαʔό͕ҟͳΔ
5. ։ൃ༻ͱຊ൪༻ͱͰૄ௨͢Δαʔό͕ҟͳΔ w'JSFCBTF
   ͷΑ͏ͳ
   4BB4
   w ։ൃ༻ͱຊ൪༻ͷͲͪΒͱૄ௨͢Δͷ͔ʹΑͬͯ࢖༻͢Δ
   "1*
   ,FZ
   ͕มΘΔ wࣗલͰ։ൃ͍ͯ͠Δ
   "1*
   αʔό
   w "1*
   ͷ
   #BTF
   63-
   ͕ҟͳΔ͸ͣ
6. ຊ൪༻్Ͱૄ௨αʔό͕ҟͳΔ w'JSFCBTF
   ͷΑ͏ͳ
   4BB4
   w ͲͪΒͱૄ௨͢Δͷ͔ʹΑͬͯ࢖༻͢Δ
   "1*
   ,FZ
   ͕มΘΔ
   wࣗલͰ։ൃ͍ͯ͠Δ
   "1*
   αʔό
   w "1*
   ͷ
   #BTF
   63-
   ͕ҟͳΔ͸ͣ ͜ΕΒͷ஋͸ϋʔυίʔσΟϯά͠ʹ͍͘
   ΞϓϦίʔυͷ֎Ͱ؅ཧ͍ͨ͠
   ԿΒ͔ͷํ๏Ͱάϩʔόϧఆ਺Խ͠ɺϏϧυ࣌ʹΞϓϦίʔυ͔Β ࢀর͍ͤͨ͞
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
    Λۦ࢖͢Δ
16. 👍
17. σϝϦοτ
    7JUF
    ͷγϯϓϧ͕͞ଛͳΘΕΔ wઃఆϑΝΠϧ͕
    webpack.config
    ͱେࠩͳ͍ن໛ʹͳͬͨ
    w ͔ͤͬ͘
    vite.config
    Ͱγϯϓϧ
    
    Πʔδʔʹॻ͚͍ͯͨͷʹʜ
    w7BOJMMB+4
    Ͱॻ͘͜ͱʹͳͬͨ
    w vite.config
    ͳΒ
    5ZQF4DSJQU
    Ͱهड़Ͱ͖Δͷʹʜ
    w UTOPEF
    ಋೖ͢Δ͔
    UTD
    ͰࣄલʹτϥϯεύΠϧ͢Ε͹
    5ZQF4DSJQU
    ࢖͍ଓ͚ΒΕΔ͚Ͳɺ ͦ͜·Ͱ΍Δʜʁ
18. 5IBOL
    ZPV
    😃