前回はcargo install cargo-generateまで実行したので、その続きです。

taki@DESKTOP-4VF3GEO:~/rust$ cargo generate --git https://github/rustwasm/wasm-pack-template
Error: Please check if the Git user / repository exists.

Caused by:
    failed to resolve address for github: Name or service not known; class=Net (12)
taki@DESKTOP-4VF3GEO:~/rust$ cargo generate --git https://github.com/rustwasm/wasm-pack-template
🤷   Project Name : mandelbrot
🔧   Destination: /home/taki/rust/mandelbrot ...
🔧   Generating template ...
[ 1/12]   Done: .appveyor.yml
[ 2/12]   Done: .gitignore
[ 3/12]   Done: .travis.yml
[ 4/12]   Done: Cargo.toml
[ 5/12]   Done: LICENSE_APACHE
[ 6/12]   Done: LICENSE_MIT
[ 7/12]   Done: README.md
[ 8/12]   Done: src/lib.rs
[ 9/12]   Done: src/utils.rs
[10/12]   Done: src
[11/12]   Done: tests/web.rs
[12/12]   Done: tests
🔧   Moving generated files into: `/home/taki/rust/mandelbrot`...
💡   Initializing a fresh Git repository
✨   Done! New project created /home/taki/rust/mandelbrot
taki@DESKTOP-4VF3GEO:~/rust$ tree mandelbrot/
mandelbrot/
├── Cargo.toml
├── LICENSE_APACHE
├── LICENSE_MIT
├── README.md
├── src
│   ├── lib.rs
│   └── utils.rs
└── tests
    └── web.rs

2 directories, 7 files
taki@DESKTOP-4VF3GEO:~/rust$ curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
sh: 139: [: x86_64: unexpected operator
info: downloading wasm-pack
info: successfully installed wasm-pack to `/home/taki/.cargo/bin/wasm-pack`
taki@DESKTOP-4VF3GEO:~/rust$ cd mandelbrot/
taki@DESKTOP-4VF3GEO:~/rust/mandelbrot$ wasm-pack build
[INFO]: Checking for the Wasm target...
info: downloading component 'rust-std' for 'wasm32-unknown-unknown'
info: installing component 'rust-std' for 'wasm32-unknown-unknown'
[INFO]: Compiling to Wasm...
   Compiling proc-macro2 v1.0.43
   Compiling quote v1.0.21
   Compiling unicode-ident v1.0.3
   Compiling wasm-bindgen-shared v0.2.82
   Compiling log v0.4.17
   Compiling syn v1.0.99
   Compiling cfg-if v1.0.0
   Compiling once_cell v1.14.0
   Compiling bumpalo v3.11.0
   Compiling wasm-bindgen v0.2.82
   Compiling wasm-bindgen-backend v0.2.82
   Compiling wasm-bindgen-macro-support v0.2.82
   Compiling wasm-bindgen-macro v0.2.82
   Compiling console_error_panic_hook v0.1.7
   Compiling mandelbrot v0.1.0 (/home/taki/rust/mandelbrot)
warning: function `set_panic_hook` is never used
 --> src/utils.rs:1:8
  |
1 | pub fn set_panic_hook() {
  |        ^^^^^^^^^^^^^^
  |
  = note: `#[warn(dead_code)]` on by default

warning: `mandelbrot` (lib) generated 1 warning
    Finished release [optimized] target(s) in 4.32s
[INFO]: Installing wasm-bindgen...
[INFO]: Optimizing wasm binaries with `wasm-opt`...
[INFO]: Optional fields missing from Cargo.toml: 'description', 'repository', and 'license'. These are not necessary, but recommended
[INFO]: :-) Done in 10.50s
[INFO]: :-) Your wasm pkg is ready to publish at /home/taki/rust/mandelbrot/pkg.
taki@DESKTOP-4VF3GEO:~/rust/mandelbrot$ npm init wasm-app www
npx: installed 1 in 2.333s
🦀 Rust + 🕸 Wasm = ❤
taki@DESKTOP-4VF3GEO:~/rust/mandelbrot$ cd www
taki@DESKTOP-4VF3GEO:~/rust/mandelbrot/www$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 587 packages from 362 contributors and audited 655 packages in 5.343s

18 packages are looking for funding
  run `npm fund` for details

found 100 vulnerabilities (3 low, 30 moderate, 53 high, 14 critical)
  run `npm audit fix` to fix them, or `npm audit` for details
