{"id":31931540,"url":"https://github.com/narcisource/ghibli-films","last_synced_at":"2026-07-18T06:35:08.159Z","repository":{"id":317211741,"uuid":"1066480396","full_name":"NarciSource/Ghibli-Films","owner":"NarciSource","description":"스튜디오 지브리 영화의 명장면 감상평 서비스","archived":false,"fork":false,"pushed_at":"2026-03-17T13:56:51.000Z","size":4426,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-18T06:34:51.229Z","etag":null,"topics":["apollo","elasticstack","graphql","nextjs"],"latest_commit_sha":null,"homepage":"https://narcisource.github.io/Ghibli-Films/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NarciSource.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-29T14:40:24.000Z","updated_at":"2026-03-17T13:56:57.000Z","dependencies_parsed_at":"2025-09-29T16:23:53.782Z","dependency_job_id":null,"html_url":"https://github.com/NarciSource/Ghibli-Films","commit_stats":null,"previous_names":["narcisource/ghibli-films"],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/NarciSource/Ghibli-Films","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarciSource%2FGhibli-Films","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarciSource%2FGhibli-Films/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarciSource%2FGhibli-Films/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarciSource%2FGhibli-Films/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NarciSource","download_url":"https://codeload.github.com/NarciSource/Ghibli-Films/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NarciSource%2FGhibli-Films/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35609253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-18T02:00:07.223Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo","elasticstack","graphql","nextjs"],"created_at":"2025-10-14T04:56:47.526Z","updated_at":"2026-07-18T06:35:08.146Z","avatar_url":"https://github.com/NarciSource.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 스튜디오 지브리 영화의 명장면 감상평 서비스\n\n**GraphQL** 학습을 목적으로 제작된 웹 서비스로,  \nREST API의 오버페칭/언더페칭 문제를 해결하기 위해 GraphQL을 도입하고 Apollo + Express 기반으로 구현하였다.  \n서비스 아키텍처에는 Traefik, OAuth2-Proxy, Keycloak을 추가하여 인증/인가를 프록시 레이어에서 처리하고,  \n애플리케이션 서버는 토큰 검증에 집중할 수 있도록 설계하였다.  \n\n또한 Elastic Stack(Elasticsearch, Logstash, Kibana)을 도입하여 MySQL 데이터를 실시간으로 동기화하고,  \nElasticsearch 기반의 고성능 검색 기능과 Kibana를 통한 데이터 시각화 및 분석 환경을 제공함으로써  \n학습 목적뿐만 아니라 실제 운영 환경에서도 데이터 분석과 모니터링이 가능하도록 구성하였다.\n\n\u003e 초기 베이스: _GraphQL과 타입스크립트로 개발하는 웹 서비스_ (저자: 강화수)에서 제공하는 [🔗예제 프로젝트](https://github.com/hwasurr/graphql-book-fullstack-project)\n\n## 기술스택\n\n[![graphql](https://img.shields.io/badge/GraphQL-E10098?style=flat-square\u0026logo=graphql\u0026logoColor=white)](https://graphql.org/)\n[![apollo](https://img.shields.io/badge/Apollo-311C87?style=flat-square\u0026logo=apollographql\u0026logoColor=white)](https://www.apollographql.com/)\n[![keycloak](https://img.shields.io/badge/Keycloak-4D4D4D?style=flat-square\u0026logo=keycloak\u0026logoColor=white)](https://www.keycloak.org/)  \n[![express](https://img.shields.io/badge/Express-000000?style=flat-square\u0026logo=express\u0026logoColor=white)](https://expressjs.com/ko/)\n[![nodejs](https://img.shields.io/badge/Node.js-5FA04E?style=flat-square\u0026logo=nodedotjs\u0026logoColor=white)](https://nodejs.org/ko/)\n[![typeorm](https://img.shields.io/badge/TypeORM-FE0803?style=flat-square\u0026logo=typeorm\u0026logoColor=white)](https://typeorm.io/)  \n[![mysql](https://img.shields.io/badge/MySQL-4479A1?style=flat-square\u0026logo=mysql\u0026logoColor=white)](https://www.mysql.com/)\n[![redis](https://img.shields.io/badge/Redis-FF4438?style=flat-square\u0026logo=redis\u0026logoColor=white)](https://redis.io/)\n[![elasticsearch](https://img.shields.io/badge/Elasticsearch-005571?style=flat-square\u0026logo=elasticsearch\u0026logoColor=white)](https://www.elastic.co/kr/elasticsearch)\n[![logstash](https://img.shields.io/badge/Logstash-005571?style=flat-square\u0026logo=logstash\u0026logoColor=white)](https://www.elastic.co/kr/logstash)\n[![kibana](https://img.shields.io/badge/Kibana-005571?style=flat-square\u0026logo=kibana\u0026logoColor=white)](https://www.elastic.co/kr/kibana)  \n[![nextjs](https://img.shields.io/badge/Next.js-000000?style=flat-square\u0026logo=nextdotjs\u0026logoColor=white)](https://nextjs.org/)\n[![svelte](https://img.shields.io/badge/Svelte-FF3E00?style=flat-square\u0026logo=svelte\u0026logoColor=white)](https://svelte.dev/)\n[![zustand](https://img.shields.io/badge/🐻_Zustand-F56D2E?style=flat-square\u0026logoColor=white)](https://zustand-demo.pmnd.rs/)\n[![chakra ui](https://img.shields.io/badge/Chakra_UI-1BB2A9?style=flat-square\u0026logo=chakraui\u0026logoColor=white)](https://chakra-ui.com/)\n[![keycloakify](https://img.shields.io/badge/⚛️_Keycloakify-4D4D4D?style=flat-square\u0026logoColor=white)](https://www.keycloakify.dev/)  \n[![voyager](https://img.shields.io/badge/🛰️Voyager-548f9e?style=flat-square\u0026logoColor=white)](https://github.com/APIs-guru/graphql-voyager)\n[![biome](https://img.shields.io/badge/Biome-60A5FA?style=flat-square\u0026logo=biome\u0026logoColor=white)](https://biomejs.dev/)\n[![typescript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)  \n[![traefik](https://img.shields.io/badge/Traefik-24A1C1?style=flat-square\u0026logo=traefikproxy\u0026logoColor=white)](https://traefik.io/traefik)\n[![docker-compose](https://img.shields.io/badge/Docker_Compose-2AB4FF.svg?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MjMgNjY1Ij4KICA8cGF0aCBmaWxsPSIjZmNmY2ZjIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00MTggMWMtNiAxLTkgMy0xMyA4LTQgMy00IDMtMTAgMS0xMi02LTYwIDAtNjYgOC01IDYtMTEgNDQtOCA1MGwyMyAxN2M3IDQgNyA2IDIgNy0yMyAzLTM3IDI5LTI5IDUyIDMgOSAzIDktMTAgNi0xOS01LTI0LTYtNDUtNS00NyAwLTg2IDE4LTEwOSA1MGExMzUgMTM1IDAgMCAwLTI0IDY0Yy0zIDI4IDIgNDggMTcgNzJsMjIgMjdjNDAgNDQgNDEgNjYgMyA5MS00NSAzMC0xMDQgMTktMTA2LTIwLTEtMTYgNC0yOSAxNy01MiAxMy0yNCAxNC0zMyAzLTUybDEzLThjMjQtMTIgMjItOSAyMy0zNCAwLTIyIDItMjAtMjMtMzAtMTgtNi0yMC02LTQwLTEtMjggOS00MCAxNC00MSAxOCAwIDItMSAzLTIgMy03IDAtMTQgMTItMTUgMjUtMSAyMSA2IDI5IDMwIDM2IDMwIDkgMzUgMjQgMTkgNDktMzYgNTMtMzIgMTAyIDExIDEyMSAzNSAxNiA3NCAxMyAxMTktOWwxMS01IDMgMzJjMCAzNC00MCAzOC04OSA4bC0xNi0xMGMtNTEtMjktMTAyIDI0LTY2IDcwIDE1IDIwIDQyIDIxIDQ2IDIgMi04IDAtMTEtMTAtMTktMTYtMTItMTctMjQtMi0yNyA1LTEgMjYgOCAyOCAxMmwzNCAyOSAyMCAxMiAyMCA4YzM2IDEzIDgyLTE1IDgyLTUwIDAtMTAgMC0xMCA2LTUgMTAgMTAgMTggMTYgMjMgMTkgNiAzIDYgNCAxIDctNSAyLTUgMi01IDctMSA4IDEgMjkgNCAzMyA0IDcgNjMgNDYgNjkgNDYgMyAwIDQ4LTI1IDUxLTI5IDItMSAzLTM0IDEtMzZsLTE2LTljLTE2LTgtMTYtOC05LTEwIDE5LTcgMzctMjcgNDMtNDdsNS0xYTE2NSAxNjUgMCAwIDAgNjAtMTNjOSAwIDM0LTIyIDQwLTM0bDQtOGM0LTcgNi0yNiA2LTU2IDAtMjkgMS0yNy0xMC0yOS02LTItOC0zLTEzLTgtMzAtMjktNzktMjMtOTYgMTAtMyA3LTMgNy04IDlzLTYgNS01IDE3djE1YzEgMTQgNCAxNiAzNCAyOGwxMiA2YzcgMyA3IDMgMzAtNyA4LTMgOS0zIDkgMS02IDIyLTY0IDQyLTczIDI0YTg3IDg3IDAgMCAwLTYzLTQyYy04IDAtOCAwIDYtMTFhNzM2IDczNiAwIDAgMCA4NS04OWwzLTVjMTktMzEgMjEtNzMgMy0xMDctNy0xNS0yMy0zNS0zNi00OC0zOS0zNi00Ni00Ny0zOC02MiA0LTggMTUtMTcgMjAtMTVhNDUyIDQ1MiAwIDAgMCA1NS0xMmMxMS00IDEzLTUgMTQtMTAgMC00IDItNyA5LTE0IDI0LTI2LTgtODAtNDMtNzFNMjI4IDMzNGMxIDEgMCAxLTEgMS0yMCAwLTI4IDMyLTEyIDQyIDE3IDkgMzctMyAzNy0yMiAwLTctNy0xNy0xMS0xN3YtMWMzLTIgMC0zLTctNGwtNiAxbTU0IDgtNCAxYy0yMiAzLTI1IDM5LTMgNDQgMjQgNSA0MS0yMSAyNS0zOGwtNS0zdi0zYy0xLTItMTQtMy0xMy0xbS00OSAxMjBjLTYgNy05IDE0LTkgMjQgMCA4IDEgMTIgMyA2IDItMTIgOC0yOCAxMy0zM3YtM2MtMSAwLTQgMi03IDZtOTcgNGMwIDIgMjMgMTcgMjcgMTcgMiAwIDEtMy00LTctOS03LTIzLTEzLTIzLTEwbS01NCA2Yy0yMSA1MSAyOSA5NiA3MyA2NyA4LTYgOC03LTEtOC0zOS0zLTYzLTIzLTY2LTU0LTItMTItMy0xMy02LTUiLz4KPC9zdmc+Cg==\u0026style=flat-square\u0026logoColor=black)](https://docs.docker.com/compose/)\n[![docker](https://img.shields.io/badge/Docker-2496ED?style=flat-square\u0026logo=Docker\u0026logoColor=white)](https://www.docker.com/)\n[![nginx](https://img.shields.io/badge/NGINX-009639?style=flat-square\u0026logo=nginx\u0026logoColor=white)](https://nginx.org/)  \n\n## 스크린샷\n\n\n| ![films-day](https://github.com/user-attachments/assets/7c071968-0f43-4a72-82f4-d06029c3a3f8) | ![films-night](https://github.com/user-attachments/assets/996ec4fb-bbb3-4b72-88ab-eae7c5980e7b) |\n| --------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |\n| ![scene](https://github.com/user-attachments/assets/584f2688-83b0-4ec0-adbb-d45d296090eb)     | ![search](https://github.com/user-attachments/assets/59b73f10-650f-486e-8be8-1298c9f7271d)      |\n| ![reviews](https://github.com/user-attachments/assets/22f9634c-69e5-43da-8969-ffbfff6fad0a)   | ![admin](https://github.com/user-attachments/assets/3c824c02-ff8b-4d88-adf3-aec58a15ba36)       |\n| ![login](https://github.com/user-attachments/assets/8e1b3447-6333-498b-9695-7af240723ede)     | ![signup](https://github.com/user-attachments/assets/32ccecbb-5958-47c0-ad3f-0decd75b9c04)      |\n\n## 아키텍처\n\n![Architecture Diagram](https://github.com/user-attachments/assets/a2e4b2d6-d78d-4d96-a468-47f80ab0a284)\n\n- 인프라\n    - **Traefik**: 인그레스/리버스 프록시, 라우팅 관리, 컨테이너 이벤트 감지 기반 동적 라우팅\n    - **OAuth2-Proxy**: 프록시 레벨에서 인증/인가 처리, Keycloak과 연동, 애플리케이션 서버는 토큰 검증 불필요\n    - **Keycloak**: 중앙 인증 서버(IdP), 사용자 관리, OIDC 기반 토큰 발급\n- 백엔드\n    - **Apollo Server**: Express 플러그인으로 GraphQL query, mutation, resolver 처리\n    - **Express**: 웹 서버 및 미들웨어 관리\n    - **비즈니스 로직**: 클라이언트 요청을 받아 MySQL과 Redis에 데이터 저장 및 캐싱\n    - **MySQL**: 영속적 데이터 저장 (영화, 명장면, 감상평)\n    - **Redis**: 캐싱 및 성능 최적화\n    - **Elasticsearch**: 검색 엔진, 영화 데이터에 대한 텍스트 검색 지원\n    - **Logstash**: 데이터 파이프라인, MySQL에서 Elasticsearch로 동기화\n    - **Kibana**: Elasticsearch 데이터를 시각화, 검색/로그 분석 및 모니터링 대시보드 제공\n- 프론트엔드\n    - **Apollo Client**: GraphQL 쿼리/뮤테이션 전송, 클라이언트 캐싱, 데이터 페칭\n    - **Nest.js**: SSR, SSG UI 렌더링 및 상태 관리\n    - **CDN** (Nginx 기반): 정적 자산 배포 및 캐싱, 접근 속도 최적화\n    - **Chakra UI**: 웹 UI 구성 및 스타일링\n- 데이터 흐름\n    1. 클라이언트에서 Apollo Client로 GraphQL 요청 전송\n    2. 요청은 Traefik → OAuth2-Proxy → Apollo Server로 전달\n        - OAuth2-Proxy가 Keycloak과 연동해 사용자 인증/인가 확인\n        - 인증된 요청만 백엔드로 전달\n    3. Apollo Server + Express에서 요청 처리 후 비즈니스 로직 실행\n    4. MySQL/Elasticsearch/Redis에서 필요한 데이터 조회 또는 저장\n        1. MySQL에 저장된 데이터는 Logstash 파이프라인을 통해 수집·정제되어 Elasticsearch로 동기화\n    5. 서버에서 처리된 데이터를 GraphQL Response로 클라이언트에 반환\n    6. 클라이언트에서 Apollo Client가 데이터 수신 후 렌더링\n    7. 정적 자산(CSS, JS, 이미지 등)은 CDN에서 빠르게 제공\n\n## 서브 프로젝트\n\n| 프로젝트       | 저장소                                                                                               | 설명                       | 버전   |\n| -------------- | ---------------------------------------------------------------------------------------------------- | -------------------------- | ------ |\n| Backend        | [/Ghibli-Films/tree/server](https://github.com/NarciSource/Ghibli-Films/tree/server)                 | Apollo + Express 기반 서버 | v1.5.0 |\n| Frontend       | [/Ghibli-Films/tree/web](https://github.com/NarciSource/Ghibli-Films/tree/web)                       | Next.js 클라이언트         | v2.7.0 |\n| Keycloak-theme | [/Ghibli-Films/tree/keycloak-theme](https://github.com/NarciSource/Ghibli-Films/tree/keycloak-theme) | Keycloak 테마              | v1.0.0 |\n| Infra          | [/Ghibli-Films/tree/main/infra](https://github.com/NarciSource/Ghibli-Films/tree/main/infra)         | 인프라 관리                | -      |\n\n## 폴더 구조\n\n\u003cdetails\u003e\n\u003csummary\u003e열기\u003c/summary\u003e\n\n```\nGhibli-Films\n├─ README.md\n├─ .env # 환경변수\n├─ package.json # 패키지 의존성 관리\n│  └─ package-lock.json\n├─ codegen.yml # GraphQL 스키마 추출기\n├─ docker-compose.yml # 종합 도커 컴포즈\n├─ docs\n│  └─ index.html # gh-pages용 웹페이지\n├─ infra # 인프라 관리\n│  ├─ docker-compose.yml # 인프라 도커 컴포즈\n│  ├─ gateway # 게이트웨이 설정\n│  │  └─ traefik.yml\n│  ├─ oauth2-proxy # 인증 게이트웨이 설정\n│  │  ├─ entrypoint.sh\n│  │  └─ config.sh\n│  ├─ keycloak # 인증 프로바이더 설정\n│  │  ├─ keycloak.conf\n│  │  └─ realm-dev.json\n│  ├─ cdn\n│  │  └─ nginx.conf\n│  ├─ rdb/sql # DDL/DML\n│  │  ├─ 01.ddl.sql\n│  │  ├─ 02.directors.sql\n│  │  ├─ 03.films.sql\n│  │  └─ 04.cuts.sql\n│  ├─ elasticsearch # 인덱스 템플릿 초기화\n│  │  ├─ create_index_templates.sh\n│  │  └─ templates\n│  │     └─ film-template.json\n│  └─ logstash # ETL 파이프라인\n│     ├─ mysql-connector-j-9.4.0.jar\n│     └─ sync_rdb_to_es.conf\n└─ project # 프로젝트\n   ├─ server\n   ├─ web\n   └─ keycloak-theme\n```\n\n\u003c/details\u003e\n\n## 실행 방법\n\n```sh\n$ git clone https://github.com/NarciSource/Ghibli-Films\n\n$ cd Ghibli-Films\n\n$ docker-compose up -d\n```\n\n## 접속 안내\n\n| 환경               | URL                               |\n| ------------------ | --------------------------------- |\n| web                | \u003chttp://localhost:8080\u003e           |\n| cdn                | \u003chttp://localhost:8081\u003e⁠          |\n| server healthcheck | \u003chttp://localhost:4000\u003e           |\n| graphql schema     | \u003chttp://localhost:4000/voyager\u003e⁠  |\n| graphql playground | \u003chttp://localhost:4000/graphql\u003e⁠  |\n| traefik dashboard  | \u003chttp://localhost:8080/dashboard\u003e |\n| keycloak admin     | \u003chttp://localhost:8080/auth\u003e      |\n| elasticsearch ui   | \u003chttp://localhost:5601\u003e⁠          |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnarcisource%2Fghibli-films","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnarcisource%2Fghibli-films","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnarcisource%2Fghibli-films/lists"}