개인 프로젝트: 삼원호스 웹사이트

Overview

실제 운영이 필요한 소규모 기업 웹사이트를 Nuxt3와 NestJS로 만들고 OCI 무료 티어에서 직접 운영하고 있습니다. 처음에는 사용자·관리자 서비스와 API를 여러 프로세스로 나눴지만 제한된 CPU와 메모리에서는 구조가 무거웠습니다. API를 통합하고 관리자 화면은 CSR·Nginx 정적 서빙으로 바꿨으며, 사용자 서비스는 SEO를 고려해 ISR 방식으로 정리했습니다. Docker·Nginx 운영 환경과 GitHub Actions 배포 자동화, 이미지 사전 변환도 직접 구성했습니다.

Background

회사와 제품 정보를 온라인에 제공할 실제 웹사이트가 필요해 프로젝트를 시작했습니다. OCI 무료 티어를 운영 환경으로 사용하면서 CPU와 메모리가 넉넉하지 않았기 때문에 기능을 추가하는 것보다 서비스 규모에 맞는 구조를 선택하는 일이 중요했습니다.

Tech Stack

Key Tasks

• Nuxt3 사용자·관리자 서비스와 NestJS API 개발
• 분리되어 있던 API 서버를 하나의 NestJS 서비스로 통합
• MySQL 대신 TypeORM 기반 SQLite를 적용해 운영 자원 절감
• 사용자 서비스 ISR, 관리자 서비스 CSR·Nginx 정적 서빙으로 렌더링 방식 분리
• Docker·Nginx 기반 운영 환경 구성 및 GitHub Actions 배포 자동화
• 이미지 업로드 시 다중 해상도와 WebP 파일을 미리 생성하도록 개선
• 메타 태그, JSON-LD, sitemap 등 검색엔진 노출을 위한 기본 SEO 구성

Outcomes

• 무료 티어 자원 안에서 사용자·관리자·API 서비스를 실제 운영
• API 통합과 관리자 정적 서빙으로 서버에서 계속 실행해야 하는 프로세스 수 축소
• GitHub Actions로 소스 반영부터 Docker 빌드·배포까지 자동화
• 요청 시 이미지 변환 대신 업로드 시 사전 생성 방식으로 서버 처리 부담 감소

Insights

• 서비스 규모가 작다면 구조를 많이 나누는 것보다 운영 비용이 낮은 구성이 더 적합할 수 있었습니다.
• 사용자 화면과 관리자 화면은 요구사항이 달라 같은 렌더링 방식을 고집할 필요가 없었습니다.
• 직접 운영해보니 코드 구조뿐 아니라 프로세스 수, 메모리 사용량, 배포 방식까지 개발 결정에 영향을 줬습니다.

Links

• 삼원호스 사이트 보기