Add template

.env

@@ -0,0 +1,15 @@
+# Add anything that might need to be configured here
+
+COMPOSE_PROJECT_NAME=AIC_GxTx
+
+# Externally exposed ports (i.e. ports mapped on host system)
+COLOR_SERVICE_PORT=4000
+API_PORT=3000
+DB_PORT=5432
+FRONTEND_PORT=8080
+
+POSTGRES_USER=aic_user
+POSTGRES_PASSWORD=aic_pw
+POSTGRES_DB=aic_db
+
+DATA_PATH=./data.json

.gitignore

@@ -0,0 +1,17 @@
+.idea/
+*.iml
+.vscode/
+
+node_modules/
+venv/
+env/
+
+
+
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db

Makefile

@@ -0,0 +1,15 @@
+# If you want you can use this Makefile to specify debug commands, test scripts, etc.
+
+# Some examples below
+
+start:
+	docker-compose build && docker-compose up -d
+
+restart:
+	docker-compose restart
+
+build:
+	docker-compose build
+
+purge:
+	docker-compose down -v --rmi all --remove-orphans

README.md

@@ -0,0 +1,32 @@
+
+![DSG](./docs/dsg_logo.png)
+
+# Advanced Internet Computing WS 2019 - Group x Topic x
+
+This template is intended to serve as an *example* on how you might want to structure the README when submitting your project.
+
+**Important**: The specific subdirectories are *not* meant to be extended but to serve as an example on how to write a `Dockerfile` and a `docker-compose.yml` file. Your first task should be to replace them with your own.
+
+## Team
+
+TODO
+
+## Overview
+
+TODO
+
+## Architecture
+
+TODO
+
+## Components
+
+TODO
+
+## How to run
+
+TODO
+
+## How to debug
+
+TODO

api/.dockerignore

@@ -0,0 +1,28 @@
+**/.classpath
+**/.dockerignore
+**/.env
+**/.git
+**/.gitignore
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/azds.yaml
+**/bin
+**/charts
+**/docker-compose*
+**/Dockerfile*
+**/node_modules
+**/npm-debug.log
+**/obj
+**/secrets.dev.yaml
+**/values.dev.yaml
+LICENSE
+README.md
+
+
+## Add any files that are not relevant for docker to build your image

api/Dockerfile

@@ -0,0 +1,23 @@
+#########################
+###### build stage ######
+#########################
+FROM golang:1.13.1-alpine AS builder
+WORKDIR /app
+RUN apk add --no-cache git
+# Prevent downloads on every build.
+# Only downloads the dependencies if they actually change
+COPY go.mod go.sum ./
+RUN go mod download
+# Build the app
+COPY . .
+RUN go build -v -o api
+
+
+#########################
+###### final stage ######
+#########################
+FROM alpine:latest
+RUN apk --no-cache add ca-certificates
+COPY --from=builder /app/api /app/api
+EXPOSE 3000
+ENTRYPOINT ./app/api

api/go.mod

@@ -0,0 +1,5 @@
+module hyde.infosys.tuwien.ac.at/aic19/template
+
+go 1.13
+
+require github.com/gorilla/mux v1.7.3

api/go.sum

@@ -0,0 +1,2 @@
+github.com/gorilla/mux v1.7.3 h1:gnP5JzjVOuiZD07fKKToCAOjS0yOpj/qPETTXCCS6hw=
+github.com/gorilla/mux v1.7.3/go.mod h1:1lud6UwP+6orDFRuTfBEV8e9/aOM/c4fVVCaMa2zaAs=

api/main.go

@@ -0,0 +1,75 @@
+package main
+
+import (
+	"encoding/json"
+	"github.com/gorilla/mux"
+	"io"
+	"io/ioutil"
+	"log"
+	"net/http"
+	"os"
+)
+
+func main() {
+	// resolve port to use
+	port := os.Getenv("HTTP_PORT")
+	if port == "" {
+		log.Println("No HTTP_PORT environment variable specified. Using default port 3000")
+		port = "3000" // default port
+	}
+	demoDataAccess() // demo accessing the json data from the external file
+
+	// setup routing
+	r := mux.NewRouter()
+	r.HandleFunc("/health", HealthHandler)
+	r.HandleFunc("/color/random", RandomColorHandler)
+	http.Handle("/", r)
+
+	// start api server (blocking)
+	if err := http.ListenAndServe(":"+port, nil); err != nil {
+		panic(err)
+	}
+}
+
+// RandomColorHandler will "proxy" the request and call the color-service for a random color
+func RandomColorHandler(writer http.ResponseWriter, request *http.Request) {
+	resp, err := http.Get("http://color-service:4000/color")
+	if err != nil {
+		writer.WriteHeader(http.StatusInternalServerError)
+		log.Println("Failed to fetch random color")
+		return
+	}
+	writer.Header().Add("Content-Type", resp.Header.Get("Content-Type"))
+	_, _ = io.Copy(writer, resp.Body)
+}
+
+// ColorData is simply a typing for the sample json data in data.json
+type ColorData struct {
+	Colors []struct {
+		Color string `json:"color"`
+		Value string `json:"value"`
+	} `json:"colors"`
+}
+
+// demoDataAccess shows that you can mount a data file into the container and access it
+func demoDataAccess() {
+	bytes, err := ioutil.ReadFile("/app/data.json")
+	if err != nil {
+		panic(err)
+	}
+	var colorData ColorData
+	if err = json.Unmarshal(bytes, &colorData); err != nil {
+		panic(err)
+	}
+	log.Println("The first color: ", colorData.Colors[0])
+}
+
+// HealthHandler responds to all requests with "ok" to signal that this application is ready to receive traffic
+func HealthHandler(writer http.ResponseWriter, request *http.Request) {
+	writer.Header().Add("Access-Control-Allow-Origin", "*") // CORS example ... allow requests from all domains
+	_, err := writer.Write([]byte("ok"))
+	if err != nil {
+		writer.WriteHeader(http.StatusInternalServerError)
+		log.Println("Failed to produce health check")
+	}
+}

