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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

👍

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

5IBOLZPV😃