cmc/cleberg.net
My personal web garden & blog.
clone: git clone https://gitbay.org/cmc/cleberg.net.git
d67c36e5d61790b5d53a841b2bd27519b333c24b
unsigned
author: Christian Cleberg <hello@cleberg.net> · 2024-04-08T16:20:20Z
.../blog/2024-04-08-docker-local-web-server.org | 137 +++++++++++++++++++++ 1 file changed, 137 insertions(+) new file mode 100644 @@ -0,0 +1,137 @@ +#+title: Using Docker Desktop to Create a Development Web Server +#+date: <2024-04-08 Mon 10:05:45> +#+description: Learn how to launch local web servers with Docker Desktop. +#+filetags: dev, nginx +#+slug: docker-local-web-server + +When developing websites locally, I often use a simple Python web server to +observe the changes. + +#+begin_src shell +python3 -m http.server +#+end_src + +However, this approach has its limitations. For example, this approach does not +enable logging or access controls. You also need to customize =SimpleHTTPServer= +if you have advanced needs from your web server. + +So, I went to find an alternative that is almost as easy and far more extensible +and found Docker Desktop to be a suitable replacement. + +* Docker Desktop + +** Installation + +[[https://www.docker.com/products/docker-desktop/][Docker Desktop]] is a desktop GUI for the phenomenal Docker container software. +This allows you to manage containers, images, volumes, environments, and +extensions via an easy-to-use GUI. + +To install, open the link above and click the =Download= button for your +platform. I'm going through this process on an M2 Macbook, so I downloaded the +Mac - Apple Chip version. + +Open the installer and follow the installation process until the application +finishes the installation process. + +#+caption: Docker Desktop on macOS +[[https://img.cleberg.net/blog/20240408-docker-local-web-server/docker-desktop.png]] + +** Creating an Nginx Container + +I prefer to use the command line to create containers, so the following commands +will be input via the terminal. + +The following command will create a container, using the =nginx= image: + +1. =-d=: Run this container as a daemon (detach) +2. =-p=: Allocate a port in the format =<external>:<internal>= +3. =-i=: Keep STDIN open even if not attached +4. =-t=: Allocate a pseudo-TTY +5. =-p=: Allocate a port in the format =<external>:<internal>= +6. =--rm=: Remove the container once it's done running + +#+begin_src shell +docker run -it --rm -d -p 8000:80 --name web nginx +#+end_src + +You can navigate to [[http://localhost:8000]] to see the resulting page. + +#+caption: Default Nginx Container +[[https://img.cleberg.net/blog/20240408-docker-local-web-server/default-container.png]] + +** Customizing the Nginx Container + +Now that I have a container running the Nginx web server, I need to link some +volumes so that I can modify the site configuration and provide the web files to +serve. + +Let's start with the new command, which adds two volumes: + +1. =<your_content>:/usr/share/nginx/html=: This is the directory where you will + provide the web pages for the server to serve. +2. =<your_config>:/etc/nginx/conf.d/default.conf=: This is the Nginx + configuration file for your site. + +To see the updates, you can delete the previous container in the GUI or run +=docker stop web= to stop the container. Once stopped, you can run the new +=docker run= command below. + +#+begin_src shell +docker run -it -d -p 8000:80 --name web -v ~/Source/cleberg.net/.build:/usr/share/nginx/html -v ~/Source/cleberg.net/nginx-config.conf:/etc/nginx/conf.d/default.conf nginx +#+end_src + +Here's an example of my development configuration file. + +#+begin_src conf +# nginx-config.conf +server { + server_name cleberg.net www.cleberg.net; + + root /usr/share/nginx/html; + index index.html; + autoindex on; + + access_log /var/log/nginx/cleberg.net.access.log; + error_log /var/log/nginx/cleberg.net.error.log; + + location / { + try_files $uri $uri/ =404; + } + + listen [::]:80; + listen 80; +} +#+end_src + +[[https://img.cleberg.net/blog/20240408-docker-local-web-server/custom-container.png]] + +* Customizing Deployment Actions + +I am currently blogging with [[https://emacs.love/weblorg/][weblorg]], which uses a custom =publish.el= file to +build the static site. Within this file, I have configured my deployment process +to check for the =ENV= variable in the shell and if it's set to =prod=, the +script will set the base URLs to =https://cleberg.net=. If not, it sets the base +URLs to =localhost:8000= (which matches the port used in the container above). + +Therefore, I have modified my =build.sh= script to build with =localhost= URLs +if =ENV= is not set to =prod=. It also prevents the build process from sending +the built files to the production web server. + +#+begin_src shell +#!/bin/bash + +if [ "$ENV" == "prod" ]; then + echo "Environment = Production" && \ + rm -rf .build/* && \ + emacs --script publish.el && \ + scp -r .build/* ubuntu:/var/www/cleberg.net/ +else + echo "Environment = Development" && \ + rm -rf .build/* && \ + emacs --script publish.el +fi +#+end_src + +You can modify the container in numerous ways and this approach allows you to +create complex scenarios for your web development purposes. I highly recommend +switching over to a container-based approach for simple, local web development.