Blog
//
Blog
About Me
//

백엔드서버→NAS API 파일 업로드→NAS 영상 서빙 뷰 페이지 반환까지의 구현 샘플

Category
Author
citeFred
citeFred
PinOnMain
1 more property
Context
Table of Content

샘플 모습

1.
프론트엔드의 파일 업로드 요청 시작
2.
백엔드 컨트롤러의 요청 흐름
a.
(백엔드) 컨트롤러 요청 도착 → (백엔드) 파일 서비스 전달
b.
(백엔드) 파일 서비스 → (NAS) 파일 저장 서버 컨트롤러로 요청
c.
(NAS) 파일 저장 컨트롤러 → NAS 파일 서비스 → NAS 스토리지 내 저장
d.
(백엔드) 파일 정보 및 NAS 정적 서빙 경로 데이터베이스 저장
3.
프론트엔드의 파일 데이터베이스 목록 조회 화면
4.
강의실의 시청 화면 진입 모습
5.
시청 화면 요청 시 NAS의 웹서버로부터 서빙되는 영상의 모습
Search

문제 인식

해결 방안 탐색

해결 시도와 결과

Refused to display in a frame because it set 'X-Frame-Options' to 'sameorigin'.

도메인 구매 후, DNS 관리페이지 -> A Record 설정 -> 서버 외부 IP 연결

•
두개의 접근 주소 HTTP 일반 배포 상태 확인 (이후 → SSL 발급 후 HTTPS 보안 배포로 연결)

포트포워딩 정리

[서버컴퓨터]
•
프론트엔드 Angular -> Nginx 웹서버 정적 서빙 내부 4200 포트 -> 외부(도메인) 80 포트 → SSL 443 포트
•
백엔드 NestJS -> Express 내장서버 동적 데이터 서빙(WAS) 내부 3100 포트 -> 외부(도메인) 3100 포트
•
데이터베이스 MySQL -> Docker 내부 네트워크 3306 포트 -> 내부 3306 포트 -> 백엔드와 통신
•
Pixel Streaming(UE) -> Turn/Stun Server 포트 -> 외부 85 포트 → SSL 외부 8443 포트
자체 서버(로컬) HTTPS 배포를 위한 WACS를 통한 자체 Let’s Encrypt 인증서 발급과 연결

샘플 모습

1.
프론트엔드의 파일 업로드 요청 시작
2.
백엔드 컨트롤러의 요청 흐름
a.
(백엔드) 컨트롤러 요청 도착 → (백엔드) 파일 서비스 전달
b.
(백엔드) 파일 서비스 → (NAS) 파일 저장 서버 컨트롤러로 요청
c.
(NAS) 파일 저장 컨트롤러 → NAS 파일 서비스 → NAS 스토리지 내 저장
d.
(백엔드) 파일 정보 및 NAS 정적 서빙 경로 데이터베이스 저장
3.
프론트엔드의 파일 데이터베이스 목록 조회 화면
4.
강의실의 시청 화면 진입 모습
5.
시청 화면 요청 시 NAS의 웹서버로부터 서빙되는 영상의 모습
백엔드서버→NAS API 파일 업로드→NAS 영상 서빙 뷰 페이지 반환까지의 구현 샘플

문제 인식

•
문제 상태 분석

해결 방안 탐색

•
특정 유저가 로그인하는 방식의 SSH 세션은 결국 해당 접속을 종료하면 세션이 종료되면서 관련 프로세스가 모두 종료됨
•
따라서, NAS가 계속하여 실행되는 root 유저로 접근하면 해결 할 수 있지만 root계정으로 터미널에 접근하는 것을 개방하는 것은 위험성이 있음
•
NAS 자체에서 제공하는 Docker를 통해 실행하면 root에서 실행하는것이므로 지속적인 프로세스를 유지 할 수 있음

문제 해결 과정

•
Docker를 활용하기 위한 순서

추가적인 문제의 발생

•
해당 프로젝트는 이제 Docker 가상환경 내에서 작동하기 때문에 상대경로로는 해당 컴퓨터의 정확한 video라는 폴더에 접근 할 수 없었다.
•
공유폴더로 지정하고있는 video의 절대경로를 입력하여 정확한 공유폴더로 찾아 갈 수 있도록 지정
•
컨테이너 설정에서 컨테이너 볼륨을 공유폴더와 맵핑하는 부분이 있는것으로 보아 이부분에서도 해결 가능 할 것으로 보인다.
NAS 내 파일업로드 애플리케이션의 특정 SSH에 종속된 세션 만료 문제 + Docker와 Host의 컨텍스트 인식 문제

