fixes #4:

use reverse proxy to make WEBAPI_ENDPOINT configurable

docker-dev-run.sh

@@ -1,2 +1,2 @@
 docker run -d -p:5000:80 --env ASPNETCORE_ENVIRONMENT=Development vertical-slice/web-api
-docker run -d -p:8082:80 vertical-slice/vue-app
+docker run -d -p:8082:80 --env WEBAPI_ENDPOINT=http://host.docker.internal:5000 vertical-slice/vue-app

vue-app/.devcontainer/devcontainer.json

@@ -23,7 +23,7 @@
 	// "forwardPorts": [],
 
 	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "cd src && npm install",
+	"postCreateCommand": "npm install -g @vue/cli && cd src && npm install",
 
 	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
 	"remoteUser": "node"

vue-app/src/Dockerfile

@@ -8,4 +8,5 @@ RUN npm run build
 FROM nginx as production-stage
 RUN mkdir /app
 COPY --from=build-stage /app/dist /app
-COPY nginx.conf /etc/nginx/nginx.conf
+COPY nginx.conf /etc/nginx/nginx.conf
+COPY nginx.default.conf.template /etc/nginx/templates/default.conf.template

vue-app/src/nginx.conf

@@ -14,17 +14,6 @@ http {
   access_log  /var/log/nginx/access.log  main;
   sendfile        on;
   keepalive_timeout  65;
-  server {
-    listen       80;
-    server_name  localhost;
-    location / {
-      root   /app;
-      index  index.html;
-      try_files $uri $uri/ /index.html;
-    }
-    error_page   500 502 503 504  /50x.html;
-    location = /50x.html {
-      root   /usr/share/nginx/html;
-    }
-  }
+
+  include /etc/nginx/conf.d/*.conf;
 }

vue-app/src/nginx.default.conf.template

@@ -0,0 +1,16 @@
+  server {
+    listen       80;
+    server_name  localhost;
+    location / {
+      root   /app;
+      index  index.html;
+      try_files $uri $uri/ /index.html;
+    }
+    location /api {
+      proxy_pass ${WEBAPI_ENDPOINT};
+    }
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+      root   /usr/share/nginx/html;
+    }
+  }

vue-app/src/src/components/Weather.vue

@@ -8,7 +8,6 @@
 </template>
 <script>
 import axios from 'axios'
-import env from '../env'
 
 export default {
     data() {
@@ -18,7 +17,7 @@ export default {
     },
     methods: {
         refresh() {
-            axios.get(`${env.serviceUrl}/api/WeatherForecast`)
+            axios.get('/api/WeatherForecast')
             .then(r => {
                 this.daysInfo = r.data
             })

vue-app/src/vue.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  devServer: {
+    proxy: {
+      '/api': {
+        target: 'http://host.docker.internal:5000',
+      },
+    },
+  },
+  productionSourceMap: true,
+};