Tauri-React .env (環境変数) 取得する

• 複数種類ありそうですが .env使う例です。

• import.meta.env. 使います

• .env

VITE_API_URL=https://hoge

• 取得

• src/App.tsx

let API_URL= import.meta.env.VITE_API_URL;

---

Tauri + React 、外部API接続 Rust reqwest

• React画面 から、Tauriバックエンド経由して。外部API接続メモです。
• reqwest traits 使用
• CORS (Cross-Origin Resource Sharing) エラー対策で、CORS無　APIサーバーに通信可能にする。
• tauri::command 使うと、front JSから　Rust関数呼び出し可能らしい。

---

### 構成

• Tauri
• reqwest traits
• Rust
• React
• node 20
• windows 11

---

### 書いたコード

• https://github.com/kuc-arc-f/tauri_1ex/tree/main/tauri-app

---

### reqwest 追加など

• Cargo.toml
• tauri-app/src-tauri/Cargo.toml

[dependencies]
tauri = { version = "2", features = [] }
tauri-plugin-opener = "2"
serde = { version = "1", features = ["derive"] }
serde_json = "1"
reqwest = { version = "0.11", features = ["json"] }
tokio = { version = "1", features = ["macros", "rt-multi-thread"] }

• dev modeで、起動しておきます。

npm run tauri dev

---

• main.rs
• tauri-app/src-tauri/src/main.rs
• handler 関数 (post_external_api )を追加
• main内で、実行。
• frontから。JSON エンコード送信、handler内で、 JSONデコード
• reqwest::Client, POST送信
• 外部APIから、レスポンス受信。front画面に出力。

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

use tauri::command;
use serde::{Deserialize, Serialize};
use reqwest::Client;
use reqwest::Error;
use serde_json::json;
use serde_json::Value;

#[derive(Deserialize)]
struct PostData {
  key: String,
  value: String,
}

#[derive(Serialize)]
struct ApiResponse {
    success: bool,
    message: String,
}

#[command]
async fn post_external_api(url: String, data: String) -> String {
  let client = reqwest::Client::new();

  // JSON文字列をValue型にデコード
  let value: Value = serde_json::from_str(&data).expect("REASON");
  println!("url={}", url );

  // POSTリクエストを送信
  let response: Result<reqwest::Response, Error> = client.post(url)
      .json(&value)
      .send()
      .await;
  // ステータスコードを取得
  //println!("Response: {}", body);
  println!("response: {:?}", response);
  match response {
    Ok(resp) => {
        let status = resp.status();
        println!("HTTP Status: {}", status.to_string());

        if status.is_success() {
            println!("Request was successful!");
            let body = resp.text().await.unwrap();
            println!("Response.body: {}", body);
            let payload = json!({
              "status": 200,
              "body": &body.to_string()
            });
            //println!("payload: {}", payload);
            return payload.to_string();
        } else if status.is_client_error() {
            println!("Client error occurred!");
            let body = resp.text().await.unwrap();
            let payload = json!({
              "status": 400,
              "body": &body.to_string()
            });
            return payload.to_string();
        } else if status.is_server_error() {
            println!("Server error occurred!");
            let body = resp.text().await.unwrap();
            let payload = json!({
              "status": 500,
              "body": &body.to_string()
            });
            return payload.to_string();
        }
    }
    Err(err) => {
        eprintln!("Request failed: {}", err);
    }
  }

  //let body = response.expect("REASON").text().await.unwrap();
  return "".to_string();
}

fn main() {
  tauri::Builder::default()
  .invoke_handler(tauri::generate_handler![post_external_api])
  .run(tauri::generate_context!())
  .expect("error while running tauri application");
  tauri_app_lib::run();
}

---

### React 側

• 共通関数: tauri-app/src/lib/ApiUtil.ts
• invoke 、 @tauri-apps/api/core から読込できました。

import { invoke } from "@tauri-apps/api/core";
let API_BASE = import.meta.env.VITE_API_URL;

  post: async function(path: string, item: any): Promise<any>
  {
    ...
     const response = await invoke("post_external_api", { url: apiUrl, data: JSON.stringify(postData) });
    ...
  }

---

• 画面から呼ぶ
• tauri-app/src/App.tsx

import ApiUtil from "./lib/ApiUtil";

    const fetchTodos = async () => {
      try {
        const res = await ApiUtil.post(`/api/tauri_todo14_list`, {});
      } catch (error) {
        console.error("Error fetching todos:", error);
      }
    };

---

Tauri + Svelte Chat(チャット画面) 作例、外部API接続 Rust

• 前のworkers版のチャット画面を、Tauriに移植する試作メモです。
• 外部API接続は、前の 自作した Rust handler関数で連携する方法。

---

### 構成

• Tauri
• reqwest traits
• Rust
• Svelte
• node 20
• windows 11
• CF-workers
• tailwindcss : 4.0.0-beta.8

---

### 書いたコード

• https://github.com/kuc-arc-f/tauri_1ex/tree/main/tauri-sveltechat

---