WASMに環境変数を渡す方法

はじめに

DioxusやYewなどwasmをフロントで利用するアプリを開発しているとき環境変数を渡すのに少し工夫が必要です。

以下の記事を試してみたのですが、ちょっと違う方法もあったので記事にしてみます。
How to pass environment variables to a Rust WASM application like Yew, Dioxus and Leptos as a TypeScript Developer

結論

参考記事とほぼ同じですが、ビルドスクリプトを利用するとファイルを出力せずに環境変数をwasmファイルから読み込めます。
参考

build.rs

use dotenv::from_filename;
use std::env;

fn main() {
  from_filename(".env（dotenv_path）").ok();
  for (key, value) in env::vars() {
    println!("cargo:rustc-env={}={}", key, value); // 
  }
}

呼び出す側は

option_env!(環境変数名)

で呼び出せます。

Dioxus（Web）の例

#![allow(non_snake_case)]
use dioxus::prelude::*;
fn main() {
  // Init logger
  dioxus_logger::init(Level::INFO).expect("failed to init logger");
  launch(App);
}

#[component]
fn App() -> Element {
    let env_val = option_env!("ENV_NAME"); // ← option_env!を使って呼び出す

    rsx! {
        ~~
    }
}

注意

出力されるwasmファイルにenvの内容を書き込むため、APIキーなどシークレット情報は渡すべきではないかもしれません。（wasmに限った話ではなく、フロントで環境変数を扱うとき全般で注意が必要だと思いますが…）

最後に

最近は、DioxusもYewもSSRに対応しているので基本的にはサーバー側で環境変数を扱って処理を書く方がいいかもですかね。

余談

envを扱うクレートって今何がいいんですかね…
dotenvyも開発止まっちゃってるみたいですし…
もしいいクレートがあれば教えてください！