Skip to content

Instantly share code, notes, and snippets.

@jrichardsz
Last active April 20, 2023 05:25
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jrichardsz/547c09a43a3c61b82c2d385af1de0e7c to your computer and use it in GitHub Desktop.
docker hello world templates , dockerhelloworld

Dockerfile

FROM httpd:2.4
WORKDIR /usr/local/apache2/htdocs/
COPY ./index.html /usr/local/apache2/htdocs/
RUN chmod -R 755 /usr/local/apache2/htdocs/
RUN apt update && apt install -y telnet

index.html (wip or comming soon)

<!DOCTYPE html>
<html>
<head>
	<style>
	body, html {
	  height: 100%;
	  margin: 0;
	}

	.bgimg {
	  background-image: url('https://i.ibb.co/GQXptrx/photo-1483304528321-0674f0040030.jpg');
	  height: 100%;
	  background-position: center;
	  background-size: cover;
	  position: relative;
	  color: #333;
	  font-family: "Courier New", Courier, monospace;
	  font-size: 25px;
	}

	.topleft {
	  position: absolute;
	  top: 0;
	  left: 16px;
	}

	.middle {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  text-align: center;
	}

	hr {
	  margin: auto;
	  width: 40%;
	}
	</style>
	<title>Coming Soon!!</title>
	<meta name="description" content="Empowering audiences of all ages to make course corrections and positive choices. Contact Stephanie to visit your organization at 323-333-5493!" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="icon" href="https://i.imgur.com/j9r7z8f.png" />
</head>
<body>

<div class="bgimg">
  <div class="topleft">
    <img src="https://user-images.githubusercontent.com/3322836/233266173-05d4977e-d105-4ff4-ad7e-0a2561a091cf.png" style="width: 200px;"/>
  </div>
  <div class="middle">
    <h1>COMING SOON</h1>
    <hr>
    <p>2 Hours left</p>
	<p>Please come back again later.</p>
  </div>
</div>

</body>
</html>

steps

docker build --rm -t web:1.0.0 .
docker run -d --name mockup -it --rm -p 80:80 web:1.0.0

Dockerfile

