Wasmer Edge Quickstart for deploying an HTTP Server

In this quickstart guide, you'll learn how to deploy an HTTP server on the Wasmer Edge. We will be using Rust's popular Axum (opens in a new tab) framework to create a simple HTTP server.

Prerequisites

The project requires the following tools to be installed on your system:

Deploying an HTTP Server

Install Wasmer CLI

Install the latest version of Wasmer CLI following the instructions here.

ℹ️

You can see all commands available with wasmer --help. You can also read the CLI documentation online.

⚠️

Please check that you have the latest version of wasmer runtime as this tutorial depends on version 4.1.1 or higher.

Log in into Wasmer

Create a new account in Wasmer (opens in a new tab). Then, log in into the Wasmer CLI and follow the provided steps to provide the CLI access to your Wasmer account.

wasmer login

Initialize a Sample Axum Project

Now that you have installed the CLI and logged in, you can initialize a new Axum project.

Run the following command to initialize a new Axum project:

$ cargo new wasmer-hello --bin
     Created binary (application) `wasmer-hello` package
$ cd wasmer-hello

Your directory structure should look like this:

wasmer-hello

src
- main.rs
Cargo.toml

Next, add the following dependencies to your Cargo.toml file:

Cargo.toml

[package]
name = "wasmer-hello"
version = "0.1.0"
edition = "2021"
 
[dependencies]
axum = { version = "=0.6.9", features = ["tokio", "json"] }
serde = { version = "1.0.160", features = ["derive"] }
tracing = "0.1.37"
tracing-subscriber = { version = "0.3.16", features = ["fmt"] }
 
# NOTE: We need to pin and replace some dependencies to achieve wasix compatibility.
tokio = { version = "=1.24.2", default-features = false, features = ["full"] }
parking_lot = { version = "=0.12.1", features = ["nightly"] }
 
[patch.crates-io]
tokio = { git = "https://github.com/wasix-org/tokio.git", branch = "wasix-1.24.2" }
socket2 = { git = "https://github.com/wasix-org/socket2.git", branch = "v0.4.9" }
libc = { git = "https://github.com/wasix-org/libc.git", branch = "master" }

🚧

We need to pin and replace some dependencies to achieve wasix compatibility. To learn more about these patches, click here (opens in a new tab).

After updating your dependencies, let's update the src/main.rs file with the following code:

src/main.rs

use axum::{routing::get, Router};
use std::net::SocketAddr;
 
#[tokio::main]
async fn main() {
    // Building our application with a single Route
    let app = Router::new().route("/", get(handler));
 
    let port = std::env::var("PORT").unwrap_or("80".to_string());
    let port = port.parse::<u16>().unwrap_or_else(|_| {
        eprintln!("Invalid port number: {}", port);
        std::process::exit(1);
    });
    // Run the server with hyper on http://127.0.0.1:3000
    let addr = SocketAddr::from(([127, 0, 0, 1], port));
    eprintln!("Listening on http://{}", addr);
    axum::Server::bind(&addr)
        .serve(app.into_make_service())
        .await
        .unwrap();
}
 
async fn handler() -> &'static str {
    "Hello, Axum ❤️ WASMER!"
}

Note: We are using the PORT environment variable to set the port number for our server to listen on. This is for local development. On wasmer edge, the port number should be set to 80. That's why it's the default value. This is done so because wasmer edge expects the server to listen on port 80.

Now, let's build our project using WASIX:

$ cargo wasix build --release
   ...
   Compiling serde_urlencoded v0.7.1
   Compiling serde_path_to_error v0.1.11
   Compiling wasmer-hello v0.1.0 (/.../Wasmer/edge-quickstart/wasmer-hello)
    Finished dev [unoptimized + debuginfo] target(s) in 10.69s
info: Post-processing WebAssembly files

🚨

It might happen that your build fails. One of the easiest way to resolve this is updating your lock file with cargo update.

Test the server locally

We can test out server locally by running the following command:

Terminal 1	Terminal 2
wasmer-hello `$ wasmer run ./target/wasm32-wasmer-wasi/release/wasmer-hello.wasm --net --env PORT=3000 Listening on http://127.0.0.1:3000`	curl `$ curl http://localhost:3000 Hello, Axum ❤️ WASMER!`

Deploying to Wasmer Edge

Now let's add our deployment configuration.

For this we need two files:

wasmer.toml - This file contains the configuration for the Wasmer Registry.
app.yaml - This file contains the configuration for the Wasmer Edge deployment.

wasmer.toml

[package]
name = "<your-namespace>/wasmer-hello"
version = "0.1.0"
description = "Sample Axum server for Wasmer Edge"
license = "MIT"
wasmer-extra-flags = "--net --enable-threads --enable-bulk-memory"
 
[[module]]
name = "wasmer-hello"
source = "./target/wasm32-wasmer-wasi/release/wasmer-hello.wasm"
abi = "wasi"
 
[[command]]
name = "proxy"
module = "wasmer-hello"
runner = "https://webc.org/runner/wasi"

app.yaml

kind: wasmer.io/App.v0
name: <your-username>-hello
description: Sample Axum server for Wasmer Edge
package: <your-namespace>/<your-username>-hello

ℹ️

You can also check if your configuration is valid by running wasmer publish --dry-run. To learn more about the wasmer.toml file, click here.

Let's Deploy!

$ wasmer deploy
  Found local package in wasmer.toml
  Publish package '<your-namespace>/wasmer-hello'? yes
  Publishing package...
  [1/2] ⬆️   Uploading...
  [2/2] 📦  Publishing...
  Successfully published package `<your-namespace>/<your-username>[email protected]`
  Package '<your-namespace>/[email protected]' published successfully!
  Writing updates app.yaml...
  Publishing app...
  App published successfully!
  Access your app at: https://x20imtdf68qv.id.wasmer.app

ℹ️

wasmer deploy automatically publishes your package and bumps the minor version. You can check all the available options with wasmer deploy --help or click here to see the full documentation.

Now you can access your axum server at the url provided in the output by the wasmer deploy command.

Conclusion

Congratulations! You have successfully deployed your first Axum server to Wasmer Edge.

Additional Resources

To learn more about Wasmer Edge, click here (opens in a new tab).

Checkout our full tutorial here (opens in a new tab) for wasix-axum.

Static Site React Static Site