【IT】Svelte入門２（環境変数）

皆さま
こんにちは

今日は、前回作成したアプリは、コード内に
APIキーが埋め込まれておりますので環境変数から読込むように変更します。

変更前のコード

// App.svelte 
・
・
const API_URL = "https://api.openweathermap.org/data/2.5/weather";
・
・

// APIリクエスト(1111には実際のAPIーKEYを入力ください）
    axios
      .get(`${API_URL}?q=${city}&units=metric&appid=1111&lang=ja&units=metric`)

今回、Vite環境ですので以下を参考にして
プロジェクトフォルダー直下に
「.env.local」を作成してAPIーKEYを記入します。

.env # 全ての場合に読み込まれる
.env.local # 全ての場合に読み込まれ、gitには無視される
.env.[mode] # 指定されたモードでのみ読み込まれる
.env.[mode].local # 指定されたモードでのみ読み込まれ、gitには無視される

https://ja.vite.dev/guide/env-and-mode.html#env-files

環境変数とモード

APIリクエスト(1111には実際のAPIーKEYを入力ください）

「.env.local」
ーーーーーーーーーーーーーーーーーーーーー
VITE_API_KEY="1111"
ーーーーーーーーーーーーーーーーーーーーー

App.svelteで環境変数を読み込みます。

// App.svelte 

const API_URL = "https://api.openweathermap.org/data/2.5/weather";
const APIKEY = import.meta.env.VITE_API_KEY;　→追加

次にAPIのURLにAPI-KEYを環境変数へ変更します。

// App.svelte 

    // APIリクエスト
    axios
      .get(`${API_URL}?q=${city}&units=metric&appid=${APIKEY}&lang=ja&units=metric`)

変更前と変わらず表示出来ました。

では