api/Dockerfile

@@ -1,4 +0,0 @@
-FROM node:lts-alpine
-LABEL maintainer="joern-michael.miehe@lenaisten.de"
-
-CMD [ "tail", "-f", "/dev/null" ]

dev-proxy/Dockerfile

@@ -1,4 +0,0 @@
-FROM nginx:stable-alpine
-LABEL maintainer="joern-michael.miehe@lenaisten.de"
-
-COPY nginx.conf /etc/nginx/conf.d/default.conf

dev-proxy/nginx.conf

@@ -1,23 +0,0 @@
-upstream ui {
-    server ui:8080;
-}
-
-upstream api {
-    server api:3000;
-}
-
-server {
-    listen 80 default_server;
-    server_name _;
-
-    error_log  /dev/stderr;
-    access_log /dev/stdout;
-
-    location / {
-        proxy_pass http://ui;
-    }
-    
-    location /api/ {
-        proxy_pass http://api;
-    }
-}

docker-compose.yml

@@ -4,24 +4,12 @@ volumes:
     frontend_home:
 
 services:
-    ui:
-        build: ui/docker
-        restart: 'unless-stopped'
+    dev:
+        build: ./docker
+        restart: "no"
         volumes: 
             - "frontend_home:/home/node"
-            - "${PWD}/ui:/srv/vue/bday2020"
+            - "${PWD}:/srv/vue/bday2020"
         ports: 
             - 8000:8000
-
-    api:
-        build: api
-        restart: 'no'
-
-    dev-proxy:
-        build: dev-proxy
-        restart: 'no'
-        ports: 
-            - 8080:80
-        depends_on: 
-            - ui
-            - api
+            - 8080:8080

src/App.vue

@@ -1,33 +1,26 @@
 <template>
   <div id="app">
-    <img class="logo" alt="Lenaistenlogo" src="./assets/logo.png" />
+    <img class="logo" alt="Lenaistenlogo" src="./assets/logo.png">
     <BDay />
   </div>
 </template>
 
 <script>
-import BDay from "./components/BDay.vue";
+import BDay from './components/BDay.vue'
 
 export default {
-  name: "App",
-
+  name: 'App',
   components: {
-    BDay,
-  },
-
-  computed: {
-    get_id: () => {
-      return window.location.pathname.substring(1);
-    },
-  },
-};
+    BDay
+  }
+}
 </script>
 
 <style>
 html {
-  background-image: url("./assets/bg.jpg");
-  height: 100%;
-  /* overflow:hidden; */
+	background-image: url('./assets/bg.jpg');
+	height: 100%; 
+	/* overflow:hidden; */
 }
 
 #app {

src/components/BDay.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="bday">
+        <h1>Alles Gute zu Deinem Geburtstag!</h1>
+        <vue-plyr>
+            <video poster='../assets/poster.png' autoplay="true">
+                <source src='/api/part1_240.mp4' type='video/mp4' size='240'>
+                <source src='/api/part1_360.mp4' type='video/mp4' size='360'>
+                <source src='/api/part1_480.mp4' type='video/mp4' size='480'>
+            </video>
+        </vue-plyr>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'BDay',
+    mounted: () => {
+        document.title = 'Herzlichen Glückwunsch!'
+    }
+}
+</script>
+
+<style scoped>
+div.bday {
+    margin: auto;
+    max-width: 850px;
+}
+</style>

ui/src/components/BDay.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="bday">
-    <h1>Alles Gute zu Deinem Geburtstag!</h1>
-    <vue-plyr>
-      <video poster="../assets/poster.png" autoplay="true">
-        <source src="/fake_api/part1_240.mp4" type="video/mp4" size="240" />
-        <source src="/fake_api/part1_360.mp4" type="video/mp4" size="360" />
-        <source src="/fake_api/part1_480.mp4" type="video/mp4" size="480" />
-      </video>
-    </vue-plyr>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "BDay",
-
-  mounted: () => {
-    document.title = "Herzlichen Glückwunsch!";
-  },
-};
-</script>
-
-<style scoped>
-div.bday {
-  margin: auto;
-  max-width: 850px;
-}
-</style>

ui/vue.config.js

@@ -1,6 +0,0 @@
-// vue.config.js
-module.exports = {
-    devServer: {
-        disableHostCheck: true
-    }
-}