fwoeck/docker-workshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add project files

Browse Source
This commit is contained in:
Frank Woeckener
2025-03-18 10:42:10 +01:00
parent e429c37f62
commit fe93319d2a
29 changed files with 816 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
00_uebungs-files/02_docker-basics-react/.dockerignore Normal file
View File

@@ -0,0 +1,7 @@
node_modules
npm-debug.log
build
.git
.github
.gitignore
README.md

30
00_uebungs-files/02_docker-basics-react/Dockerfile Normal file
View File

@@ -0,0 +1,30 @@
# Build-Stage
FROM node:16 AS build
WORKDIR /app
# Abhängigkeiten zuerst kopieren und installieren (für besseres Caching)
COPY package*.json ./
RUN npm install
# Den Rest der Anwendung kopieren
COPY . .
# Build-Zeit-Variable setzen
RUN echo "REACT_APP_BUILD_TIME=$(date)" > .env
# Anwendung bauen
RUN npm run build
# Production-Stage
FROM nginx:alpine
# Build-Output vom build-Stage kopieren
COPY --from=build /app/build /usr/share/nginx/html
# Nginx-Konfiguration (optional)
# COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

30
00_uebungs-files/02_docker-basics-react/package.json Normal file
View File

@@ -0,0 +1,30 @@
{
"name": "react-docker-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"react-scripts": "5.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

15
00_uebungs-files/02_docker-basics-react/public/index.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="React Docker Demo App" />
<title>React Docker Demo</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

42
00_uebungs-files/02_docker-basics-react/src/App.css Normal file
View File

@@ -0,0 +1,42 @@
.App {
text-align: center;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.counter {
margin: 2rem 0;
padding: 1rem;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px;
}
button {
background-color: #61dafb;
border: none;
color: #282c34;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
button:hover {
background-color: #4fa8c3;
}
.info {
margin-top: 2rem;
font-size: 0.8rem;
opacity: 0.7;
}

28
00_uebungs-files/02_docker-basics-react/src/App.js Normal file
View File

@@ -0,0 +1,28 @@
import React, { useState } from 'react';
import './App.css';
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<header className="App-header">
<h1>React Docker Demo</h1>
<p>Diese App läuft in einem Docker-Container</p>
<div className="counter">
<p>Du hast den Button {count} mal geklickt</p>
<button onClick={() => setCount(count + 1)}>
Klick mich!
</button>
</div>
<p className="info">
Build-Zeit: {process.env.REACT_APP_BUILD_TIME || 'Unbekannt'}
</p>
</header>
</div>
);
}
export default App;

13
00_uebungs-files/02_docker-basics-react/src/index.css Normal file
View File

@@ -0,0 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

11
00_uebungs-files/02_docker-basics-react/src/index.js Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);