Last active
April 20, 2023 05:25
Star
You must be signed in to star a gist
docker hello world templates , dockerhelloworld
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
<!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>
docker build --rm -t web:1.0.0 .
docker run -d --name mockup -it --rm -p 80:80 web:1.0.0
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
<!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>
#!/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
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
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" ]
docker build --rm -t hello-world-docker .
docker run -d --name hello-world-docker -p 8080:8080 -t hello-world-docker
curl http://localhost:8080
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" ]
docker build --rm -t hello-world-docker .
docker run -d --name hello-world-docker -p 8080:8080 -t hello-world-docker
curl http://localhost:8080
output: Hello World
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
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/
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;
}
<!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’ll be back soon!</h1>
<div>
<p>Sorry for the inconvenience but we’re performing some maintenance at the moment. We’ll be back online shortly!</p>
<p>— The Team</p>
</div>
</article>
<!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:
- source: https://gist.github.com/webmasterninjay/9a182722f5ed168dddc59b21360241ab
- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_coming_soon
- https://codepen.io/HariWebs/pen/vmXPzp
docker build --rm -t web:1.0.0 .
docker run -d --name mockup -it --rm -p 80:80 web:1.0.0
- 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