Open2

Rust axum + React , fullstack 作成

React
Rust
axum
knaka Tech-Blogknaka Tech-Blog

概要

  • Rust axum + React 構成の例となります。

[ 公開 2025/06/25 ]

環境

  • Rust: cargo 1.83.0
  • Axum
  • tower-http
  • react 19
  • react-dom 19
  • esbuild

書いたコード

https://github.com/kuc-arc-f/axum_1ex/tree/main/react1

  • react1/Cargo.toml

https://github.com/kuc-arc-f/axum_1ex/blob/main/react1/Cargo.toml

[package]
name = "ssr_example"
version = "0.1.0"
edition = "2024"

[dependencies]
axum = "0.7.5"
tokio = { version = "1.0", features = ["full"] }
tower-http = { version = "0.6.6", features = ["fs"] }
  • react1/src/main.rs
  • ServeDir: public/ 下ファイル読込設定
  • / : React home画面

https://github.com/kuc-arc-f/axum_1ex/blob/main/react1/src/main.rs

async fn main() {
    // `public` フォルダのパス
    let public_dir = "public/static";

    // `ServeDir` ミドルウェアを初期化
    let serve_dir = ServeDir::new(public_dir);

    let app = Router::new()
        .nest_service("/static", serve_dir)
        .route("/", get(root))
        .route("/foo", get(get_foo));

    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
    axum::serve(listener, app).await.unwrap();
}

async fn root() -> Html<&'static str> {
    let s1 = "<html>
  <head>
    <title>welcome</title>
  </head>
  <body>
    <div id='app'></div>
    <script type='module' src='/static/client.js'></script>
  <body>
</html>
";
  Html(&s1)
}

async fn get_foo() -> String {
    String::from("foo\n")
}
  • react1/src/client.tsx
  • React実装

https://github.com/kuc-arc-f/axum_1ex/blob/main/react1/src/client.tsx

import ReactDOM from 'react-dom/client'
import React from 'react'

function App() {
  return (
  <div>
    <h1>Hello</h1>
    <hr />
    <span>welcome , Rust axum +  React</span>
  </div>
  );
}
ReactDOM.createRoot(document.getElementById('app')).render(
    <App />
)
console.log('createRoot')
  • start
npm run dev
  • home

knaka Tech-Blogknaka Tech-Blog

Postgres + Rust axum API + React

  • postgres+ axum 使う例です。

書いたコードです

環境

  • postgres 17
  • Rust: cargo 1.83.0
  • Axum
  • react 19
  • react-dom 19
  • esbuild
  • Cargo.toml

https://github.com/kuc-arc-f/axum_1ex/blob/main/react6_pg/Cargo.toml

[package]
name = "axum_postgres_crud"
version = "0.1.0"
authors = ["naka"]
edition = "2024"

#tower = "0.4"
#tower-http = { version = "0.4", features = ["cors"] }

[dependencies]
axum = "0.7"
chrono = "0.4"
tokio = { version = "1.45.1", features = ["full"] }
tower-http = { version = "0.6.6", features = ["fs"] }
sqlx = { version = "0.7", features = ["runtime-tokio-rustls", "postgres", "macros", "chrono"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
  • react6_pg/src/main.rs

https://github.com/kuc-arc-f/axum_1ex/blob/main/react6_pg/src/main.rs

  • main に、ルーティング設定
#[tokio::main]
async fn main() {
    // `public` フォルダのパス
    let public_dir = "public/static";

    // `ServeDir` ミドルウェアを初期化
    let serve_dir = ServeDir::new(public_dir);

    let database_url = "postgresql://postgresql:admin@localhost/postgresql".to_string();

    let pool = PgPoolOptions::new()
    .max_connections(5)
    .connect("postgres://postgres:admin@localhost/postgres")
    .await.expect("Failed to create pool");

    let state = AppState { pool };

    let app = Router::new()
        .nest_service("/static", serve_dir)
        .route("/api/list", get(get_todos))
        .route("/api/create", post(create_todo))
        .route("/api/delete", post(delete_todo))
        .route("/api/update", post(update_todo))  
        .route("/", get(root))
        .with_state(state);

    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000")
        .await
        .unwrap();

    println!("Server running on http://0.0.0.0:3000");
    axum::serve(listener, app).await.unwrap();
}
  • react6_pg/src-ts/client.tsx
  • React実装

https://github.com/kuc-arc-f/axum_1ex/blob/main/react6_pg/src-ts/client.tsx

import ReactDOM from 'react-dom/client'
import React from 'react'
import App from './App';

ReactDOM.createRoot(document.getElementById('app')).render(
    <App />
)
console.log('createRoot')
  • start
npm run dev