Edgio

Web CDN

Deploying your web application behind Edgio is the fastest and easiest way to start seeing the performance benefits made possible by the Edgio network. In this guide we’ll show you how to:
  • Create a new Edgio project
  • Configure edge caching using EdgeJS
  • Deploy your site
If any point, you want a more detailed guide, we’ve got that too.

Example

Network Diagram

As shown below, Edgio becomes the main CDN for your site:
traffic
Requests for your site will now pass through Edgio’s globally distributed edge network and then to your origin server.
A full production deployment requires changing your site’s DNS to allow requests to come to Edgio first. View our production guide for that process.

Prerequisites

Setup requires:

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.
Bash
1npm i -g @layer0/cli@latest

Create your project

For creating a new site on Edgio, you can choose between:
  • Edgio Developer Console - interactive UI for creating your site and deploy using generated command
  • Edgio CLI - interactively initialize your project directly from the command line

Create via Edgio Developer Console

  1. First, login to the Developer Console and locate the New Site button.
    New Site button
  2. Next, enter your site’s domain name. This will eventually become the origin backend that you can proxy to once your site is setup.
    Add New Site dialog
  3. Once your site is created, copy the generated command into your terminal (💻) and run it at the root of your project. This will initialize your project source code with Edgio and automatically deploy your site.
    Quick Start Deploy Command
An example command for www.yourdomain.com:
Bash
1npx @layer0/cli@latest init \
2 --name yourdomain.com \
3 --environment production \
4 --origin www.yourdomain.com \
5 --deploy
  1. Finally, you can start to update your Edgio router (routes.js) and configuration file (layer0.config.js) to proxy your origin and setup caching rules.

Create via CLI

Now that the CLI has been installed, create a new project using:
Bash
10 init

Project Structure

After you run 0 init, Edgio creates the following files:
  • routes.js: defines routes to be cached and prefetched, as well as what to pass through without modification and what to serve up as static content
  • layer0.config.js: various configuration options to tune your project

Configure Backend to Proxy

To proxy your existing site with Edgio, we’ll need to define that backend in the layer0.config.js file that was just created.
JavaScript./layer0.config.js
1// This file was automatically added by layer0 deploy.
2// You should commit this file to source control.
3module.exports = {
4 backends: {
5 origin: {
6 // The domain name or IP address of the origin server
7 domainOrIp: "example.com",
8
9 // When provided, the following value will be sent as the host header
10 // when connecting to the origin. If omitted, the host header from
11 // the browser will be forwarded to the origin.
12 hostHeader: "example.com"
13 },
14 },
15}

Configure Caching

We need to configure caching in our newly-created project. The project contains some generic starter routes already, but these should be customized to fit your site. These routes should be added in the routes.js file.
At this point, the only item that should require changing is a path match. We provide a basic sample to get you started.

Routes File

JavaScript./routes.js
1import { Router } from '@layer0/core/router'
2
3// const ONE_HOUR = 60 * 60
4// const ONE_DAY = 24 * ONE_HOUR
5
6export default new Router()
7 // Here is an example where we cache api/* at the edge but prevent caching in the browser
8 // .match('/api/:path*', ({ proxy, cache }) => {
9 // cache({
10 // edge: {
11 // maxAgeSeconds: ONE_DAY,
12 // staleWhileRevalidateSeconds: ONE_HOUR,
13 // },
14 // browser: {
15 // maxAgeSeconds: 0,
16 // serviceWorkerSeconds: ONE_DAY,
17 // },
18 // })
19 // proxy('origin')
20 // })
21
22 // send any unmatched request to origin
23 .fallback(({ proxy }) => proxy('origin'))
This example will proxy and cache at the edge all requests that match the path pattern defined using .match(...). The .fallback(...) handler takes all unmatched requests and also proxies them to origin, a backend that we just defined inside the layer0.config.js file.

Cache Constants

Cache constants in the routes.js have been abstracted out to enable reuse across different routes. You can also add additional constants such as year.
JavaScript./routes.js
1import { Router } from '@layer0/core/router'
2
3const ONE_HOUR = 60 * 60
4const ONE_DAY = 24 * ONE_HOUR
5const ONE_YEAR = 365 * ONE_DAY
6// ...
Refer to the guides on Routing and Caching for the full syntax to use in your routes.js file.
Learn advanced prefetching techniques to achieve the best possible performance.

Deploy to Edgio

Now that you’re satisfied with your site in local development, it’s time to deploy it to the Edgio Cloud. Once deployed, you can formally evaluate site performance and QA functionality.
Deploy your site with the following command:
Bash
10 deploy # Root of project
Once your project code is up and running, you can view its performance from within the app.layer0.co cockpit. Using the tools available here, you can understand the caching behavior of the routes you have added. Continue adding routes and dialing in your config until you are ready to launch the site and code.

Issues?

If you have any issues during this process, check our forums for assistance.