Containerize a basic HTML/CSS/JS app with nerdctl & Rancher Desktop

Containers 📦 are a convenient and secure way to deploy an app and all its libraries/dependencies on a customer’s infrastructure. In this tutorial, I’m going to use the FREE tools containerd’s nerdctl & Rancher Desktop (not Docker Desktop) to containerize a basic HTML/CSS/JS app I wrote using KaboomJS.

Prerequisite: free Rancher Desktop, AKA double-click for K8s 🙌, to get nerdctl and a local container registry.

Here’s a nice Rancher Desktop installation video

In this tutorial, we will

1. Write a Dockerfile based on a secure nginx unprivileged image that hosts the JS app
2. Build a container image based on the Dockerfile and run the locally-hosted container image
3. BONUS CONTENT: Log into Docker Hub (free), push the container image, and run the container image hosted on Docker Hub

1/3 Write a Dockerfile based on a secure nginx unprivileged image that hosts the JS app

Create a Custom Top-Down Shooter in 5 Minutes using kaboom.js and repl.it

Start by cloning the shooter-jade repo of the game I built in Kaboom that simulates a basic HTML/CSS/JS app you’ve written and built.

git clone https://github.com/jwsy/shooter-jade.git
cd shooter-jade

Here’s the very simple nginx unprivileged Dockerfile example I’ve recently added (just the five lines shown below!) that adds the app’s files to the nginx-unprivileged container image that is minimal. Compare this to an nginx:alpine container image that has convenient but unnecessary tools like vi and wget.

An important security feature of containers shown in this Dockerfile is that you have to explicitly expose the default nginx port and no other ports are open.