taki@DESKTOP-4VF3GEO:~/rust/mandelbrot/www$ npm run start

> create-wasm-app@0.1.0 start /home/taki/rust/mandelbrot/www
> webpack-dev-server

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/taki/rust/mandelbrot/www
ℹ ｢wdm｣: Hash: c3b265e5d69900dfbb35
Version: webpack 4.43.0
Time: 268ms
Built at: 09/11/2022 8:48:14 AM
                           Asset       Size  Chunks                         Chunk Names
                  0.bootstrap.js    3.4 KiB       0  [emitted]
8e8fa9289c240ac706a1.module.wasm  872 bytes       0  [emitted] [immutable]
                    bootstrap.js    369 KiB    main  [emitted]              main
                      index.html  297 bytes          [emitted]
Entrypoint main = bootstrap.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./bootstrap.js 40 bytes {main} [built]
[./bootstrap.js] 279 bytes {main} [built]
[./index.js] 56 bytes {0} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/hello-wasm-pack/hello_wasm_pack.js] 698 bytes {0} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
    + 21 hidden modules
ℹ ｢wdm｣: Compiled successfully.

問題無く完了しました。

嵌まったので、その内容をQiitaにまとめました。

https://qiita.com/takishita2nd/items/9bb402c215b39af0fdc4

今回はDockerで前回までのTodoアプリを動作させます。

ということで、Dockerfileの作成。

FROM rust:1.63

WORKDIR /todo

COPY Cargo.toml Cargo.toml
COPY ./src ./src
COPY ./templates ./templates

RUN cargo build --release

RUN cargo install --path .

CMD ["todo"]

これを作成したら、

> docker build -t todo-app .

実はこのビルドに一番時間がかかっていたりする。

まず、Dockerのインストールから始める。

WSL環境なのですが、それでもDockerのサイトからインストーラーを起動してインストールする必要あり。

でも、ビルドにエラーが出てきて、

いろいろ試してみた結果、rustのバージョンを新しくしたら通った、という結果でした。

そして、ビルドが通ったら

> docker run -p 8080:8080 todo-app

で起動します。

今回、（いままで避けてきた）Dockerをやってみたけど、

意外と簡単だなぁ。

前回の続き

データベースに追加する処理と削除する処理を作成していきます。

まず、フォームのデータを取得するのにserdeクレートを使用します。

[package]
name = "todo"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
actix-web = { version = "4.1" }
actix-rt = { version = "2.7" }
thiserror = { version = "1.0" }
askama = { version = "0.11" }
rusqlite = { version = "0.28", features=["bundled"] }
r2d2 = { version = "0.8" }
r2d2_sqlite = { version = "0.21" }
serde = { version = "1.0", feature = ["derive"] }

次に追加、削除のパスを作成していきます。

まずは追加処理。

#[post("/add")]
async fn add_todo (
    params: web::Form<AddParams>,
    db: web::Data<r2d2::Pool<SqliteConnectionManager>>,
) -> Result<HttpResponse, MyError> {
    let conn = db.get()?;
    conn.execute("INSERT INTO todo (text) VALUES (?)", &[&params.text])?;
    Ok(HttpResponse::SeeOther()
        .header(header::LOCATION, "/")
        .finish())
}

同じように削除処理。

#[post("/delete")]
async fn delete_todo(
    params: web::Form<DeleteParams>,
    db: web::Data<r2d2::Pool<SqliteConnectionManager>>,
) -> Result<HttpResponse, MyError> {
    let conn = db.get()?;
    conn.execute("DELETE FROM todo WHERE id=?", &[&params.id])?;
    Ok(HttpResponse::SeeOther()
        .header(header::LOCATION, "/")
        .finish())
}

そして、追加・削除のパスをサーバに登録。

#[actix_rt::main]
async fn main() -> Result<(), actix_web::Error> {
    let manager = SqliteConnectionManager::file("todo.db");
    let pool = Pool::new(manager).expect("Failed to inithialize the connection pool.");
    let conn = pool.get().expect("Failed to get the connection from the pool.");
    conn.execute(
        "CREATE TABLE IF NOT EXISTS todo (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            text TEXT NOT NULL
        )",
        params![],
    )
    .expect("Failed to create a table 'todo'.");
    HttpServer::new(move || {
        App::new()
        .service(index)
        .service(add_todo)
        .service(delete_todo)
        .data(pool.clone())
        })
        .bind("0.0.0.0:8080")?
        .run()
        .await?;
    Ok(())
}