Supervisor update 2

Dockerfile.supervisor

@@ -13,6 +13,15 @@ RUN mkdir -p /usr/share/nginx/html \
 COPY supervisor/html/* /usr/share/nginx/html/
 COPY supervisor/nginx/default.conf /etc/nginx/conf.d/default.conf
 
+# メディアディレクトリを作成
+RUN mkdir -p /app/media && chmod 755 /app/media
+
+# 静的ファイルをコピー
+#COPY ./static /usr/share/nginx/html/static
+
+# 権限の設定
+RUN chown -R nginx:nginx /app/media
+
 # Set final permissions
 RUN chown -R nginx:nginx /usr/share/nginx/html \
     && chmod -R 755 /usr/share/nginx/html \

config/settings.py

@@ -179,10 +179,12 @@ USE_TZ = True
 STATIC_URL = '/static/'
 
 #STATIC_URL = '/static2/'
-STATIC_ROOT = BASE_DIR / "static"
+#STATIC_ROOT = BASE_DIR / "static"
+STATIC_ROOT = os.path.join(BASE_DIR, 'static')
 
 MEDIA_URL = '/media/'
-MEDIA_ROOT = BASE_DIR / "media/"
+#MEDIA_ROOT = BASE_DIR / "media/"
+MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
 
 #STATICFILES_DIRS = (os.path.join(BASE_DIR, "static2"),os.path.join(BASE_DIR, "media"))
 

docker-compose.yaml

@@ -53,6 +53,7 @@ services:
         - type: volume
           source: nginx_logs
           target: /var/log/nginx
+        - media_data:/app/media:ro
       ports:
         - "80:80"
       depends_on:
@@ -72,3 +73,4 @@ volumes:
   geoserver-data:
   static_volume:
   nginx_logs:
+  media_data:

rog/urls.py

@@ -11,10 +11,11 @@ from .views import TestActionViewSet
 
 from .views import OwnerEntriesView, OwnerTeamsView, OwnerMembersView
 
-from django.urls import path
 from . import views
 #from .views import NewEvent2AdminView
 
+from django.conf import settings
+from django.conf.urls.static import static
 
 router = DefaultRouter()
 router.register(r'newevent2', views.NewEvent2ViewSet)
@@ -124,3 +125,7 @@ urlpatterns += [
     # for Supervisor Web app
     path('test/', views.test_api, name='test_api'),
 ]
+
+if settings.DEBUG:
+    # 開発環境でのメディアファイル提供
+    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

rog/views.py

@@ -88,6 +88,7 @@ import xlsxwriter
 from io import BytesIO
 
 from django.urls import get_resolver
+import os
 
 logger = logging.getLogger(__name__)
 
@@ -2381,6 +2382,19 @@ def get_team_info(request, zekken_number):
 
         team = Team.objects.get(id=self.kwargs['team_id'])
 
+def get_image_url(image_path):
+    """画像URLを生成する補助関数"""
+    if not image_path:
+        return None
+    
+    # 開発環境用のパス生成
+    if settings.DEBUG:
+        return os.path.join(settings.MEDIA_URL, str(image_path))
+    
+    # 本番環境用のパス生成
+    return f"{settings.MEDIA_URL}{image_path}"
+
+
 @api_view(['GET'])
 def get_checkins(request, *args, **kwargs):
 #def get_checkins(request, zekken_number, event_code):
@@ -2437,14 +2451,14 @@ def get_checkins(request, *args, **kwargs):
                     'points': c.points or 0,
                     'buy_flag': c.buy_flag,
                     'photos': location.photos if location else None,
-                    'image_address': c.image_address,
-                    'receipt_address': c.image_receipt,
+                    'image_address': get_image_url(c.image_address),
+                    'receipt_address': get_image_url(c.image_receipt),
                     'location_name': location.location_name if location else None,
                     'checkin_point': location.checkin_point if location else None,
                     'buy_point': location.buy_point
                 })
 
-        logger.debug(f"data={data}")
+        #logger.debug(f"data={data}")
         return Response(data)
 
     except Exception as e:

supervisor/html/index.html

@@ -257,8 +257,8 @@
                     tr.innerHTML = `
                         <td class="px-6 py-4">${checkin.path_order}</td>
                         <td class="px-6 py-4">
-                            ${location.photos ? 
-                                `<img src="${checkin.photos}" class="h-20 w-20 object-cover rounded">` : ''}
+                            ${checkin.photos ? 
+                                `<img src="/media/compressed/${checkin.photos}" class="h-20 w-20 object-cover rounded" onclick="showLargeImage(this.src)">` : ''}
 			    <div class="text-sm">${checkin.photos}</div>
                         </td>
                         <td class="px-6 py-4">
@@ -425,6 +425,20 @@
                 });
         }
 
+        // 画像拡大表示用のモーダル関数
+        function showLargeImage(src) {
+            const modal = document.createElement('div');
+            modal.classList.add('fixed', 'inset-0', 'bg-black', 'bg-opacity-75', 'flex', 'items-center', 'justify-center', 'z-50');
+            
+            const img = document.createElement('img');
+            img.src = src;
+            img.classList.add('max-w-3xl', 'max-h-[90vh]', 'object-contain');
+            
+            modal.appendChild(img);
+            modal.onclick = () => modal.remove();
+            document.body.appendChild(modal);
+        }
+
         // 新規CP追加用のモーダル
         function showAddCPModal() {
             const modal = document.createElement('div');

supervisor/nginx/default.conf

@@ -46,6 +46,12 @@ server {
         index index.html;
     }
 
+    location = /media/ {
+        alias /app/media/;  # MEDIA_ROOT のパス
+        expires 30d;  # キャッシュの設定
+        add_header Cache-Control "public, no-transform";
+    }
+
     error_page 404 /404.html;
     error_page 500 502 503 504 /50x.html;
     location = /50x.html {