color-service/.dockerignore

@@ -0,0 +1,30 @@
+**/.classpath
+**/.dockerignore
+**/.env
+**/.git
+**/.gitignore
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/azds.yaml
+**/bin
+**/charts
+**/docker-compose*
+**/Dockerfile*
+**/node_modules
+**/npm-debug.log
+**/obj
+**/secrets.dev.yaml
+**/values.dev.yaml
+LICENSE
+README.md
+
+
+## Add any files that are not relevant for docker to build your image
+
+**/.venv

color-service/.gitignore

@@ -0,0 +1 @@
+.venv

color-service/Dockerfile

@@ -0,0 +1,10 @@
+FROM python:3.7.4-slim
+# Alpine isn't used here intentionally because especially with python there are often major issues when compiling dependencies
+WORKDIR /app
+RUN apt-get update && apt-get install -y build-essential
+COPY ./requirements.txt ./
+RUN pip install -r /app/requirements.txt
+COPY . .
+EXPOSE 4000
+# The -u flag is important if you want to observe the logs, otherwise python buffers the output
+ENTRYPOINT [ "python", "-u", "main.py" ]

color-service/README.md

@@ -0,0 +1,4 @@
+# Color-Service
+
+**Important**: This is not meant to be extended and only serves as an example to show how to call another service orchestrated by Docker Compose
+

color-service/main.py

@@ -0,0 +1,37 @@
+from aiohttp import web
+import json
+import os
+import random
+
+
+async def handle(request):
+    name = request.match_info.get('name', "Anonymous")
+    text = "Hello, " + name
+    return web.Response(text=text)
+
+
+async def handle_color(request):
+    """ returns a random color """
+    colors = color_data["colors"]
+    color = random.choice(colors)
+    return web.json_response(data=color)
+
+
+def load_colors(path: str):
+    """ loads color data from path """
+    with open(path) as f:
+        data = f.read()
+        return json.loads(data)
+
+
+app = web.Application()
+app.add_routes([
+    web.get('/color', handle_color),
+    web.get('/hello/{name}', handle)])
+
+color_data = load_colors("/app/data.json")
+
+if __name__ == '__main__':
+    port = os.environ.get("HTTP_PORT", "4000")
+    print("Starting server on port ", port)
+    web.run_app(app, port=int(port))

color-service/requirements.txt

@@ -0,0 +1,16 @@
+aiodns==2.0.0
+aiohttp==3.6.1
+async-timeout==3.0.1
+attrs==19.2.0
+brotlipy==0.7.0
+cchardet==2.1.4
+cffi==1.12.3
+chardet==3.0.4
+idna==2.8
+idna-ssl==1.1.0
+multidict==4.5.2
+pycares==3.0.0
+pycparser==2.19
+typing==3.7.4.1
+typing-extensions==3.7.4
+yarl==1.3.0

data.json

@@ -0,0 +1,32 @@
+{
+    "colors": [
+        {
+            "color": "red",
+            "value": "#f00"
+        },
+        {
+            "color": "green",
+            "value": "#0f0"
+        },
+        {
+            "color": "blue",
+            "value": "#00f"
+        },
+        {
+            "color": "cyan",
+            "value": "#0ff"
+        },
+        {
+            "color": "magenta",
+            "value": "#f0f"
+        },
+        {
+            "color": "yellow",
+            "value": "#ff0"
+        },
+        {
+            "color": "black",
+            "value": "#000"
+        }
+    ]
+}

docker-compose.yml

@@ -0,0 +1,50 @@
+version: "3"
+
+services:
+
+  db:
+    image: postgres:12.0-alpine  # Image will be pulled directly from docker hub
+    ports:
+      - ${DB_PORT}:5432
+    volumes: 
+      - db-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_DB: ${POSTGRES_DB}
+
+
+  color-service:
+    build:
+      context: ./color-service
+      dockerfile: ./Dockerfile
+    ports:
+      - ${COLOR_SERVICE_PORT}:4000
+    environment:
+      HTTP_PORT: 4000
+    volumes:
+      - ./data.json:/app/data.json  # example of how to mount external files into the container (e.g. a data set)
+
+
+  api:
+    build:
+      context: ./api
+      dockerfile: ./Dockerfile
+    depends_on:
+      - db  # example of a depency between services, the api service will be started after the db service
+    ports:
+      - ${API_PORT}:3000
+    volumes:
+      - ${DATA_PATH}:/app/data.json  # example of how to mount external files into the container (e.g. a data set)
+
+  
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: ./Dockerfile
+    ports:
+      - ${FRONTEND_PORT}:8000  # example of how to bind to a different port
+
+
+volumes: 
+  db-data:  # db-data is a volume that will be generated by docker compose

frontend/.dockerignore

@@ -0,0 +1,31 @@
+**/.classpath
+**/.dockerignore
+**/.env
+**/.git
+**/.gitignore
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/azds.yaml
+**/bin
+**/charts
+**/docker-compose*
+**/Dockerfile*
+**/node_modules
+**/npm-debug.log
+**/obj
+**/secrets.dev.yaml
+**/values.dev.yaml
+LICENSE
+README.md
+
+
+## Add any files that are not relevant for docker to build your image
+
+## e.g.
+**/node_modules

frontend/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  "root": true,
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "plugin:vue/essential",
+    "eslint:recommended",
+    "@vue/typescript"
+  ],
+  "rules": {
+    "indent": ["warn", 2]
+  },
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser"
+  }
+};

frontend/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:12.11.1-alpine AS build
+ENV NODE_ENV production
+WORKDIR /usr/src/app
+RUN npm config set -g production false
+COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
+RUN npm install
+COPY . .
+EXPOSE 8000
+CMD ["npm", "run", "serve"]

frontend/README.md

@@ -0,0 +1,27 @@
+# frontend
+
+Sample UI. This UI is not meant to be extended for your AIC project,
+but to serve as an example of how to package your application in a container.
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

frontend/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+};

frontend/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve --port=8000",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "core-js": "^2.6.5",
+    "vue": "^2.6.10",
+    "vue-class-component": "^7.0.2",
+    "vue-property-decorator": "^8.1.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.12.0",
+    "@vue/cli-plugin-eslint": "^3.12.0",
+    "@vue/cli-plugin-typescript": "^3.12.0",
+    "@vue/cli-service": "^3.12.0",
+    "@vue/eslint-config-typescript": "^4.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "typescript": "^3.4.3",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

frontend/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>frontend</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

frontend/src/App.vue

@@ -0,0 +1,35 @@
+<template>
+    <div id="app">
+        <img alt="TU Wien" src="./assets/dsg_logo.png">
+        <HelloWorld/>
+    </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from 'vue-property-decorator';
+import HelloWorld from './components/HelloWorld.vue';
+
+@Component({
+  components: {
+    HelloWorld,
+  },
+})
+export default class App extends Vue {
+}
+</script>
+
+<style>
+    #app {
+        font-family: 'Avenir', Helvetica, Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-align: center;
+        color: #2c3e50;
+        margin-top: 60px;
+    }
+  #app img {
+    width: 450px;
+    height: 75px;
+      margin-bottom: 2em;
+  }
+</style>

frontend/src/components/HelloWorld.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="hello">
+        <h1>Advanced Internet Computing 2019/20</h1>
+        <p>Connection to API server: <span class="status" v-bind:class="{success}">{{ serverStatus }}</span></p>
+    </div>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import axios from "axios";
+import config from "../config";
+
+@Component
+export default class HelloWorld extends Vue {
+    @Prop() private msg!: string;
+    private serverStatus: string = "unknown";
+    private success: boolean = false;
+
+    constructor() {
+      super();
+    }
+
+    async created() {
+      try {
+        const response = await axios.get(`${config.apiUrl}/health`);
+        if (response.status === 200) {
+          this.serverStatus = "ok :-)";
+          this.success = true;
+        } else {
+          this.serverStatus = `unknown (?)`;
+          this.success = false;
+        }
+
+      } catch (e) {
+        this.serverStatus = `unknown (${e.name}: ${e.message})`;
+        this.success = false;
+      }
+
+      // eslint-disable-next-line no-console
+      console.log("yay created");
+    }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+    h3 {
+        margin: 40px 0 0;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    li {
+        display: inline-block;
+        margin: 0 10px;
+    }
+
+    a {
+        color: #42b983;
+    }
+    span.status {
+        font-weight: bold;
+        color: red;
+    }
+    span.status.success {
+        color: darkgreen;
+    }
+</style>

frontend/src/config.ts

@@ -0,0 +1,4 @@
+
+export default {
+  apiUrl: "http://localhost:3000"
+}

frontend/src/main.ts

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')

frontend/src/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

frontend/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

frontend/tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}