kasumil의 코딩 공작소

Node.js 백엔드와 Next.js BFF에 Swagger 적용하기: OpenAPI 명세와 로컬 전용 문서 구성

API를 구현해도 요청 파라미터와 응답 형태를 코드에서 매번 찾아야 한다면, 프런트엔드와 백엔드 사이의 계약을 확인하기 어렵다. 이번에는 Node.js 백엔드의 기존 Swagger 문서를 실제 응답에 맞게 정리하고, Next.js App Router의 BFF에도 별도의 API 문서를 추가했다.서비스는 NAS에서 컨테이너로 운영하는 구성이지만, 문서화 자체는 NAS에 종속되지 않는다. 이 글은 실제 API 명세를 공개하는 글이 아니라, 일반 예시로 Swagger 적용 방법을 설명한다. 운영 서버의 식별 정보와 민감한 설정은 제외했다.적용 상태: Next.js BFF의 운영 문서 차단은 배포에 반영했다. Node.js 백엔드의 로컬 전용 문서 제한은 구현과 검증을 마친 후보이며, API 무중단 배포 작업과 ..

NAS Docker 이미지 정리: 최근 5개를 남기고 롤백 이미지는 보호하기

NAS에서 컨테이너를 계속 배포하다 보면 예전 이미지가 쌓인다. 그렇다고 오래됐다는 이유만으로 지우면 롤백할 때 필요한 이미지까지 없어질 수 있다.이번에는 보관 기간 대신 개수를 기준으로 정리했다. 저장소별 최신 이미지 5개를 기본으로 남기고, 실제 배포와 복구에 필요한 이미지는 개수와 관계없이 보호하는 방식이다.1. 최근 5개는 삭제 한도가 아니라 기본 보존 개수같은 이미지에 태그가 여러 개 붙어 있을 수 있으므로 태그 수가 아니라 고유 이미지 단위로 계산한다. 날짜가 지났다고 삭제하는 규칙은 넣지 않았다.대상 저장소별 최신 고유 이미지 5개현재 운영 슬롯과 이전 배포 슬롯의 이미지실행 중이거나 중지된 모든 컨테이너가 참조하는 이미지이름 있는 태그가 붙어 있는 이미지이 조건 중 하나라도 해당하면 남긴다..

Docker 헬스체크 적용 정리: 관리자 확인부터 CI/CD와 배포 스왑까지

프로젝트를 컨테이너로 운영하다 보면 실행 중인 컨테이너와 실제로 사용할 수 있는 서비스를 구분해야 할 때가 있다.프로세스가 살아 있어도 DB 연결이 끊어질 수 있고, 빌드가 성공해도 운영 서버에 새 이미지가 반영되지 않을 수 있다. 배포 직후 새 페이지는 열리지만 이전부터 열어 둔 브라우저에서만 오류가 발생하기도 한다.이번에는 프로젝트에 추가한 헬스체크의 용도와 관리자 화면 확인, CI/CD, 이전 배포를 보존하는 스왑 대응을 정리했다. 실제 운영 주소와 계정 정보는 제외했다.1. 헬스체크로 무엇을 확인할 것인가헬스체크는 검사 범위를 정하는 것부터 시작한다.생존 확인(Liveness): 애플리케이션이 요청에 응답하는지 확인한다.준비 상태 확인(Readiness): DB 같은 필수 의존성을 포함해 요청을 ..

Next.js App Router 무중단 배포: 이전 탭의 409 오류와 배포 버전 불일치 해결

이전 글에서는 Pages Router의 Data Route에 포함된 Build ID를 이용해, 배포 후에도 이전 버전의 클라이언트 요청을 처리하는 방법을 정리했다. 이번에는 같은 아이디어를 App Router에 적용하면서 확인한 차이와 409 문제를 정리한다.운영 환경은 NAS 위에서 Next.js 컨테이너를 실행하고, 슬롯을 전환하는 방식으로 무중단 배포를 구성한 형태다. 이 글에서는 실제 서버 식별 정보와 운영 설정값을 제외하고, 요청의 흐름과 확인한 결과만 다룬다.핵심은 이전 버전의 RSC 응답만 전달하는 것으로는 충분하지 않다는 점이다. 그 응답에서 사용하는 JS/CSS도 같은 배포에서 받아올 수 있어야 한다.먼저 보는 전체 배포 구조이 구성은 NAS 안에서 Next.js 컨테이너 두 개를 Blu..

