Skip to content

Commit

Permalink
update static site docs with http_service, new nginx example (#1827)
Browse files Browse the repository at this point in the history 
* update static site docs with http_service, new nginx example
  • Loading branch information
@jphenow
jphenow authored Sep 17, 2024
1 parent c409a47 commit b471569
Showing 1 changed file with 147 additions and 34 deletions.
181 changes: 147 additions & 34 deletions languages-and-frameworks/static.html.markerb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,9 @@ layout: language-and-framework-docs
redirect_from: /docs/getting-started/static/
---

<%= partial "/docs/partials/obsolete_doc" %>

<%= partial "partials/intro", locals: { runtime: "static", type: "site" } %>

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://github.com/PierreZ/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.
In this demonstration, we'll use [nginx](https://nginx.org), the world's most popular web server to serve a few 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:

Expand Down Expand Up @@ -38,9 +34,9 @@ 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.
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.
Put these HTML files into a subdirectory of their own, called `public`. Files in this directory are the ones our nginx server will serve. Create the `hello-static/public` directory if needed.

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

Expand Down Expand Up @@ -69,22 +65,23 @@ Here's `goodbye.html`.
</head>
<body>
<h1>You say goodbye</h1>
<p>But I say <a href="index.html">hello.</a></p>
<p>But I say <a href="/">hello.</a></p>
</body>
</html>
```

### _The Dockerfile_

goStatic is designed to run in a container, and the [image](https://hub.docker.com/r/pierrezemb/gostatic) is available at Docker Hub. This is super convenient for us, because Fly apps need container images too!
nginx can be run in a container, and the official nginx image is available on [Docker Hub](https://hub.docker.com/_/nginx/). This is super convenient for us, because Fly apps use container images!

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.
We can use the nginx image as a base image. We just have to copy our site's files to `/usr/share/nginx/html` in the image.

Here's our Dockerfile to do that:

```docker
FROM pierrezemb/gostatic
COPY ./public/ /srv/http/
FROM nginx:alpine

COPY public /usr/share/nginx/html
```

The Dockerfile should be placed in the working directory (here, `hello-static`).
Expand All @@ -100,30 +97,99 @@ The `hello-static` repository contains a `fly.toml` that will be detected by `fl
flyctl launch
```
```output
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
Creating app in /Users/jphenow/workspace/hello-static
We're about to launch your app on Fly.io. Here's what you're getting:

Organization: Jon Phenow (fly launch defaults to the personal org)
Name: hello-static (generated)
Region: Denver, Colorado (US) (this is the fastest region for you)
App Machines: shared-cpu-1x, 1GB RAM (most apps need about 1GB of RAM)
Postgres: <none> (not requested)
Redis: <none> (not requested)
Tigris: <none> (not requested)

? Do you want to tweak these settings before proceeding? No
Created app 'hello-static' in organization 'personal'
Admin URL: https://fly.io/apps/hello-static
Hostname: hello-static.fly.dev
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`
Validating /Users/jphenow/workspace/hello-static/fly.toml
✓ Configuration is valid
==> Building image
Remote builder fly-builder-little-haze-7293 ready
Remote builder fly-builder-little-haze-7293 ready
==> Building image with Docker
--> docker host: 24.0.7 linux x86_64
[+] Building 0.4s (7/7) FINISHED
=> [internal] load .dockerignore 0.2s
=> => transferring context: 100B 0.2s
=> [internal] load build definition from Dockerfile 0.2s
=> => transferring dockerfile: 90B 0.2s
=> [internal] load metadata for docker.io/library/nginx:alpine 0.1s
=> [internal] load build context 0.1s
=> => transferring context: 151B 0.1s
=> [1/2] FROM docker.io/library/nginx:alpine@sha256:a5127daff3d6f4606be3100a252419bfa84fd6ee5cd74d0feaca1a5068f97dcf 0.0s
=> CACHED [2/2] COPY public /usr/share/nginx/html 0.0s
=> exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:1e96a09c0ae89bb9b8dc5dcdcfde700fb1ee2677c20dc9d5f324a5b768328dda 0.0s
=> => naming to registry.fly.io/hello-static:deployment-01J8071W7G3S6R2MC5JJX915CC 0.0s
--> Building image done
==> Pushing image to fly
The push refers to repository [registry.fly.io/hello-static]
deployment-01J8071W7G3S6R2MC5JJX915CC: digest: sha256:2ba357ed3fcf6eeb3a5e4c7a6e2300040cf6f414db69ce2e3b7d6030507deb5e size: 2196
--> Pushing image done
image: registry.fly.io/hello-static:deployment-01J8071W7G3S6R2MC5JJX915CC
image size: 43 MB

Watch your deployment at https://fly.io/apps/hello-static/monitoring

Provisioning ips for hello-static
Dedicated ipv6: 2a09:8280:1::46:a909:0
Shared ipv4: 66.241.124.149
Add a dedicated ipv4 with: fly ips allocate-v4

This deployment will:
* create 2 "app" machines

No machines in group app, launching a new machine

WARNING The app is not listening on the expected address and will not be reachable by fly-proxy.
You can fix this by configuring your app to listen on the following addresses:
- 0.0.0.0:8080
Found these processes inside the machine with open listening sockets:
PROCESS | ADDRESSES
---------------------------------------------*----------------------------------------
nginx: master process nginx -g daemon off; | 0.0.0.0:80, [::]:80
/.fly/hallpass | [fdaa:0:7300:a7b:d827:5e53:ee2d:2]:22
nginx: worker process | 0.0.0.0:80, [::]:80

Creating a second machine to increase service availability
Finished launching new machines
-------
NOTE: The machines for [app] have services with 'auto_stop_machines = "stop"' that will be stopped when idling

-------
Checking DNS configuration for hello-static.fly.dev

Visit your newly deployed app at https://hello-static.fly.dev/

```

This has configured the app with some default parameters, and generated a `fly.toml` configuration file for us.
This has configured the app with some default parameters, generated a `fly.toml`, attached a shared IPv4, created a dedicated IPv6, and deployed our image 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`](/docs/reference/configuration/#the-services-sections) section to reflect this:
Before the app will work though, we need to do one more thing. nginx listens on port 80 by default, but the default `fly.toml` assumes port 8080. Edit `internal_port` in the [`services`](/docs/reference/configuration/#the-http_service-section) section to reflect this:

```toml
[[services]]
http_checks = []
internal_port = 8043
processes = ["app"]
protocol = "tcp"
script_checks = []
[http_service]
internal_port = 80
force_https = true
auto_stop_machines = 'stop'
auto_start_machines = true
min_machines_running = 0
processes = ['app']
```

Now we're ready to deploy:
Expand All @@ -135,10 +201,59 @@ flyctl deploy
The output should end something like this, if everything has gone well:

```
==> Monitoring deployment
==> Verifying app config
Validating /Users/jphenow/workspace/hello-static/fly.toml
✓ Configuration is valid
--> Verified app config
==> Building image
Remote builder fly-builder-little-haze-7293 ready
Remote builder fly-builder-little-haze-7293 ready
==> Building image with Docker
--> docker host: 24.0.7 linux x86_64
[+] Building 0.4s (7/7) FINISHED
=> [internal] load build definition from Dockerfile 0.2s
=> => transferring dockerfile: 90B 0.2s
=> [internal] load .dockerignore 0.2s
=> => transferring context: 100B 0.1s
=> [internal] load metadata for docker.io/library/nginx:alpine 0.1s
=> [internal] load build context 0.1s
=> => transferring context: 151B 0.1s
=> [1/2] FROM docker.io/library/nginx:alpine@sha256:a5127daff3d6f4606be3100a252419bfa84fd6ee5cd74d0feaca1a5068f97dcf 0.0s
=> CACHED [2/2] COPY public /usr/share/nginx/html 0.0s
=> exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:1e96a09c0ae89bb9b8dc5dcdcfde700fb1ee2677c20dc9d5f324a5b768328dda 0.0s
=> => naming to registry.fly.io/hello-static:deployment-01J807A99M034C3P47SBXFZZVZ 0.0s
--> Building image done
==> Pushing image to fly
The push refers to repository [registry.fly.io/hello-static]
052eb83bbfc7: Layer already exists
b0f60355fd52: Layer already exists
027907faf592: Layer already exists
11134cc97d7f: Layer already exists
f7a5847cdca9: Layer already exists
aec1e8cf14f5: Layer already exists
717b3a077b07: Layer already exists
2ff96b2e5450: Layer already exists
63ca1fbb43ae: Layer already exists
deployment-01J807A99M034C3P47SBXFZZVZ: digest: sha256:2ba357ed3fcf6eeb3a5e4c7a6e2300040cf6f414db69ce2e3b7d6030507deb5e size: 2196
--> Pushing image done
image: registry.fly.io/hello-static:deployment-01J807A99M034C3P47SBXFZZVZ
image size: 43 MB

Watch your deployment at https://fly.io/apps/hello-static/monitoring

-------
Updating existing machines in 'hello-static' with rolling strategy

-------
✔ [1/2] Cleared lease for 3287eedf034558
✔ [2/2] Cleared lease for 4d89447f4117d8
-------
Checking DNS configuration for hello-static.fly.dev

Visit your newly deployed app at https://hello-static.fly.dev/

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

## _Viewing your static site_
Expand All @@ -149,9 +264,7 @@ The quickest way to browse your newly deployed application is with the `flyctl a
flyctl apps open
```
```output
opening https://gostatic-example.fly.dev ...
opening https://hello-static.fly.dev ...
```

Your browser will be sent to the displayed URL.


0 comments on commit b471569

Please sign in to comment.