Use webpack dev proxy to serve api/media

api/funkwhale_api/music/serializers.py

@@ -31,10 +31,7 @@ class TrackFileSerializer(serializers.ModelSerializer):
         fields = ('id', 'path', 'duration', 'source', 'filename', 'track')
 
     def get_path(self, o):
-        request = self.context.get('request')
         url = o.path
-        if request:
-            url = request.build_absolute_uri(url)
         return url
 
 

dev.yml

@@ -49,13 +49,11 @@ services:
       - ./api:/app
       - ./data/music:/music
     environment:
-      - "DJANGO_ALLOWED_HOSTS=localhost"
+      - "DJANGO_ALLOWED_HOSTS=localhost,nginx"
       - "DJANGO_SETTINGS_MODULE=config.settings.local"
       - "DJANGO_SECRET_KEY=dev"
       - "DATABASE_URL=postgresql://postgres@postgres/postgres"
       - "CACHE_URL=redis://redis:6379/0"
-    ports:
-      - "12081:12081"
     links:
       - postgres
       - redis

docker/nginx/conf.dev

@@ -40,8 +40,8 @@ http {
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_set_header X-Forwarded-Host   $host:$server_port;
+            proxy_set_header X-Forwarded-Host   localhost:8080;
-            proxy_set_header X-Forwarded-Port   $server_port;
+            proxy_set_header X-Forwarded-Port   8080;
             proxy_redirect off;
             proxy_pass   http://api:12081/;
         }

front/config/index.js

@@ -28,7 +28,20 @@ module.exports = {
     autoOpenBrowser: true,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+      '/api': {
+        target: 'http://nginx:6001',
+        changeOrigin: true,
+      },
+      '/media': {
+        target: 'http://nginx:6001',
+        changeOrigin: true,
+      },
+      '/staticfiles': {
+        target: 'http://nginx:6001',
+        changeOrigin: true,
+      }
+    },
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README
     // (https://github.com/webpack/css-loader#sourcemaps)