Skip to content

Commit fcf321c

Browse files
ExponentCombExponentComb
authored
Add files via upload
0 parents  commit fcf321c

8 files changed

Lines changed: 239 additions & 0 deletions

File tree

‎Commands.txt‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
cd "OneDrive - Nedbank"
3+
cd Documents\Training
4+
cd "2020 Knowledge Shares"
5+
cd "Lesson 4 - Docker-compose"
6+
cd My_Example_1
7+
8+
-- 1. Python app --
9+
cd app
10+
docker image build -t app_test_image .
11+
docker container run --name app_test_container -p 8080:5000 app_test_image
12+
- test in postman
13+
docker container stop app_test_container
14+
docker container rm app_test_container
15+
docker image rm app_test_image
16+
17+
-- 2. Web server --
18+
cd ..
19+
cd web
20+
- comment out config
21+
docker image build -t web_test_image .
22+
docker container run --name web_test_container -p 8080:80 web_test_image
23+
- test in postman
24+
docker container stop web_test_container
25+
docker container rm web_test_container
26+
docker image rm web_test_image
27+
28+
-- Docker-compose --
29+
- nginx config
30+
cd ..
31+
docker-compose up
32+
docker-compose down

‎app/Dockerfile‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
FROM python
2+
3+
WORKDIR /src
4+
5+
COPY requirements.txt .
6+
7+
RUN pip install -r requirements.txt
8+
9+
COPY ./src /src
10+
11+
EXPOSE 5000
12+
13+
CMD python server.py

‎app/requirements.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
flask==1.1.1
2+
numpy

‎app/src/server.py‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
from flask import Flask, request, jsonify, render_template, json
2+
import numpy
3+
4+
server = Flask(__name__)
5+
6+
@server.route('/')
7+
def hello():
8+
return jsonify({"response": "I changed the response"})
9+
10+
@server.route('/another')
11+
def another():
12+
return jsonify({"response": "This is another response"})
13+
14+
15+
@server.route('/square_root', methods=['POST'])
16+
def sq_root():
17+
'''
18+
Square root of input number
19+
'''
20+
21+
# Get the input JSON
22+
input_data = request.form
23+
input_number =input_data.to_dict()
24+
25+
number = float(list(input_number.keys())[0])
26+
square_root = numpy.sqrt(number)
27+
return jsonify({'The square root is': float(square_root)}), 201
28+
29+
30+
if __name__ == '__main__':
31+
server.run(debug=True, host='0.0.0.0', port=5000)

‎docker-compose.yaml‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
version: "3.7"
2+
3+
services:
4+
5+
app:
6+
build: app
7+
restart: always
8+
networks:
9+
- frontend-network
10+
11+
web:
12+
build: web
13+
restart: always
14+
ports:
15+
- 8080:80
16+
networks:
17+
- frontend-network
18+
19+
networks:
20+
frontend-network:

‎web/Dockerfile‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
FROM nginx:1.13-alpine
2+
3+
COPY nginx.conf /etc/nginx/nginx.conf
4+
5+
COPY index.html /usr/share/nginx/html/index.html

‎web/index.html‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<html>
2+
3+
<head>
4+
<title>Home Page</title>
5+
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
6+
<meta content="utf-8" http-equiv="encoding">
7+
<style>
8+
*, ::after, ::before {
9+
box-sizing: inherit;
10+
background-color: #ED5FCA;
11+
color: rgb(8, 8, 71);
12+
}
13+
.moby {
14+
padding: 2rem 1rem;
15+
margin-bottom: 2rem;
16+
border-radius: .3rem;
17+
border-bottom: 0;
18+
text-align: center;
19+
align-content: center;
20+
align-items: center;
21+
padding: 4rem 2rem;
22+
}
23+
.moby button {
24+
color: #fff;
25+
background-color: #C568F0;
26+
border-color: #C568F0;
27+
padding: 5px;
28+
border-radius: 5px;
29+
margin: 5px;
30+
}
31+
.moby .query {
32+
text-align: left;
33+
border: 3px dotted #e9ecef;
34+
padding: 1.5rem 1.2rem;
35+
max-width: 800px;
36+
min-height: 200px;
37+
margin-left: auto;
38+
margin-right: auto;
39+
border-radius: .3rem;
40+
}
41+
.moby .query button:hover{
42+
cursor: pointer;
43+
background-color: #A639D8;
44+
}
45+
46+
.moby .query2 {
47+
text-align: left;
48+
border: 3px dotted #124d88;
49+
padding: 1.5rem 1.2rem;
50+
max-width: 800px;
51+
min-height: 200px;
52+
margin-left: auto;
53+
margin-right: auto;
54+
border-radius: .3rem;
55+
}
56+
.moby .query2 button:hover{
57+
cursor: pointer;
58+
background-color: #662186;
59+
}
60+
</style>
61+
</head>
62+
<body>
63+
64+
<div class="moby">
65+
<img src="http://www.pngall.com/wp-content/uploads/2016/05/Kitten-Free-PNG-Image.png" />
66+
67+
<h1>Hello there!</h1>
68+
69+
<p>I changed the colours and the picture!</p>
70+
71+
<div class="query">
72+
<p>This is a test query. Click 'GET' or type 'another' and click 'GET'</p>
73+
<div>
74+
<button type="submit" onclick="queryServer()">GET</button>
75+
<input id="path" type="text">
76+
</div>
77+
<h3>And the response is:</h3>
78+
<div id="response">
79+
80+
<div class="moby">
81+
<div class="query2">
82+
<p>This is the square root calculator</p>
83+
<div>
84+
<button type="submit" onclick="queryServer2()">CALCULATE</button>
85+
<input id="input" type="number">
86+
</div>
87+
<h3>And the answer is:</h3>
88+
<div id="answer">
89+
90+
</div>
91+
</div>
92+
</div>
93+
94+
<script type="text/javascript">
95+
function queryServer() {
96+
const Http = new XMLHttpRequest();
97+
const path = document.getElementById('path').value;
98+
const url = "/api/";
99+
Http.open("GET", url + path);
100+
Http.send();
101+
102+
Http.onreadystatechange = (e) => {
103+
document.getElementById('response').innerHTML = Http.responseText;
104+
}
105+
}
106+
107+
function queryServer2() {
108+
var xhr = new XMLHttpRequest();
109+
const input = document.getElementById('input').value;
110+
const url = "/api/square_root";
111+
xhr.open("POST", url, true);
112+
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
113+
xhr.send(input);
114+
115+
xhr.onreadystatechange = (e) => {
116+
document.getElementById('answer').innerHTML = xhr.responseText;
117+
}
118+
}
119+
</script>
120+
121+
</body>
122+
123+
</html>

‎web/nginx.conf‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
events { }
2+
http {
3+
server {
4+
listen 80;
5+
root /usr/share/nginx/html;
6+
# simple reverse-proxy
7+
# pass requests for dynamic content to the Flask server
8+
location /api/ {
9+
proxy_pass http://app:5000/;
10+
}
11+
}
12+
}
13+

0 commit comments

Comments
 (0)