Using Wasmer Edge as a CDN

In this tutorial, you will learn how to use Wasmer Edge as a CDN to host your static assets. We'll be using the static-web-server (opens in a new tab)

Prerequisites

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

Rust (opens in a new tab)

Deploying a Static Site

Install Wasmer

Click here for instructions on how to install Wasmer if you haven't done it already!

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 the project

We'll initialize the project with the static-site template.

Navigate to the directory where you want to create the project and run the following command:

wasmer app create

The above command will give you the following prompt:

✔ Who should own this app? · wasmer-user
✔ What should be the name of the app? · static-website
✔ What would you like to deploy? · Start with a template
✔ Select a language (6 available) · N/A
✔ Selected template · CDN Starter - demo url https://cdn-wasmer-starter.wasmer.app/
✔ Unpacked template
✔ Do you want to deploy the app now? · no

The prompt may vary depending depending on wasmer runtime version, look for the CDN starter.

The above command will initialize a project with the following structure.

- image1.jpg
- image2.jpg
- image3.jpg
- config.toml
app.yaml
wasmer.toml
LICENSE
README.md

You can also add other files like css, js, videos, pdfs, etc.

⚠️

Maximum size of all the files combined should not exceed 500MB.

Deploying the app

Now, let's deploy the app.

wasmer deploy

The above command will prompt you with the following:

Loading local package (manifest path: /tmp/tmp.61AOVENLwX/.)
✔ Correctly built package locally
✔ Package correctly uploaded
✔ Succesfully pushed release to namespace wasmer-user on the registry
Deploying app static-website (wasmer-user) to Wasmer Edge...
 
App static-website (wasmer-user) was successfully deployed 🚀
https://static-website-wasmer-user.wasmer.app
 
→ Unique URL: https://rogh5izc8j9o.id.wasmer.app
→ Dashboard:  https://wasmer.io/apps/wasmer-user/static-website
 
Waiting for new deployment to become available...
(You can safely stop waiting now with CTRL-C)
.
𖥔 Deployment complete

And it's done! The files you've put into the ./public directory is now accessible from anywhere, at blazing fast speeds!

ℹ️

And now you can view your Static files at the URL mentioned in the deployment output. You can also view the admin dashboard of your CDN by visiting the URL mentioned in the deployment output.

🌐

You'll need to do wasmer deploy again if you add any new files to the public directory.

ℹ

The deployment URL follows the format https://<app-name>-<app-owner>.wasmer.app

Accessing the files

You can access the files by visiting the URL of your project, followed by the file name.

For example, if you want to access the image1.jpg file, you can visit the following URL:

https://wasmer-edge-as-cdn.wasmer.app/image1.jpg

The same goes for other files as well.

https://wasmer-edge-as-cdn.wasmer.app/image2.jpg
https://wasmer-edge-as-cdn.wasmer.app/image3.jpg

Magic..! 🧙 How does it work?

Have a look inside your local wasmer.toml file, here you'll find how the CDN is setup:

wasmer.toml

[dependencies]
"wasmer/static-web-server" = "^1"
 
[fs]
"/public" = "public" # <-- Here the CDN files are being copied
"/settings" = "settings"
 
[[command]]
name = "script"
module = "wasmer/static-web-server:webserver" # <-- Here the module to run is being selected
runner = "https://webc.org/runner/wasi"
 
[command.annotations.wasi]
main-args = ["-w", "/settings/config.toml"] # <-- Here the static webserver is being configured

Aha..! But a static webserver isn't a CDN..!

Wasmer Edge has dynamically distributed workers globally with replicated state. This in combination with a fast and efficient webserver will serve data all over the world at minimal latency.

Conclusion

In this tutorial, we learned how to use Wasmer Edge as a CDN using the static-web-server package for hosting your static assets.