SvelteKit 어드민 페이지 Docker + Nginx 배포하기

2024.10.08 - [Project] - [포텐데이 409-1pick] 올려올려 라디오 서비스 개발기 - 2

[포텐데이 409-1pick] 올려올려 라디오 서비스 개발기 - 2

서론

올려올려 라디오 서비스의 전체적인 관리를 위한 어드민 페이지를 만들게 됐습니다.

FE는 SvleteKit, BE는 Spring Boot로 구성했습니다.

 

SvelteKit은 Svlete보다 편리하게 페이지 라우팅을 할 수 있는 등 SPA를 쉽게 구축할 수 있다는 장점이 있습니다.

어드민 페이지에 필요한 API는 Spring Boot로 구현했습니다.

서버 구성도

서버 구성도

• 서버 구성에는 여러 제약 조건들이 있는데, 그중 하나가 바로 예산입니다.
  NCP 내 단일 서버 한 대로만 구성했기 때문에 하나의 도커 네트워크 안에 여러 컨테이너로 구성되어 있습니다.
• 기존 네트워크 내에 2개의 컨테이너를 새로 띄웁니다.
  • 하나는 클라이언트를 담당하는 프론트 부분과 다른 하나는 API 서버를 담당하는 백엔드 부분입니다.
  • 백엔드 부분은 기존 컨테이너의 MySQL DB와 Redis DB(처리율 제한 장치)에 접근할 수 있습니다.
• 어드민 페이지는 서브 도메인(admin.upup-radio.site)으로 운영됩니다.
  • 인터넷 게이트웨이에서 요청이 오면 가장 앞단의 nginx 가 리버스 프록시 역할을 합니다.

SvelteKit 빌드하기

먼저 `Dockerfile`을 작성합니다.

FROM node:20-alpine3.19

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

CMD ["npm", "run", "preview", "--", "--host"]

 

• SvelteKit 을 빌드 후 배포할 땐 `npm run preview` 를 사용합니다.
  • 단, SSR로 구현되어 있어 UI 앱으로 라우팅을 해줘야 합니다. 기본 포트 번호는 `4173`입니다. (`localhost:4173`)
  • 도커 컨테이너로 띄우기 때문에 CMD 인수로 `--`, `--host`를 반드시 포함시켜야 합니다.
    이 부분이 포함되어야 정상적으로 라우팅을 할 수 있는 것을 찾는데 고생했습니다. (참고 링크1, 참고 링크2)
  • 만약 포트 번호를 변경해야 한다면 이 링크를 참고하세요

도커 이미지를 빌드한 후 다시 `docker compose up -d`를 입력하면 컨테이너가 올라갑니다.

SvelteKit 빌드 후 컨테이너 띄운 모습

Nginx 설정하기

이제 nginx 서버 블록을 수정해서 `admin.upup-radio.site`로 요청이 왔을 때 UI 앱으로 라우팅을 하도록 설정해야 합니다.

어드민 페이지도 `https` 프로토콜을 사용하기 때문에 서브 도메인으로도 SSL 인증이 되어 있어야 합니다.

기존 서버 블록에 서브 도메인 추가

admin.upup-radio.site 리다이렉트

이 서버 블록은 `80` 포트, 즉 `http` 프로토콜을 사용한 요청을 `https` 포트로 리다이렉션 해주는 블록입니다.

이곳에서 `admin.upup-radio.site`를 추가해 줍니다.

리버스 프록싱 설정하기 - UI 앱과 API 서버

admin.upup-radio.site 서버 블록

• API 서버에 보내는 요청은 `/api`로 시작합니다.
  이 요청에 대해 `API 서버의 포트 번호`로 프록싱을 해줍니다. (`8090`포트를 사용했습니다.)
• 그 외 요청은 UI 앱에서 처리해야 합니다.
  여기선 기본 포트인 `4173` 을 사용했습니다.

설정을 마치면 정상 작동하는 것을 확인할 수 있습니다.

어드민 페이지

 

도커 컨테이너화 할 때 스벨트 관련 자료를 찾기 힘들어서 컨테이너는 정상 작동하는데 라우팅이 안돼서 고생했었는데,

이 포스팅이 도움이 되었으면 합니다.

 

읽어주셔서 감사합니다.