[#164] feat: 배포환경 WebSocket 연결 안정화를 위한 CORS 설정 추가

[kohtaewoo]

📌 개요

배포된 프론트엔드 환경(ipiece.store)에서 백엔드 WebSocket 연결 시, CORS 정책으로 인해 연결이 거부되거나 HTTP Polling으로 전환되어 딜레이(렉)가 발생하는 문제를 해결합니다.

👩‍💻 작업 내용

• CORS 설정 업데이트 (application.yml)

  • allowed-origins 목록에 배포 환경 도메인(http://ipiece.store, https://ipiece.store)을 추가했습니다.
  • 기존: http://localhost:3000
  • 변경: http://localhost:3000, http://ipiece.store, https://ipiece.store

• CI/CD 트리거 추가 (backend-cicd.yml)

  • 해당 기능 브랜치(feat/#164)에서 변경 사항이 정상적으로 빌드 및 배포되는지 확인하기 위해 워크플로우 트리거에 브랜치를 추가했습니다.

✅ PR 포인트

• 배포 환경에서 프론트엔드가 백엔드와 소켓 연결을 맺을 때 101 Switching Protocols 상태 코드가 뜨며 즉시 연결되는지 확인이 필요합니다.
• 버튼 클릭 시 딜레이 없이 실시간으로 반응하는지 확인 부탁드립니다.

🔗 관련 이슈

Closes #164

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

Chores

• CI/CD 워크플로우 설정 업데이트
• 서버 간 통신 허용 범위 확대 (ipiece.store 도메인 추가)

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

WebSocket 연결 안정화를 위해 CORS 허용 출처에 ipiece.store 도메인을 추가하고, CI/CD 워크플로우에 feat/#164 브랜치를 트리거 조건으로 추가했습니다.

Changes

Cohort / File(s)	변경 요약
CI/CD 워크플로우 설정 .github/workflows/backend-cicd.yml	feat/#164 feature 브랜치 패턴을 push 트리거 브랜치 조건에 추가
애플리케이션 CORS 설정 src/main/resources/application.yml	CORS allowed-origins에 http://ipiece.store, https://ipiece.store 도메인 추가 (기존: http://localhost:3000)

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• 구성 변경 및 CI/CD 설정 추가로 복잡한 로직 없음
• 변경 범위가 제한적이고 직관적임

Possibly related PRs

• [#76] chore:SecurityConfig 로그인 미필요 경로 정리 및 프론트 CORS 허용 #78: CORS 설정과 관련된 이전 작업으로, application.yml의 cors.allowed-origins 속성 도입 및 SecurityConfig CORS bean 설정이 포함됨
• Release/#test #152: 동일한 CI 워크플로우 파일(.github/workflows/backend-cicd.yml)을 수정한 이전 PR로, 워크플로우 트리거 및 단계 변경 이력이 있음

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목은 PR의 주요 변경사항인 CORS 설정 추가를 명확하게 요약하고 있으며, 이슈 번호 #164와 WebSocket 연결 안정화라는 구체적인 목표를 포함하고 있습니다.
Description check	✅ Passed	설명은 배포 환경의 WebSocket 연결 문제, CORS 설정 변경 사항, CI/CD 트리거 추가 등 모든 변경사항과 관련된 내용을 포함하고 있습니다.
Linked Issues check	✅ Passed	PR의 모든 변경사항이 이슈 #164의 요구사항을 충족합니다. application.yml의 CORS 설정에 배포 환경 도메인이 추가되었으며, CI/CD 워크플로우에 해당 브랜치가 트리거로 추가되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 이슈 #164의 범위 내에 있습니다. CORS 설정 업데이트와 CI/CD 트리거 추가는 모두 WebSocket 연결 안정화를 위한 필수적인 변경사항입니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/#164

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

.github/workflows/backend-cicd.yml (1)

5-8: 특정 브랜치명 대신 패턴 사용 권장

현재 feat/#164라는 구체적인 브랜치명이 CI/CD 트리거로 설정되어 있습니다. 이 브랜치가 병합된 후 삭제되면 해당 트리거는 더 이상 동작하지 않습니다.

모든 기능 브랜치에 대해 일관된 자동 배포를 지원하려면, feat/#164 대신 feat/** 패턴으로 변경하는 것을 권장합니다. 이를 통해 향후 추가되는 기능 브랜치들도 자동으로 검증 및 배포 대상에 포함될 수 있습니다.

제안 변경:

  on:
    push:
      branches:
        - 'release/**'     # 릴리즈 브랜치
        - 'develop'        # 개발 브랜치
-       - 'feat/#164'
+       - 'feat/**'        # 모든 기능 브랜치

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 39f0453 and 7056595.

📒 Files selected for processing (2)

• .github/workflows/backend-cicd.yml (1 hunks)
• src/main/resources/application.yml (1 hunks)

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find WebSocketConfig file
echo "=== Searching for WebSocketConfig ==="
fd -e java -x grep -l "WebSocketConfig" {}

# Also search for files that reference cors or allowed-origins
echo -e "\n=== Searching for CORS configuration references ==="
rg -l "cors|allowed-origins" --type java

# Search for @ConfigurationProperties or @Value annotations related to CORS
echo -e "\n=== Searching for CORS property bindings ==="
rg -B5 -A10 "allowed-origins|@ConfigurationProperties.*cors|@Value.*cors" --type java

Repository: Woori-FISA-Go/IPiece-server

Length of output: 3621

---

🏁 Script executed:

#!/bin/bash
# Read the complete WebSocketConfig file
echo "=== WebSocketConfig.java ==="
cat -n src/main/java/com/masterpiece/IPiece/config/WebSocketConfig.java

# Read the complete SecurityConfig file
echo -e "\n=== SecurityConfig.java ==="
cat -n src/main/java/com/masterpiece/IPiece/config/SecurityConfig.java

Repository: Woori-FISA-Go/IPiece-server

Length of output: 9254

---

🏁 Script executed:

#!/bin/bash
# Search for any utility methods that might parse the allowedOrigins string
echo "=== Searching for allowedOrigins string parsing ==="
rg -B5 -A5 "allowedOrigins\s*\." --type java

# Check if there are any String.split or parsing utilities
echo -e "\n=== Searching for CORS origin parsing utilities ==="
rg -B3 -A3 "split|Stream|lambda" src/main/java/com/masterpiece/IPiece/config/SecurityConfig.java

# Check git history to see what the original CORS configuration looked like
echo -e "\n=== Check original CORS configuration in application.yml ==="
head -100 src/main/resources/application.yml | tail -50

Repository: Woori-FISA-Go/IPiece-server

Length of output: 1226

---

CORS configuration will not work—requires parsing fix

The comma-separated format in application.yml is incompatible with how the code uses it. Both SecurityConfig and WebSocketConfig pass the entire string directly to methods that expect individual patterns:

• SecurityConfig (line 36): config.addAllowedOriginPattern(allowedOrigins) receives the full string "http://localhost:3000, http://ipiece.store, https://ipiece.store" as a single regex pattern, which will fail to match any actual origin headers.
• WebSocketConfig (line 29): registry.addEndpoint("/ws").setAllowedOriginPatterns(allowedOrigins) has the same issue.

Required fix: Split the comma-separated string before use:

// In SecurityConfig.corsConfigurationSource()
Arrays.stream(allowedOrigins.split(",\\s*"))
    .forEach(config::addAllowedOriginPattern);

// In WebSocketConfig.registerStompEndpoints()
registry.addEndpoint("/ws")
    .setAllowedOriginPatterns(allowedOrigins.split(",\\s*"))
    .withSockJS();

🤖 Prompt for AI Agents

In src/main/resources/application.yml around lines 58 to 60, the CORS
allowed-origins is defined as a single comma-separated string which the code
then passes whole to methods expecting individual patterns (SecurityConfig line
36 and WebSocketConfig line 29); update the code to split that string on commas
with optional whitespace (e.g. split on ",\\s*") and then for SecurityConfig
iterate the resulting array and call addAllowedOriginPattern for each entry, and
for WebSocketConfig pass the split array into setAllowedOriginPatterns so each
origin is treated separately.