FROM httpd:2.4
WORKDIR /usr/local/apache2/htdocs/
COPY ./index.html /usr/local/apache2/htdocs/
RUN chmod -R 755 /usr/local/apache2/htdocs/
RUN apt update && apt install -y telnet

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><SYSTEM_NAME></title>
    <style>
      html, body {
        height: 100%;
      }
      body {
        background-color: #fff;
        background: radial-gradient(circle at center, #fff 0%, #f8f8f8 75%, #ebebeb 100%);
        color: #222;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
        font-size: 1rem;
        line-height: 1.5;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      main {
        padding: 1rem;
        text-align: center;
      }
      h1 {
        font-size: 2.5rem;
        line-height: 1.1;
        margin: 0;
      }
      @media screen and (max-width: 480px) {
        h1 {
          font-size: 1.5rem;
        }
      }
      h1::after {
        content: "";
        background-color: #ffe800;
        background: repeating-linear-gradient(45deg, #ffe800, #ffe800 0.5rem, #222 0.5rem, #222 1.0rem);
        display: block;
        height: 0.5rem;
        margin-top: 1rem;
      }
      img {
        max-width: 100%;
        height: auto;
      }
      p {
        margin: 1rem 0 0 0;
      }
			.topleft {
			  position: absolute;
			  top: 0;
			  left: 16px;
			}
    </style>
  </head>
  <body>
		<div class="topleft">
			<img src="https://i.ibb.co/HTDM2Ht/logo-here-transparent.png" style="width: 200px;"/>
		</div>
    <main>
      <h1><SYSTEM_NAME></h1>
      <p>Our system is under construction.</p>
    </main>
  </body>
</html>

entrypoint.sh

#!/bin/bash

function customize {

  if [[ -z "$SYSTEM_NAME" ]]
  then
    SYSTEM_NAME="acme.com"
  fi

  SYSTEM_NAME=$(echo $SYSTEM_NAME | sed 's_/_\\/_g')
  sed -i -e "s/<SYSTEM_NAME>/$SYSTEM_NAME/" /usr/local/apache2/htdocs/index.html
}

function start {
  httpd-foreground
}

customize
start

steps

docker build --rm -t web:1.0.0 .
docker run -d --name web -it --rm -p 80:80 web:1.0.0
# with custom system name
docker run -d --name web -e SYSTEM_NAME=acme.com -it --rm -p 80:80 web:1.0.0

Dockerfile

FROM node:14

WORKDIR /usr/src/app

# install dependencies
RUN npm install figlet
RUN npm install express

# create

RUN echo "var express = require('express');" >> app.js
RUN echo "var app = express();" >> app.js
RUN echo "var figlet = require('figlet');" >> app.js
RUN echo "app.get('/', function(req, res) {" >> app.js
RUN echo "  res.type('text/plain');" >> app.js
RUN echo "  figlet('Hello World!!', function(err, data) {" >> app.js
RUN echo "      res.send(data)" >> app.js
RUN echo "  });" >> app.js
RUN echo "});" >> app.js
RUN echo "app.listen(process.env.PORT || 8080);" >> app.js

CMD [ "node", "./app.js" ]

build

docker build --rm -t hello-world-docker .

run

docker run -d --name hello-world-docker -p 8080:8080 -t hello-world-docker

test

curl http://localhost:8080

Dockerfile-minimal

FROM python:3

WORKDIR /usr/src/app

# create requirements
RUN echo "bottle" > requirements.txt

# create app.py

RUN echo "from bottle import route, run" >> app.py
RUN echo "@route('/')" >> app.py
RUN echo "def index():" >> app.py
RUN echo "    return 'Horld World'" >> app.py
RUN echo "run(host='0.0.0.0', port=8080)" >> app.py

RUN pip install --no-cache-dir -r requirements.txt

CMD [ "python", "./app.py" ]

build

docker build --rm -t hello-world-docker .

run

docker run -d --name hello-world-docker -p 8080:8080 -t hello-world-docker

test

curl http://localhost:8080

output: Hello World

push to registry

docker login <REGISTRY_HOST>:<REGISTRY_PORT>
docker tag <IMAGE_ID> <REGISTRY_HOST>:<REGISTRY_PORT>/<APPNAME>:<APPVERSION>
docker push <REGISTRY_HOST>:<REGISTRY_PORT>/<APPNAME>:<APPVERSION>

sample:

docker login repo.company.com:3456
docker tag 19fcc4aa71ba repo.company.com:3456/myapp:0.1
docker push repo.company.com:3456/myapp:0.1

Dockerfile

FROM nginx:1.15.8-alpine

#config
copy ./nginx.conf /etc/nginx/nginx.conf

#web
copy . /usr/share/nginx/html/
RUN chown -R nginx:nginx /usr/share/nginx/html/

nginx.conf

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    server {
        listen 80;
         
         location = /status {
             access_log off;
             default_type text/plain;
             add_header Content-Type text/plain;
             return 200 "alive";
        }
        
         location / {
            gzip off;
            root /usr/share/nginx/html/;
            index  index.html;
        }
        
        location ~* \.(js|jpg|png|css)$ {
            root /usr/share/nginx/html/;
        }
    } 
    sendfile        on;
    keepalive_timeout  65;
}

index.html (maintance)

<!doctype html>
<title>Site Maintenance</title>
<style>
  body { text-align: center; padding: 150px; }
  h1 { font-size: 50px; }
  body { font: 20px Helvetica, sans-serif; color: #333; }
  article { display: block; text-align: left; width: 650px; margin: 0 auto; }
  a { color: #dc8100; text-decoration: none; }
  a:hover { color: #333; text-decoration: none; }
</style>

<article>
    <h1>We&rsquo;ll be back soon!</h1>
    <div>
        <p>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment. We&rsquo;ll be back online shortly!</p>
        <p>&mdash; The Team</p>
    </div>
</article>

index.html (wip or comming soon)


<!DOCTYPE html>
<html>
<head>
	<style>
	body, html {
	  height: 100%;
	  margin: 0;
	}

	.bgimg {
	  background-image: url('https://i.ibb.co/GQXptrx/photo-1483304528321-0674f0040030.jpg');
	  height: 100%;
	  background-position: center;
	  background-size: cover;
	  position: relative;
	  color: #333;
	  font-family: "Courier New", Courier, monospace;
	  font-size: 25px;
	}

	.topleft {
	  position: absolute;
	  top: 0;
	  left: 16px;
	}

	.middle {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  text-align: center;
	}

	hr {
	  margin: auto;
	  width: 40%;
	}
	</style>
	<title>Coming Soon</title>
	<meta name="description" content="Empowering audiences of all ages to make course corrections and positive choices. Contact Stephanie to visit your organization at 323-333-5493!" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="icon" href="https://i.imgur.com/j9r7z8f.png" />
</head>
<body>

<div class="bgimg">
  <div class="topleft">
    <img src="https://i.ibb.co/HTDM2Ht/logo-here-transparent.png" style="width: 200px;"/>
  </div>
  <div class="middle">
    <h1>COMING SOON</h1>
    <hr>
    <p>2 Hours left</p>
	<p>Please come back again later.</p>
  </div>
</div>

</body>
</html>

more samples:

steps

docker build --rm -t web:1.0.0 .
docker run -d --name mockup -it --rm -p 80:80 web:1.0.0

Explanation

  • Basically your static web site is copied to /usr/share/nginx/html/ during the build.
  • You could use this approach to server any build result of: angular, react, vue or any other CSR framework
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment