[Fly.io] Use Fly.io to Deploy a static website on Fly via Dockerfile

Posted on Edited on In , , Views: Word count in article: 5.5k Reading time ≈ 5 mins.

Deploy a static website on Fly via Dockerfile

Fly.io is a global application distribution platform. We run your code in Firecracker microVMs around the world.

Getting an application running on Fly is essentially working out how to package it as a deployable image. Once packaged it can be deployed to the Fly infrastructure to run on the global application platform.

In this guide we’ll learn how to deploy a static site on Fly.

To be fair, a static site isn’t an app. So we’re really talking about deploying an app to serve some static content.

In this demonstration, we’ll use goStatic - https://hub.docker.com/r/pierrezemb/gostatic, a tiny web server written in Go that lets us serve static files with very little configuration. We’ll provide a Dockerfile and our content for Fly to transmogrify into a web server running in a VM.

You can clone all the files needed for this example from the hello-static Github repository - https://github.com/fly-apps/hello-static to a local directory:

1
git clone https://github.com/fly-apps/hello-static

Alternatively, you can create all the files manually as you work through this guide.

Install Flyctl and Login

To configure our application and deploy it on Fly.io, we need flyctl, our CLI app for managing apps on Fly. If you’ve already installed it, carry on. If not, hop over to our installation guide - https://fly.io/docs/getting-started/installing-flyctl/. Once that’s installed you’ll want to log in to Fly.

Putting the App Together

At this point, if you have a local clone of the hello-static repository, you could go ahead and run fly launch from its root directory and get the static site deployed without further ado. But that wouldn’t be very illuminating. Let’s go through what’s included in the example repository and why.

If you cloned the repository, your new app already has its own directory. Otherwise, create one. This isn’t just for tidiness, or for letting flyctl detect your app by the fly.toml in the working directory (although these are good reasons). It also ensures that no extra files get included in the build context - https://docs.docker.com/engine/reference/commandline/build/ when the Docker image gets built.

We’ll do everything from within this directory:

1
cd hello-static

The Site

Our example will be a simple static site. That can be as trivial as a single index.html file. Let’s make it only slightly more complicated by writing two html files and having them link to each other.

Put these html files into a subdirectory of their own, called public. Files in this directory are the ones our goStatic server will serve. Create the hello-static/public directory if needed.

Here’s index.html, which is the landing page:

1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
    <title>
      Hello from Fly
    </title>
  </head>
  <body>
    <h1>Hello from Fly with a static web site</h1>
      <p>Or <a href="goodbye.html">goodbye.</a></p>
  </body>
</html>

Here’s goodbye.html.

1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
    <title>
      Still Hello from Fly
    </title>
  </head>
  <body>
    <h1>You say goodbye</h1>
      <p>But I say <a href="index.html">hello.</a></p>
  </body>
</html>

The Dockerfile

goStatic is designed to run in a container, and the image is available at Docker Hub. This is super convenient for us, because Fly apps need container images too!

We can use the goStatic image as a base image. We just have to copy our site’s files to /srv/http/ in the image.

Here’s our Dockerfile to do that:

1
2
FROM pierrezemb/gostatic
COPY ./public/ /srv/http/

The Dockerfile should be placed in the working directory (here, hello-static).

Configuring the App for Fly.io

We set the initial configuration for the app by running flyctl launch. This takes care of setting the app name, the Fly.io organization it belongs to, and a region to deploy to. It also generates a fly.toml file with more configuration settings.

The hello-static repository contains a fly.toml that will be detected by flyctl launch; you can use it to configure your app. Otherwise, a new fly.toml will be generated with flyctl launch, and we can edit it.

1
2
3
4
5
6
7
8
9
10
11
12
13
flyctl launch

Creating app in /Users/chris/trystatic/hello-static
Scanning source code
Detected a Dockerfile app
? App Name (leave blank to use an auto-generated name): gostatic-example
Automatically selected personal organization: Chris Nicoll
? Select region: ewr (Secaucus, NJ (US))
Created app gostatic-example in organization personal
Wrote config file fly.toml
? Would you like to setup a Postgresql database now? No
? Would you like to deploy now? No
Your app is ready. Deploy with `flyctl deploy`

This has configured the app with some default parameters, and generated a fly.toml configuration file for us.

Before deploying, we need to do one more thing. goStatic listens on port 8043 by default, but the default fly.toml assumes port 8080. Edit internal_port in the services section to reflect this:

1
2
3
4
5
6
[[services]]
  http_checks = []
  internal_port = 8043
  processes = ["app"]
  protocol = "tcp"
  script_checks = []

Now we’re ready to deploy:

1
flyctl deploy

The output should end something like this, if everything has gone well:

1
2
3
4
==> Monitoring deployment

 1 desired, 1 placed, 1 healthy, 0 unhealthy [health checks: 1 total, 1 passing]
--> v0 deployed successfully

Viewing Your Static Site

The quickest way to browse your newly deployed application is with the flyctl open command.

1
2
3
flyctl open

opening http://gostatic-example.fly.dev ...

Your browser will be sent to the displayed URL. Fly will auto-upgrade this URL to an HTTPS secured URL.

References

[1] - https://fly.io/docs/getting-started/static/

[2] Deploy app servers close to your users · Fly - https://fly.io/

[3] Hands-on with Fly - https://fly.io/docs/hands-on/start/

[4] Deploy Your Application via Dockerfile - https://fly.io/docs/getting-started/dockerfile/

[5] Installing flyctl - https://fly.io/docs/getting-started/installing-flyctl/

[6] fly-apps/hello-static: Create a static website with Fly - HTML from the example - https://github.com/fly-apps/hello-static

[7] docker build | Docker Documentation - https://docs.docker.com/engine/reference/commandline/build/

[8] pierrezemb/gostatic - Docker Image | Docker Hub - https://hub.docker.com/r/pierrezemb/gostatic