You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Michael Yuan e6b1d2755f
Feat: add Docker+wasm examples (#309)
* Add a Docker+wasm sample application featuring a WasmEdge-based microservice, a MySQL database and an Nginx web server for frontend UI files.

Signed-off-by: Michael Yuan <michael@secondstate.io>

* Add a logo to indicate Docker+wasm compatibility. Add project descriptions to README.

Signed-off-by: Michael Yuan <michael@secondstate.io>

* Add the example for WasmEdge + Kafka / Redpanda + MySQL application to take messages from a queue and save into a database table.

Signed-off-by: Michael Yuan <michael@secondstate.io>

* Add a SVG icon to indicate Docker + Wasm req

Signed-off-by: Michael Yuan <michael@michaelyuan.com>

Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Update the docker compose files for the new Docker Desktop release

Signed-off-by: Michael Yuan <michael@secondstate.io>

* Use the correct platform to be compatible with Docker Desktop 4.15

Signed-off-by: Michael Yuan <michael@secondstate.io>

* Update README.md

Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Update wasmedge-kafka-mysql/README.md

Signed-off-by: Michael Yuan <michael@michaelyuan.com>

Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Update wasmedge-kafka-mysql/README.md

Signed-off-by: Michael Yuan <michael@michaelyuan.com>

Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Update wasmedge-kafka-mysql/etl/Dockerfile

Signed-off-by: Michael Yuan <michael@michaelyuan.com>

Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Update wasmedge-mysql-nginx/README.md

Signed-off-by: Michael Yuan <michael@michaelyuan.com>

Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Update wasmedge-mysql-nginx/README.md

Signed-off-by: Michael Yuan <michael@michaelyuan.com>

Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Update wasmedge-mysql-nginx/README.md

Signed-off-by: Michael Yuan <michael@michaelyuan.com>

Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Update wasmedge-mysql-nginx/README.md

Signed-off-by: Michael Yuan <michael@michaelyuan.com>

Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Update wasmedge-mysql-nginx/README.md

Signed-off-by: Michael Yuan <michael@michaelyuan.com>

Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Update wasmedge-mysql-nginx/README.md

Signed-off-by: Michael Yuan <michael@michaelyuan.com>

Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Update wasmedge-mysql-nginx/README.md

Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Update wasmedge-mysql-nginx/README.md

Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Update wasmedge-mysql-nginx/README.md

Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Update wasmedge-mysql-nginx/README.md

Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

* Change the Nginx port to the default non-privileged 8090

Signed-off-by: Michael Yuan <michael@secondstate.io>

* My apologies. Need to correct the syntax for the Nginx port 8090.

Signed-off-by: Michael Yuan <michael@secondstate.io>

* Remove commented lines

Signed-off-by: Michael Yuan <michael@secondstate.io>

* Change wasi/wasm32 to wasi/wasm to conform with the latest spec

Signed-off-by: Michael Yuan <michael@secondstate.io>

* Update README.md

Co-authored-by: Michael Irwin <mikesir87@gmail.com>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>

Signed-off-by: Michael Yuan <michael@secondstate.io>
Signed-off-by: Michael Yuan <michael@michaelyuan.com>
Co-authored-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Co-authored-by: Michael Irwin <mikesir87@gmail.com>
2 years ago
..
.docker Feat: add Docker+wasm examples (#309) 2 years ago
backend Feat: add Docker+wasm examples (#309) 2 years ago
db Feat: add Docker+wasm examples (#309) 2 years ago
frontend Feat: add Docker+wasm examples (#309) 2 years ago
README.md Feat: add Docker+wasm examples (#309) 2 years ago
compose.yml Feat: add Docker+wasm examples (#309) 2 years ago

README.md

Compose sample application

Compatible with Docker+Wasm

This sample demonstrates a web application with a WebAssembly (Wasm) microservice, written in Rust. The Wasm microservice is an HTTP API connected to a MySQL (MariaDB) database. The API is invoked via from JavaScript in a web interface serving static HTML. The microservice is compiled into WebAssembly (Wasm) and runs in the WasmEdge Runtime, a secure and lightweight alternative to natively compiled Rust apps in Linux containers. Checkout this article or this video to learn how the Rust code in this microservice works.

Use with Docker Development Environments

You will need a version of Docker Desktop or Docker CLI with Wasm support.

WasmEdge server with Nginx proxy and MySQL database

Project structure:

.
+-- compose.yml
|-- backend
    +-- Dockerfile
    |-- Cargo.toml
    |-- src
        +-- main.rs
|-- frontend
    +-- index.html
    |-- js
        +-- app.js
|-- db
    +-- orders.json
    |-- update_order.json

The compose.yml file:

services:
  frontend:
    image: nginx:alpine
    ports:
      - 8090:80
    volumes:
      - ./frontend:/usr/share/nginx/html

  backend:
    image: demo-microservice
    build:
      context: backend/
      platforms:
        - wasi/wasm32
    ports:
      - 8080:8080
    environment:
      DATABASE_URL: mysql://root:whalehello@db:3306/mysql
      RUST_BACKTRACE: full
    restart: unless-stopped
    runtime: io.containerd.wasmedge.v1

  db:
    image: mariadb:10.9
    environment:
      MYSQL_ROOT_PASSWORD: whalehello

The compose file defines an application with three services frontend, backend and db. The frontend is a simple Nginx server that hosts static web pages that access the backend web service, in the WasmEdge container, via HTTP port 8080. When deploying the application, docker compose maps port 8090 of the frontend service container to port 8090 of the host as specified in the file. Make sure that ports 8090 and 8080 on the host are not already being used.

Deploy with docker compose

$ docker compose up -d
...
 ⠿ Network wasmedge-mysql-nginx_default       Created
 ⠿ Container wasmedge-mysql-nginx-db-1        Created
 ⠿ Container wasmedge-mysql-nginx-frontend-1  Created
 ⠿ Container wasmedge-mysql-nginx-backend-1   Created

Expected result

$ docker compose ps
NAME                              COMMAND                  SERVICE             STATUS              PORTS
wasmedge-mysql-nginx-backend-1    "order_demo_service.…"   backend             running             0.0.0.0:8080->8080/tcp, :::8080->8080/tcp
wasmedge-mysql-nginx-db-1         "docker-entrypoint.s…"   db                  running             3306/tcp
wasmedge-mysql-nginx-frontend-1   "/docker-entrypoint.…"   frontend            running             0.0.0.0:8090->80/tcp, :::8090->80/tcp

After the application starts, go to http://localhost:8090 in your web browser to display the web frontend.

Using the API with curl

As an alternative to the web frontend, you can use curl to interact with the WasmEdge API directly (the backend service).

When the WasmEdge web service receives a GET request to the /init endpoint, it would initialize the database with the orders table.

curl http://localhost:8080/init

When the WasmEdge web service receives a POST request to the /create_order endpoint, it extracts the JSON data from the POST body and inserts an Order record into the database table. To insert multiple records, use the /create_orders endpoint and POST a JSON array of Order objects:

curl http://localhost:8080/create_orders -X POST -d @db/orders.json

When the WasmEdge web service receives a GET request to the /orders endpoint, it gets all rows from the orders table and return the result set in a JSON array in the HTTP response.

curl http://localhost:8080/orders

When the WasmEdge web service receives a POST request to the /update_order endpoint, it extracts the JSON data from the POST body and update the Order record in the database table that matches the order_id in the input data.

curl http://localhost:8080/update_order -X POST -d @db/update_order.json

When the WasmEdge web service receives a GET request to the /delete_order endpoint, it deletes the row in the orders table that matches the id GET parameter.

curl http://localhost:8080/delete_order?id=2