Commit 51f83a28 authored by Moritz Sokoll's avatar Moritz Sokoll 🦀
Browse files

updated readme added docker-compose setup

parent c0c6f288
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
# 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
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" ]
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)
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
......@@ -7,4 +7,4 @@ RUN pip3 install -U pip
RUN pip3 install flask
EXPOSE 5000
CMD [ "python3", "src/app.py" ]
CMD [ "python3", "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)
<!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>
......@@ -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>
......@@ -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>
......
<!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>
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"];
})
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment