$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

wakamsha

June 16, 2021
Tweet

More Decks by wakamsha

Other Decks in Technology

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