NAS 파일 스토리지를 활용하기

•
NAS:
•
서비스 백엔드 서버:
•
서비스 프론트엔드 서버:
•
추가 고려 사항
•
개발 과정 중 문제 해결과 현재 상태
NAS 파일서버 구축과 웹서버(Nginx)를 통한 파일 서빙

데이터 바인딩을 위한 @Input 데코레이터

Angular에서 데이터 바인딩을 위한 데코레이터는 주로 @Input()을 사용하여 부모 컴포넌트로부터 값을 받아오는 데 사용됩니다. 이 데코레이터는 자식 컴포넌트에서 부모 컴포넌트의 데이터를 바인딩할 수 있게 해줍니다.
다음은 Angular에서 @Input() 데코레이터를 사용하여 데이터 바인딩을 구현하는 간단한 예시입니다.
1.
자식 컴포넌트 생성 먼저 자식 컴포넌트를 생성하고, @Input()을 사용하여 데이터를 받을 준비를 합니다.
2.
부모 컴포넌트 생성 부모 컴포넌트에서 자식 컴포넌트를 사용하고, 데이터를 전달합니다.
3.
모듈에 컴포넌트 추가 모듈 파일에 자식 컴포넌트를 추가합니다.
4.
결과 이제 Angular 애플리케이션을 실행하면, 부모 컴포넌트에서 자식 컴포넌트로 데이터가 바인딩되어 표시됩니다. 자식 컴포넌트는 부모의 데이터를 받아서 화면에 출력하게 됩니다.
이렇게 @Input() 데코레이터를 사용하여 Angular에서 데이터 바인딩을 구현할 수 있습니다.
Angular의 @Input 데코레이터 사용 방법

Standalone?

Angular에서 "Standalone" 컴포넌트는 Angular 14 이상에서 도입된 기능으로, 모듈 없이 독립적으로 사용할 수 있는 컴포넌트를 의미합니다. 이는 컴포넌트의 재사용성과 관리성을 높이며, 더 간편하게 애플리케이션을 구성할 수 있게 해줍니다.
Standalone 컴포넌트의 특징
1.
모듈 불필요: 기존의 Angular 컴포넌트는 반드시 모듈에 포함되어야 했지만, Standalone 컴포넌트는 독립적으로 사용할 수 있습니다.
2.
간편한 사용: 컴포넌트를 다른 컴포넌트에서 직접 사용할 수 있어, 불필요한 모듈 의존성을 줄일 수 있습니다.
3.
Lazy Loading 지원: Standalone 컴포넌트는 Lazy Loading을 지원하여, 필요할 때만 로드할 수 있습니다.
Standalone 컴포넌트 생성 예시 다음은 Standalone 컴포넌트를 생성하는 방법입니다.
Standalone 컴포넌트 사용 이제 다른 컴포넌트에서 Standalone 컴포넌트를 사용할 수 있습니다. 예를 들어, 부모 컴포넌트에서 사용해 보겠습니다.
모듈에 등록하지 않고 사용 Standalone 컴포넌트는 모듈에 등록할 필요가 없으므로, 다음과 같이 사용할 수 있습니다.
컴포넌트의 standalone의 필요성과 적용 범위 고려

1. 백엔드 NestJS+내장 Express 컨테이너화 및 실행

1.1 Dockerfile 및 .dockerignore 작성

•
MP_Project/Back-end/Dockerfile 생성
•
MP_Project/Back-end/.dockerignore 생성

1.2 이미지 빌드

•
터미널 MP_Project/Back-end/ 경로(Root)에서
•
Docker-Desktop에서 생성된 NestJS 백엔드 프로젝트가 빌드된 이미지 확인

1.3 컨테이너 실행

•
CLI를 통한 이미지→컨테이너 실행 명령어
[Docker] Docker VM 활용 통합 배포와 CI/CD 파이프라인 구축

1. 플러그인 설치

Marketplace에서 아래 키워드로 검색하여 각각 설치한다.
•
SQLTools
•
@tag:sqltools-driver

2. 설치 후 커넥션 추가

•
좌측 하단 원통형 DB 아이콘이 생성되고 Add New Connection으로 DB와 연결해야 한다.
•
드라이버 플러그인도 설치가 정상적으로 되었다면 아래와 같이 아이콘이 나타난다. MySQL 선택
[Node.js] 12. 데이터베이스 GUI VSCode 플러그인
Load more
　｜　Main Page　｜　Category　｜　 Tags　｜　About Me　｜　Contact　｜　Portfolio