updated readme added docker-compose setup

51f83a28 · Moritz Sokoll · c0c6f288 · 51f83a28 · 51f83a28 · 51f83a28
Commit 51f83a28 authored Feb 21, 2021 by Moritz Sokoll 🦀
--- a/Makefile
+++ b/Makefile
-docker-build:
-	docker build -t ulublog:latest .
-docker-run:
-	docker run --name blog -p5000:5000 -v`pwd`/src/pages:/app/src/pages ulublog:latest
+docker-build-main:
+	docker build -t pyblog:latest src
+docker-build-api:
+	docker build -t pyblogapi:latest api
+docker-run-main:
+	docker run --name blog -d -p5000:5000 -v`pwd`/src/pages:/app/pages pyblog:latest
+docker-run-api:
+	docker run --name blog_api -d -p5001:5001 pyblogapi:latest
--- a/README.md
+++ b/README.md
 # PyBlog
 ## a blog written in python with flask
+PyBlog is a blogging system written in python. Its one of my first Docker using projects
+
+## Requirements
+### Docker
+Docker is used to build a container for the Server
+### Make(optional)
+Make is used to make building of Docker images easier
+### Docker Compose
+docker-compose can be used to start and stop the application easier
+
+## Installation
+### Git
+you can clone this repository with `git clone https://gitlab.sokoll.com/moritz/blog.git`
+### Docker
+in the future the docker images might be on a registry like docker hub
+
+## Running
+### Docker compose
+you can run `docker-compose up -d` to run this application in detached mode and you can stop it with `docker-compose down`
+### Docker
+As soon as a database server (`mariadb`) is involved, you might need to setup a network between the containers, due to docker-compose automatically routing the connection to the services name
+#### with Make
+If you can use make do `make docker-run-main` to run the main application in detached mode and do `make docker-run-api` to run the api
+#### without Make
+you can also start these containers directly from docker: `docker run --name your_name -p5000:5000 -d pyblog:latest`
+#### Ports
+the api exposes port 5001 and the main application exposes port 5000
--- a/api/Dockerfile
+++ b/api/Dockerfile
+FROM python:latest
+RUN apt-get update -y
+COPY . /app
+WORKDIR /app
+RUN bash venv/bin/activate
+RUN pip3 install -U pip
+RUN pip3 install flask
+EXPOSE 5001
+
+CMD [ "python3", "app.py" ]
--- a/api/app.py
+++ b/api/app.py
+from flask import Flask, jsonify, request
+api = Flask(__name__)
+
+@api.route("/")
+def apiIndex():
+	return jsonify({'path': 'index', 'content': 'PyBlogs api index response'})
+
+@api.route("/blog", methods=["GET"])
+def apiBlog():
+	if not "id" in request.args:
+		return jsonify({'error': '400 bad request'})
+	id = request.args["id"]
+	return jsonify({"content": "buurbery", "id": id})
+
+
+if __name__ == "__main__":
+	api.run("0.0.0.0", port=5001, debug=True)
--- a/docker-compose.yml
+++ b/docker-compose.yml
+version: "3.1"
+
+services:
+  blog:
+    image: pyblog:latest
+    volumes:
+    - ./src/pages:/app/pages
+    ports:
+    - 5000:5000
+    depends_on:
+    - blogapi
+
+  blogapi:
+    image: pyblogapi:latest
+    ports:
+    - 5001:5001
+    depends_on:
+    - blogdb
+
+  blogdb:
+    image: mariadb:latest
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: example
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,4 +7,4 @@ RUN pip3 install -U pip
 RUN pip3 install flask
 EXPOSE 5000

-CMD [ "python3", "src/app.py" ]
+CMD [ "python3", "app.py" ]
--- a/src/app.py
+++ b/src/app.py
@@ -3,7 +3,7 @@ app = Flask(__name__)

 @app.route("/")
 def index():
-	return open("/app/src/pages/index.html", "r").read()
+	return open("/app/pages/index.html", "r").read()

 @app.route("/view")
 def viewBlogPage():
@@ -13,11 +13,16 @@ def viewBlogPage():
 		return "provide a blog id to view any article"
 	id = request.args['id']
 	# TODO: implement blog article view with 'id'
-	return f"viewing the article with id {id} will be implementet later"
+	return open("/app/blogpost.html", "r").read()

 @app.route("/about")
 def about():
-	return open("/app/src/pages/about.html").read()
+	return open("/app/pages/about.html", "r").read()
+
+@app.route("/new")
+def newblog():
+	return open("/app/pages/newblog.html", "r").read()
+
 	
 if __name__ == "__main__":
 	app.run("0.0.0.0", 5000, debug=True)
--- a/src/blogpost.html
+++ b/src/blogpost.html
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Blog Post</title>
+		<script src="/static/loadpost.js"></script>
+	</head>
+	<body onload="loadpost(1);">
+		<h1>Post</h1>
+		<p id="content"></p>
+	</body>
+</html>
--- a/src/pages/about.html
+++ b/src/pages/about.html
@@ -4,6 +4,11 @@
 		<title>About ULUdev's Blog</title>
 	</head>
 	<body>
+		<nav>
+			<h2>PyBlog</h2>
+			<a class="navbar" href="/about">about</a>
+			<a class="navbar" href="/new">new article</a>
+		</nav>
 		<h1>About</h1>
 	</body>
 </html>
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -12,6 +12,10 @@
 			.navbar {
 				text-decoration: none;
 			}
+			nav a {
+				color: #969696;
+				text-decoration: bold;
+			}
 			/*
 			nav {
 				background-color: #333333;
@@ -30,6 +34,7 @@
 		<nav>
 			<h2>PyBlog</h2>
 			<a class="navbar" href="/about">about</a>
+			<a class="navbar" href="/new">new article</a>
 		</nav>
 		<h1>ULUdev's Blog</h1>
 		<p>

--- a/src/pages/newblog.html
+++ b/src/pages/newblog.html
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>New Article</title>
+		<style>
+			body {
+				text-align: center;
+				font-family: Sans-Serif;
+				color: #969696;
+				background-color: #333333;
+			}
+			.navbar {
+				text-decoration: none;
+			}
+			nav a {
+				color: #969696;
+				text-decoration: bold;
+			}
+			/*
+			nav {
+				background-color: #333333;
+				color: #969696;
+			}
+			*/
+			nav *{
+				align: left;
+				display: inline;
+				margin-left: 3px;
+			}
+			textarea {
+				color: #969696;
+				background-color: #333333;
+				border: 1px solid #969696;
+				font-family: Sans-Serif;
+			}
+			button {
+				border: 1px solid #969696;
+				border-radius: 4px;
+				background-color: #333333;
+				color: #969696;
+				padding: 5px 5px;
+			}
+			
+		</style>
+	</head>
+	<body>
+		<nav>
+			<h2>PyBlog</h2>
+			<a class="navbar" href="/about">about</a>
+			<a class="navbar" href="/new">new article</a>
+		</nav>
+		<h1>New Article</h1>
+		<form method="POST">
+			<textarea rows="20" cols="120" placeholder="Insert Article here.." name="arttext"></textarea>
+			<br>
+			<button>Upload</button>
+		</form>
+	</body>
+</html>
--- a/src/static/loadpost.js
+++ b/src/static/loadpost.js
+function loadpost(id) {
+	let request = new Request(`0.0.0.0:5001/blog?id=$(id)`);
+	fetch(request).then(function(response) { return response.text(); }).then(function(text){ 
+		document.getElementById("content").innerHTML = text["content"];
+	})
+}