This guide shows you how to deploy an Gatsby application to Edgio.
Connector
This framework has a connector developed for Edgio. See Connectors for more information.
Prerequisites
Before proceeding, you will need an Edgio property. Create one now if you do not already have one.
System Requirements
Sign up for Edgio
Deploying requires an account on Edgio. Sign up here for free.
Install the Edgio CLI
If you have not already done so, install the Edgio CLI.
Bash
1npm i -g @edgio/cli@latest
Getting Started
If you don’t already have a Gatsby application, you can create one using:
Bash
1npm install -g gatsby-cli2gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world
You should now have a working Gatsby site. Run
gatsby develop
to see the application running on localhost:8000
.Configure your project for Edgio by running the following command in your project’s root directory:
Bash
1edgio init --edgioVersion latest
This will automatically add all of the required dependencies and files to your project. These include:
- The
@edgio/core
package - The
@edgio/gatsby
package - The
@edgio/cli
package edgio.config.js
routes.js
- A default routes file that sends all requests to your Gatsby static site. Update this file to add caching or proxy some URLs to a different origin.
Running Locally
You can test the integration of the Sites router with your gatsby site locally using:
Bash
1edgio dev
Deploying
Deploy your app to the Sites by running the following command in your project’s root directory:
Bash
1edgio deploy
Your initial CDN-as-code deployment will generate system-defined origin configurations along with those defined within your
edgio.config.js
. Learn more about system-defined origins.See Deployments guide for more information.
Routing
The default
routes.js
file created by edgio init
sends all requests to the Gatsby static site.JavaScript
1// This file was added by edgio init.2// You should commit this file to source control.34const { Router } = require('@edgio/core/router')5const { gatsbyRoutes } = require('@edgio/gatsby')67module.exports = new Router().use(gatsbyRoutes)
Adding routes to a different origin
To proxy some URLs to a different origin, you need first to configure that origin in your
edgio.config.js
file.For example:
JavaScript
1// edgio.config.js23module.exports = {4 origins: [5 {6 name: 'origin',7 override_host_header: process.env.LEGACY_BACKEND_DOMAIN || 'legacy.my-site.com',8 hosts: [9 {10 scheme: 'match',11 location: [12 {13 hostname: process.env.LEGACY_BACKEND_DOMAIN || 'legacy.my-site.com',14 },15 ],16 },17 ],18 tls_verify: {19 use_sni: true,20 allow_self_signed_certs: true,21 sni_hint_and_strict_san_check: process.env.LEGACY_BACKEND_DOMAIN || 'legacy.my-site.com',22 },23 },24 ],25}
Using environment variables here allows you to configure different legacy domains for each Edgio environment.
Then you can add routing and caching rules to your
routes.js
file. Note that gatsbyRoute must be declared last as it acts as a fallback route.For example:
JavaScript
1// routes.js23const { Router } = require('@edgio/core/router')4const { gatsbyRoutes } = require('@edgio/gatsby')56module.exports = new Router()7 .use(gatsbyRoutes)8 .get('/some/legacy/url/:p', ({ proxy }) => {9 proxy('legacy')10 })
Check CDN-as-code and Caching guides for more information.