사내에서 앱을 배포하는데 있어, 심사 이런것들때문에 배포를 못하는 상황에서다운로드 기능을 구현해야했다.그런데, 왜 안되냐 봤더니, 외부 브라우저로 기능을 구현했는데, docx같은 파일은 다운이 바로 되지만 pdf는 브라우저 접속이 가능한것.그래서 다운이 안되더라.브라우저에선 이걸 다운받아야하는건지. 아니면 접속인지를 모르니까.cdn은 다행히 우리가 쓰고있는걸 사용이 가능해서Content-Disposition: attachment헤더에 이걸 이용하면 되더라.다운로드 기능이 없어도 외부 브라우저로 접속시 해당 내용이 다운되게 한다.https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Headers/Content-Disposition Content-Disposi..

보완: App Router 적용에서 확인한 공통 한계이후 같은 이전 슬롯 중계 아이디어를 App Router에 적용하면서, 데이터 요청이 성공해도 정적 자원이나 앞단 프록시에서 실패할 수 있다는 점을 확인했다. Pages Router와 App Router의 요청 형식은 다르지만, 이전 빌드 보존과 중계 경로, 청크 제공, 실패 복구를 함께 검증해야 한다는 한계는 공통적이다. 아래 원문의 설계 흐름은 유지하되, 버전 지원과 자동 Reload를 단정했던 설명은 조건부로 보완했다.데이터 200과 페이지 이동 성공은 같지 않다Pages Router의 Data Route가 200이어도 그 페이지에서 새로 필요한 JS/CSS까지 정상이라는 뜻은 아니다. 이미 받은 자원은 동작하더라도, 아직 받지 않은 이전 빌드 청..

X-Content-Type-Options: nosniff 해당 옵션이 켜져있을 경우 이니시스 pc 결제시 모달창을 끌 경우 화면이 블랙스크린이 되어버린다.해당 옵션 찾느라 고생함.

애저 서버에서 HSTS를 설정하고, 프론트 서버에도 HTTP Strict-Transport-Security, HSTS 설정했더니갑자기 결제모듈이 죽었다.사이트가 터지는줄 알았는데, nextjs tree는 살아있고 iframe 태그만 죽었던 것..왜냐하면 서버에서 설정해도 http로 접속해져서 넣은거였는데, 알고보니 헤더가 중복되어 발생하는 문제이건 아니겠지하고 최종테스트까지 넣은건데 당황스러웠다.이거때문에 별수없이 프론트는 hsts를 수동으로 리다이렉트하게 넣었다.서버는 자동으로!

왜 이 프로젝트를 시작했는가업무를 하면서 화상회의, 문서 작성, 코드 리뷰, 메신저가 모두 분리되어 있다는 점이 불편했다.회의는 Zoom,문서는 Notion,대화는 Slack,코드 리뷰는 GitHub에서 이루어지는데 작업 흐름이 계속 끊겼다.특히 개발자 협업에서는 화면을 공유하면서 문서를 함께 수정하거나 실시간으로 의견을 남기는 일이 자주 발생하는데, 기존 서비스들은 특정 영역에만 집중되어 있었다.그래서 하나의 공간 안에서실시간 화면 공유음성 대화공동 문서 작성작업 이력 추적을 동시에 수행할 수 있는 협업 워크스페이스를 만들어 보기로 했다.프로젝트 목표Atlas Workspace는 개발자와 팀을 위한 실시간 협업 플랫폼이다.단순 화상회의 서비스가 아니라 다음과 같은 경험을 제공하는 것을 목표로 했다.하나..

웹앱에서 유튜브 영상을 유저들이 추가할 수 있게 해놨는데, 이때 들어오는 iframe이 의도치않게 새창열기를 한다.유튜브 앱을 미설치할 경우 뒤로가기가 가능해서 돌아갈 수가 있는데,설치된 경우 백화현상(흰화면)이 출력되는 문제가 발생하더라.이를 해결하기 위해서 공식문서를 봤는데, 샌드박스라는 속성을 넣어주면 되더라.default가 차단. 속성이 없으면 모든 기능 허용여기서 allow-popups을 빼서 적용하면 새창열기가 차단되서 앱을 업데이트 하지 않아도 되니까일단 임시로 적용해서 모두 막음.그렇다고 그냥 '' 하면 유튜브조차도 안불러와진다.https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#sandbox HTML in..