데모용 배포

.github/workflows/check-main.yml

@@ -15,9 +15,9 @@ jobs:
         run: |
           echo "Base: ${{ github.base_ref }}"
           echo "Head: ${{ github.head_ref }}"
-          if [ "${{ github.head_ref }}" != "develop" ]; then
-            echo "❌ develop에서 보낸 pr요청이 아닙니다."
+          if [ "${{ github.head_ref }}" != "dev" ]; then
+            echo "❌ dev에서 보낸 pr요청이 아닙니다."
             exit 1
           fi
-          echo "✅ develop branch 확인"
+          echo "✅ dev branch 확인"
 

.github/workflows/cicd.yml

@@ -263,7 +263,6 @@ jobs:
 
             # docker compose 작동 확인
             docker ps
-            docker restart gateway
             echo "테스트 서버 배포 완료"
 
   # e2e 테스트 진행

.github/workflows/release.yml

@@ -127,7 +127,4 @@ jobs:
 
             # 상태창 확인
             docker ps
-
-            # 이유를 알 수 없지만 지금 NEXT - gateway에 연결 문제가 발생하고 있다.
-            docker restart gateway
             echo "서버 배포 완료"

deploy/https/nginx.backend.conf

@@ -23,6 +23,29 @@ http {
     listen 80;
     server_name _;
 
+    # 마찬가지로 실제 배포 환경에서도 sse 연결이 가능하도록 하는 것이 중요하다. 
+    location ~ ^/api/cards/sse$ {
+      proxy_pass http://main_backend_app;
+
+      proxy_http_version 1.1;
+      proxy_set_header Connection "";
+      proxy_set_header Host              $host;
+      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_buffering off;
+      proxy_cache off;
+      add_header X-Accel-Buffering no;
+
+      proxy_read_timeout 3600s;
+      proxy_send_timeout 3600s;
+
+      proxy_request_buffering off;
+      proxy_next_upstream off;
+      gzip off;
+    }
+
     # 사실상 backend는 1.1이 가장 좋은것 같다 2는 설정도 복잡하고 큰 이득이 없을것으로 예상된다.
     location / {
       proxy_pass http://main_backend_app;
@@ -35,12 +58,12 @@ http {
       proxy_set_header   X-Forwarded-Proto $scheme;
 
       # 아래는 다운로드 관련 설정들
-      client_max_body_size 500m;
+      client_max_body_size 10m;
 
       # 연결 허용 시간 -> 나중에 변경 
       proxy_connect_timeout 5s;
-      proxy_send_timeout 10m;
-      proxy_read_timeout 10m;
+      proxy_send_timeout 1m;
+      proxy_read_timeout 1m;
 
       # 에러 발생 시 다른 서버 찾기 
       proxy_next_upstream error timeout http_502 http_503 http_504;

deploy/https/nginx.gateway.conf

@@ -38,26 +38,58 @@ server {
     root /var/www/certbot;
   }
 
-  gzip on;
-  gzip_comp_level 5;
-  gzip_min_length 1024;
-  gzip_vary on;
-  gzip_types
-    text/plain text/css text/xml application/xml application/json
-    application/javascript text/javascript application/rss+xml
-    image/svg+xml;
-
+  # Docker에 dns 서버
   resolver 127.0.0.11 ipv6=off;
 
+  # test와 마찬가지로 sse 연결에 대해서 설정을 해두는 것이 중요하다.
+  location ~ ^/api/cards/sse$ {
+    proxy_pass http://main_backend_app;
+
+    proxy_http_version 1.1;
+    proxy_set_header Connection "";
+    proxy_set_header Host              $host;
+    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_buffering off;
+    proxy_cache off;
+    add_header X-Accel-Buffering no;
+
+    proxy_read_timeout 3600s;
+    proxy_send_timeout 3600s;
+
+    proxy_request_buffering off;
+    proxy_next_upstream off;
+    gzip off;
+  }
+
   # backend로 연결
   location /api/ {
-    set $be http://main-backend-nginx;
-    proxy_pass $be;
+    proxy_pass http://main-backend-nginx;
+
+    # gateway도 설정을 안하면 api가 기다리든 말든 끊어버리니 api gateway도 설정을 해주는 것이 중요하다. -> 나중에 업로드 api만 따로 변경
+    client_max_body_size 10m;
+    proxy_connect_timeout 5s;
+    proxy_send_timeout 1m;
+    proxy_read_timeout 1m;
+  }
+
+  # NEXT에 캐싱서버 -> NEXT는 기본적으로 압축하는 로직이 존재한다. 
+  location /_next/static/ {
+    proxy_pass http://frontend:3000;
+    expires 1y;
+    add_header Cache-Control "public, immutable";
+    access_log off;
   }
 
   location / {
-    set $fe http://frontend:3000;
-    proxy_pass $fe;
+    proxy_pass http://frontend:3000;
+
+    # 연결 지연시간 설정
+    proxy_connect_timeout 3s;
+    proxy_send_timeout 30s;
+    proxy_read_timeout 30s;
   }
 
 }

deploy/test/nginx.backend.conf

@@ -26,6 +26,35 @@ http {
     listen 80;
     server_name _;
 
+    # sse를 사용하는 경우 버퍼링을 꺼주고 오래 연결이 가능하도록 해주어야 한다. 
+    location ~ ^/api/cards/sse$ {
+      proxy_pass http://main_backend_app;
+
+      proxy_http_version 1.1;
+      proxy_set_header Connection "";
+      proxy_set_header Host              $host;
+      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;
+
+      # buffering 꺼주기 -> 실시간으로 바로 보낼 수 있도록 하기 위함이다. 
+      proxy_buffering off;
+      proxy_cache off;
+      add_header X-Accel-Buffering no;
+
+      # 오랫동안 연결되도록 하기 1시간
+      proxy_read_timeout 3600s;
+      proxy_send_timeout 3600s;
+
+      # 응답을 메모리/디스크에 쌓지 않고 바로 전달하도록 한다. 
+      proxy_request_buffering off;
+
+      # 스트리밍에 경우 업스트림을 교체하지 않는다. 
+      proxy_next_upstream off;
+
+      gzip off;
+    }
+
     # http 1.1을 사용하는데 2는 고려 중이다. -> 현재로서는 일단 1.1 사용해야할 것 같다.
     location / {
       proxy_pass http://main_backend_app;
@@ -43,14 +72,14 @@ http {
       # 큰 영상 업로드에 경우 따로 처리해주어야 한다. -> 우리 서비스에서는 필요
       # 어디 크기까지 허용할지 정하는 것이다. -> 이 크기를 초과 하면 backend 서버까지 가지 않고 nginx에서 cut 한다. -> backend는 예외처리 안해도 되니까 편안 
       # 서버에 따라서 다르게 처리할 수 있다. 일단은 msa를 적용하지 않았기 때문에 이렇게만 처리
-      client_max_body_size 500m;
+      client_max_body_size 10m;
 
       # proxy 연결을 기다리는 요소
       # 위부터 연결까지 3초 보내는데 읽는데 각각 30s만 기다린다.
-      # 우리나라에 경우 500mb에 20mbps라는 가정하에 5분이 안걸리기는 하지만 10m정도로 잡아도 좋을듯 싶다.
+      # 우리나라에 경우 500mb에 20mbps라는 가정하에 5분이 안걸리기는 하지만 10m정도로 잡아도 좋을듯 싶다. -> s3로 파일을 보내기 때문에 이제 적게 잡아도 괜찮다.
       proxy_connect_timeout 5s;
-      proxy_send_timeout 10m;
-      proxy_read_timeout 10m;
+      proxy_send_timeout 1m;
+      proxy_read_timeout 1m;
 
       # time이 만약 넘어가면 다른 app으로 전달한다. 
       # 네트워크에러, 시간 초과, 502, 503, 504 에러가 발생하면 2번까지 다시 연결을 시도한다. -> load balancer를 사용할때 안정성을 위해서 설계

deploy/test/nginx.gateway.conf

@@ -25,11 +25,35 @@ server {
   proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
   proxy_set_header X-Forwarded-Proto $scheme;
 
+  # sse를 위한 수정 - gateway도 수정해 줘야 백엔드에서 받을 수 있다. ( 백엔드 쪽이 살아있어도 gateway가 죽으면 의미가 없기에 )
+  location ~ ^/api/cards/sse$ {
+    proxy_pass http://main-backend-nginx;
+
+    proxy_http_version 1.1;
+    proxy_set_header Connection "";
+
+    proxy_buffering off;
+    proxy_cache off;
+    add_header X-Accel-Buffering no;
+
+    proxy_read_timeout 3600s;
+    proxy_send_timeout 3600s;
+
+    proxy_request_buffering off;
+    gzip off;
+
+  }
+
   # backend 프록시 전달
   location /api/ {
-    # $be를 세팅하고 이걸 배정함
+    # Dns 탐색
     proxy_pass http://main-backend-nginx;
 
+    client_max_body_size 10m;
+    proxy_connect_timeout 5s;
+    proxy_send_timeout 1m;
+    proxy_read_timeout 1m;
+
   }
 
   # NEXT용 static caching

frontend/next.config.ts

@@ -11,6 +11,80 @@ const nextConfig: NextConfig = {
       },
     ],
   },
+
+  turbopack: {
+    rules: {
+      '*.svg': {
+        loaders: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              icon: true,
+              replaceAttrValues: {
+                black: 'currentColor',
+                '#000': 'currentColor',
+                '#000000': 'currentColor',
+              },
+            },
+          },
+        ],
+        as: '*.js',
+      },
+    },
+  },
+
+  webpack(config) {
+    // 기존의 모든 SVG 관련 rule을 찾아서 가져옵니다.
+    // @ts-expect-error: webpack rule type error
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.('.svg'),
+    );
+
+    config.module.rules.push(
+      // 1. ?.url이 붙은 SVG는 기존처럼 리소스로 처리합니다. (예: url('./icon.svg?url'))
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/,
+      },
+      // 2. 그 외의 모든 SVG는 SVGR을 통해 React 컴포넌트로 변환합니다.
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: {
+          not: [...(fileLoaderRule.resourceQuery?.not || []), /url/],
+        },
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              // 위와 동일한 설정 적용
+              icon: true,
+              replaceAttrValues: {
+                black: 'currentColor',
+                '#000': 'currentColor',
+                '#000000': 'currentColor',
+              },
+              // 필요하다면 아래 설정을 통해 viewBox 외의 width/height를 아예 제거할 수도 있습니다.
+              svgoConfig: {
+                plugins: [
+                  {
+                    name: 'removeViewBox',
+                    active: false,
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      },
+    );
+
+    // 기존의 기본 SVG rule이 SVGR과 충돌하지 않도록 수정합니다.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
 };
 
 export default nextConfig;