weitere Seite
This commit is contained in:
Jesko Anschütz
parent
4394610e60
commit
e54069b8b9
3 changed files with 103 additions and 31 deletions
|
|
@ -233,7 +233,7 @@ Die Parameter hier bedeuten folgendes:
|
|||
- `--name webdemo` optional - Gibt dem Container den angegebenen Namen. Wenn man den Namen nicht selbst festlegt, bekommt er einen zufälligen (z.B. "adoring_snyder")
|
||||
- `-d` Lässt den Container im Hintergrund laufen ("d" steht für "detached")
|
||||
- `-p 8080:80` verbindet den Port 8080 des Hosts mit dem Port 80 im Container
|
||||
2. eine HTML-Datei in den Container kopieren: `docker cp webroot/index.html webdemo:/usr/share/nginx/html/`
|
||||
2. eine HTML-Datei in den Container kopieren: `docker cp webroot/test.html webdemo:/usr/share/nginx/html/index.html`
|
||||
3. mit einem Browser nach http://fobiX.benbex.de:8080 surfen und schauen, was da zu sehen ist.
|
||||
4. nachsehen, welche Container gerade laufen: `docker ps`
|
||||
5. den Container stoppen: `docker stop webdemo`
|
||||
|
|
@ -243,5 +243,8 @@ Die Parameter hier bedeuten folgendes:
|
|||
9. versuchen, mit `docker rm -f webdemo` den laufenden Container zu löschen
|
||||
10. Container stoppen und löschen mit `docker stop webdemo ; docker rm webdemo`
|
||||
|
||||
### einzelne Dateien in den Container kopieren ist nicht praktisch
|
||||
Du kannst beim Start des Containers schon ein Verzeichnis angeben, das in den Container gemounted wird. z.B.
|
||||
docker run --name webdemo -v /root/docker-fobi/webroot:/usr/share/nginx/html -d -p 80:80 nginx
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,17 +3,17 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Docker Demo</title>
|
||||
<title>Mount erfolgreich</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
|
||||
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--card: #1e293b;
|
||||
--accent: #38bdf8;
|
||||
--text: #e2e8f0;
|
||||
--bg: #022c22;
|
||||
--card: #064e3b;
|
||||
--accent: #34d399;
|
||||
--text: #ecfdf5;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-family: sans-serif;
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
|
|
@ -24,21 +24,25 @@
|
|||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
h1 {
|
||||
color: var(--accent);
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
p {
|
||||
max-width: 600px;
|
||||
line-height: 1.6;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.card {
|
||||
background-color: var(--card);
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
||||
max-width: 600px;
|
||||
}
|
||||
h1 {
|
||||
color: var(--accent);
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
p {
|
||||
line-height: 1.6;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.ok {
|
||||
font-size: 3rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
|
|
@ -47,25 +51,19 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
h1 { font-size: 2rem; }
|
||||
h1 { font-size: 1.8rem; }
|
||||
.card { margin: 1rem; padding: 1.5rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<h1>🚀 Dein eigener Webserver läuft!</h1>
|
||||
<p>Diese Seite wird aus einem <strong>nginx</strong>-Container ausgeliefert. </p>
|
||||
<p>Starte, stoppe und lösche den Container, um zu üben, wie Docker funktioniert.</p>
|
||||
<p>Befehle zum Üben:</p>
|
||||
<pre style="background:#0f172a;padding:1rem;border-radius:0.5rem;overflow-x:auto;">
|
||||
docker run --name webdemo -d -p 8080:80 nginx
|
||||
docker cp webroot/index.html webdemo:/usr/share/nginx/html/
|
||||
docker stop webdemo
|
||||
docker start webdemo
|
||||
docker rm -f webdemo
|
||||
</pre>
|
||||
<div class="ok">✅</div>
|
||||
<h1>Mount erfolgreich!</h1>
|
||||
<p>Das Verzeichnis docker-fobi/webroot wurde korrekt in den Container eingebunden.<br>
|
||||
Nginx kann auf deine Dateien zugreifen und sie ausliefern.</p>
|
||||
<p>→ Du könntest nun weitere HTML-Dateien über diesen Ordner bereitstellen, ohne sie einzeln in den Container kopieren zu müssen nach (je)dem Start.</p>
|
||||
</div>
|
||||
<footer>Demo für ZSL-Docker-Lernende</footer>
|
||||
<footer>Demo für ZSL-Docker-Lernende</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
71
webroot/test.html
Normal file
71
webroot/test.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Docker Demo</title>
|
||||
<style>
|
||||
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--card: #1e293b;
|
||||
--accent: #38bdf8;
|
||||
--text: #e2e8f0;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
h1 {
|
||||
color: var(--accent);
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
p {
|
||||
max-width: 600px;
|
||||
line-height: 1.6;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.card {
|
||||
background-color: var(--card);
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
h1 { font-size: 2rem; }
|
||||
.card { margin: 1rem; padding: 1.5rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<h1>🚀 Dein eigener Webserver läuft!</h1>
|
||||
<p>Diese Seite wird aus einem <strong>nginx</strong>-Container ausgeliefert. </p>
|
||||
<p>Starte, stoppe und lösche den Container, um zu üben, wie Docker funktioniert.</p>
|
||||
<p>Befehle zum Üben:</p>
|
||||
<pre style="background:#0f172a;padding:1rem;border-radius:0.5rem;overflow-x:auto;">
|
||||
docker run --name webdemo -d -p 8080:80 nginx
|
||||
docker cp webroot/test.html webdemo:/usr/share/nginx/html/index.html
|
||||
docker stop webdemo
|
||||
docker start webdemo
|
||||
docker rm -f webdemo
|
||||
</pre>
|
||||
</div>
|
||||
<footer>Demo für ZSL-Docker-Lernende</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue