Skip to content

Instantly share code, notes, and snippets.

@AnechaS
Last active May 12, 2023 12:15
Show Gist options
  • Save AnechaS/fce356a1d1edaa8a3943f86e19bc5062 to your computer and use it in GitHub Desktop.
Save AnechaS/fce356a1d1edaa8a3943f86e19bc5062 to your computer and use it in GitHub Desktop.
Docker apache httpd server with SSL/HTTPS and HTTP support.

Docker apache httpd server with SSL/HTTPS and HTTP support.

Build Image

$ docker build . -t my-httpd

Create Container

docker run --name my-httpd-server -p 80:80 -p 443:443 -d my-httpd

After starting the server, you can visit https://localhost in your browser

FROM httpd:2.4
COPY httpd.conf /usr/local/apache2/conf/httpd.conf
COPY index.html /usr/local/apache2/htdocs/index.html
RUN apt-get update \
&& apt-get -y install openssl \
&& cd /usr/local/apache2/conf \
&& openssl req -new -newkey rsa:2048 -days 365 -nodes -x509 -keyout server.key -out server.crt -subj '/CN=localhost'
#
# ServerRoot: The top of the directory tree under which the server's
# configuration, error, and log files are kept.
#
# Do not add a slash at the end of the directory path. If you point
# ServerRoot at a non-local disk, be sure to specify a local disk on the
# Mutex directive, if file-based mutexes are used. If you wish to share the
# same ServerRoot for multiple httpd daemons, you will need to change at
# least PidFile.
#
ServerRoot "/usr/local/apache2"
#
# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to
# prevent Apache from glomming onto all bound IP addresses.
#
Listen 80
Listen 443
#
# Dynamic Shared Object (DSO) Support
#
# To be able to use the functionality of a module which was built as a DSO you
# have to place corresponding `LoadModule' lines at this location so the
# directives contained in it are actually available _before_ they are used.
# Statically compiled modules (those listed by `httpd -l') do not need
# to be loaded here.
#
LoadModule mpm_event_module modules/mod_mpm_event.so
LoadModule authn_file_module modules/mod_authn_file.so
LoadModule authn_core_module modules/mod_authn_core.so
LoadModule authz_host_module modules/mod_authz_host.so
LoadModule authz_groupfile_module modules/mod_authz_groupfile.so
LoadModule authz_user_module modules/mod_authz_user.so
LoadModule authz_core_module modules/mod_authz_core.so
LoadModule access_compat_module modules/mod_access_compat.so
LoadModule auth_basic_module modules/mod_auth_basic.so
LoadModule reqtimeout_module modules/mod_reqtimeout.so
LoadModule filter_module modules/mod_filter.so
LoadModule mime_module modules/mod_mime.so
LoadModule log_config_module modules/mod_log_config.so
LoadModule env_module modules/mod_env.so
LoadModule headers_module modules/mod_headers.so
LoadModule setenvif_module modules/mod_setenvif.so
LoadModule version_module modules/mod_version.so
LoadModule ssl_module modules/mod_ssl.so
LoadModule unixd_module modules/mod_unixd.so
LoadModule status_module modules/mod_status.so
LoadModule autoindex_module modules/mod_autoindex.so
LoadModule dir_module modules/mod_dir.so
LoadModule alias_module modules/mod_alias.so
LoadModule rewrite_module modules/mod_rewrite.so
ServerName localhost
<IfModule mod_rewrite.c>
RewriteEngine On
</IfModule>
<VirtualHost *:80>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</VirtualHost>
<VirtualHost *:443>
SSLEngine On
SSLCertificateFile "/usr/local/apache2/conf/server.crt"
SSLCertificateKeyFile "/usr/local/apache2/conf/server.key"
# Allow requests to HTTP resources
# @see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests
Header always set Content-Security-Policy "upgrade-insecure-requests;"
DocumentRoot "/usr/local/apache2/htdocs"
ServerName localhost
ServerAlias www.localhost
<Directory "/usr/local/apache2/htdocs">
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Posts</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 8px;
display: flex;
flex-direction: column;
gap: 8px;
font-family: "Courier New", Courier, monospace;
}
.header {
padding-top: 8px;
width: 100%;
}
.list {
display: flex;
flex-direction: column;
gap: 8px;
}
.item {
border: 2px solid #000000;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
position: relative;
}
.item-title {
font-size: 18px;
font-weight: 600;
}
.item-body {
margin-top: 8px;
font-size: 16px;
}
.progress {
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<main class="container">
<header class="header">
<h2>Posts</h2>
<small>Docker httpd server with SSL/HTTPS and HTTP support.</small>
</header>
<div class="progress">
<span>Loading...</span>
</div>
<div class="list"></div>
</main>
<script>
async function getData() {
const progress = document.querySelector(".progress");
try {
const data = await fetch("http://jsonplaceholder.typicode.com/posts?_limit=5").then(
(response) => response.json()
);
if (progress) progress.setAttribute("hidden", "hidden");
const list = document.querySelector(".list");
for (const o of data) {
const item = document.createElement("div");
item.classList.add("item");
const itemTitle = document.createElement("div");
itemTitle.classList.add("item-title");
itemTitle.appendChild(document.createTextNode(o.title));
const itemBody = document.createElement("div");
itemBody.classList.add("item-body");
itemBody.appendChild(document.createTextNode(o.body));
item.appendChild(itemTitle);
item.appendChild(itemBody);
list.appendChild(item);
}
} catch (error) {
console.error(error);
progress.querySelector("span").textContent = `Error loading. Check console for details.`;
}
}
document.addEventListener("DOMContentLoaded", getData);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment