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)
The project requires the following tools to be installed on your system:
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.2.3 or higher.
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.
We'll initialize the project with the
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:
App type: > Static website # Select Static website HTTP server Browser shell JS Worker (experimental) Python Application Who should own this package?: <your-namespace> No package found or specified. What should the package be called? It will be published under wasmer: <your-app-name> # This will be the package name of your CDN What should be the name of the app? <NAME>.wasmer.app: <your-app-name> # This will be the name of your app Would you like to publish the app now? no # Select no for now Writing app config to '/path/to/your/project/app.yaml' To (re)deploy your app, run 'wasmer deploy'
Select the above configuration mentioned in the comments and press enter.
The above command will initialize a blank project with the following structure.
As you might notice, this project uses the
static-web-server package which is a static web server written in Rust.
Most notably, it supports changing the compression level, cache control, cors, and more. All these configurations can be super useful when configuring a CDN.
So, let's add a
config.toml file in your top level directory for
[general] #### Address & Root dir host = "::" port = 8080 root = "/app/public" # 👈🏼 Change the root directory to the public directory for static assets
The above configuration is the default configuration of the
static-web-server package. More info about it can be found
here (opens in a new tab).
Now, let's add the following configuration to the
[package] name = "<your-namespace>/<your-app-name>" version = "0.1.0" description = "<your-namespace>/<your-app-name> CDN on Wasmer Edge" [dependencies] "wasmer/static-web-server" = "^1" [fs] "/app" = "." # 👈🏼 Add the app directory as a volume mapping it to the root directory [[command]] name = "script" module = "wasmer/static-web-server:webserver" runner = "https://webc.org/runner/wasi" [command.annotations.wasi] # 👈🏼 Add config.toml as an argument for the webserver main-args = ["-w", "/app/config.toml"]
By default the static website template generates a
public/index.html, we can remove it if we don't need it (
And now, let's add some images in our
public directory to host. I'll be using some free images from unsplash (opens in a new tab).
This is how the directory structure looks like now:
You can also add other files like css, js, videos, pdfs, etc.
Maximum size of all the files combined should not exceed 500MB.
Now, let's deploy the app.
$ wasmer deploy
The above command will prompt you with the following:
Loaded app from: /path/to/your/dir/app.yaml Publish new version of package '<your-namespace>/<your-app-name>'? yes Publishing package... [1/2] ⬆️ Uploading... [2/2] 📦 Publishing... Successfully published package `<your-namespace>/<your-app-name>@0.1.0` Waiting for package to become available..... Package '<your-namespace>/<your-app-name>@0.1.0' published successfully! Deploying app <your-namespace>-<your-app-name>... ✅ App <your-namespace>/<your-namespace>-<your-app-name> was successfully deployed! > App URL: https://wasmer-edge-as-cdn.wasmer.app > Versioned URL: https://rogh5izceeq4.id.wasmer.app > Admin dashboard: https://wasmer.io/apps/wasmer-edge-as-cdn Waiting for new deployment to become available... (You can safely stop waiting now with CTRL-C) . New version is now reachable at https://wasmer-edge-as-cdn.wasmer.app Deployment complete
And now you can view your Static files at the URL mentioned above. You can also view the admin dashboard of your CDN by visiting the URL mentioned above.
You'll need to do
wasmer deploy again if you add any new files to the
The url of your project will be different from the one mentioned above.
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:
The same goes for other files as well.
In this tutorial, we learned how to use Wasmer Edge as a CDN using the
static-web-server package for hosting your static assets.