DEV Community 👩‍💻👨‍💻

sidpalas
sidpalas

Posted on

[VIDEO] In-Depth Caddy Webserver Set-Up Walkthrough (localhost → Google Cloud)

This is a long video, but in 60 minutes it covers a full progression from running a webserver locally all the way to deploying it on Google Cloud Platform!

You will learn about webservers, cloud-based virtual machines, Docker, and more!

I have provided timestamps and some descriptions if you want to find specific portions of the video.

If you find the video useful, a like/subscription is always appreciated!

Timestamps:
1:30 - Workshop start
2:06 - Load file in Chrome

  • Manually loading a .html file from a web browser will display it, but doesn't allow for anything beyond a single page.

3:23 - Run Python development web server (locally)

  • A single line of python can be used to run a local webserver:
python3 -m http.server --cgi 8000

4:47 - Access site via internal IP address via another device on the same network

  • By looking up the local IP address of the computer running the local server (using ifconfig | grep 192) we can connect from another device on the same network.

6:44 - Install Caddy (locally)

  • Caddy is a webserver that handles https setup automatically!

7:03 - Run Caddy webserver (locally)
8:23 - Configure Caddy using Caddyfile

  • A Caddyfile is a how we define the configuration for Caddy

12:05 - Set up GCP Compute Engine Virtual Machine with Debian Linux

  • This effectively gives us a server running in a Google datacenter!
  • Running a single f1-micro VM falls within the google free tier so it shouldn't cost anything!

13:23 - Connect to VM via SSH
14:31 - Install Caddy (on VM)
16:04 - Run Caddy webserver (on VM)
17:11 - Configure firewall rule for port 80

  • By default, GCP does not allow access to the virtual machine, so in order to connect, we have to configure a firewall rule.

18:46 - Explaining why we want to use a container

  • By using Docker, we can ensure that the site will run the same on the Debian virtual machine as on your local system (whichever OS it happens to be running)

22:00 - Install Docker (locally)
23:18 - Run Python Docker image
24:23 - Docker exec into the container

  • Docker exec ... bash provides a shell session within the container. This is similar to SSH'ing into a remote machine.

26:00 - Run Python development web server (locally, inside container)
27:00 - Set up port forwarding to Python container

  • By default, the ports of the container are isolated from those of the host system, so they must be explicitly forwarded in order to access.

28:26 - Run Python development web server Take 2
29:27 - Find Caddy container image on DockerHub

  • DockerHub is like GitHub, but for container images.

30:35 - Run Caddy webserver (locally, inside container)
33:00 - Define Dockerfile

  • We can make modifications to and build on top of the public image we are using!

34:39 - Build custom Caddy container image
35:34 - Run custom Caddy webserver (locally, inside container)
36:05 - Modify and rebuild custom Caddy container
37:27 - Configure Docker to mount host filesystem

  • Because the website files are stored outside of the container, configuring Docker to mount the proper directory allows Caddy to serve those files.

39:58 - Run Caddy web server with bind mounts (locally, inside container)

  • At this point we have everything working how we need it to and are ready to deploy it to the GCP virtual machine!

42:25 - Set up GCP Compute Engine Virtual Machine with Container Optimized OS
45:36 - Copy files to VM using gcloud scp
47:54 - Run Caddy web server with bind mounts (on VM, inside container)
50:22 - Configure domain DNS settings
52:22 - Configure Caddyfile for HTTPS

54:29 - Run Caddy web server with HTTPS (on VM, inside container)
55:36 - Accept Let's Encrypt terms of service
56:37 - Use environment variable to avoid TOS dialog
57:23 - Explaining why we also need to add a bind mount to save HTTPS certificate outside the container

  • This is necessary because we want to persist the HTTPS certificate even if the container gets restarted. By mounting the host filesystem we can store that file outside the boundaries of the container.

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