토이프로젝트-디지털 앨범 만들기 Nginx + PhotoPrism + Swagger + Next.js

목차

[[toc]] [TOC] [[TOC]]

아이가 생기고 무수히 많은 사진과 비디오가 핸드폰에 쌓였습니다. GoogleDrive로 동기화 하며 써봤지만 Standard(200GB)가 넘으면 기분 나쁜 비용이 듭니다. 집에 있는 1TB 하드디스크에 사진을 넣고 신규 사진을 매번 카카오톡으로 가족들과 주고 받기 보단 우리가족만의 앨범을 만들고 싶어서 제작과 함께 글을 기록 합니다.

작업 순서

전체 작업이 한눈에 들어오도록 작업의 순서를 나열 했습니다.

  1. PhotoPrism 설치
  2. 홈서버 만들기
  3. Swagger 연결
  4. Next.js 설치
  5. GithubActions을 이용한 CI/CD 파이프라인 구성
  6. DNS, SSL연결

1.PhotoPrism 설치

Docker를 이용해 PhotoPrism을 설치합니다. Dcoker에 공유 되어있는 photoprism을 그대로 쓸거라 간단히 설치가 됩니다.

version: "3"
services:
	photoprism:
		image: photoprism/photoprism
		restart: unless-stopped
		ports:
			- "2342:2342"
		environment:
			PHOTOPRISM_ADMIN_PASSWORD: "${PHOTOPRISM_ADMIN_PASSWORD}"
			PHOTOPRISM_UPLOAD_NSFW: "false"
		volumes:
			- ./photos:/photoprism/originals
			- ./photoprism-storage:/photoprism/storage
		networks:
			- photoprism-network

networks:
	photoprism-network:
		driver: bridge
docker-compose up -d

2.홈서버 만들기

홈 서버 제작에 핵심은 나의 집에서 쓰고 있는 인터넷의 공인 IP를 확보하는 것입니다.

  1. 사용하고 있는 인터넷 회선의 공인 IP를 획득하는 방법을 검색
  2. 인터넷회사에서 제공해주는 설정페이지 에 접속해 내가 만들 서버(PhotoPrism:2342)의 port를 등록
  3. http://공인 IP:2342에 접속 합니다.

3.Swagger 연결

가족들에게 미니멀 어플리케이션 사용경험을 전달 하기 위해 FrontEnd를 별도로 만들 계획입니다. 그러기 위해선 PhotoPrism에서 제공해주는 RESTAPI 기능을 받아야 합니다.

PhotoPrism은 웹어플리케이션 기능도 하면서 RESTAPI를 제공해 줍니다. 저는 RESTAPI를 볼수 있도록 swagger-ui를 설치 합니다.

docker 를 이용해 swagger-ui를 설치합니다.

swagger-ui:
  image: swaggerapi/swagger-ui
  ports:
    - "8080:8080"
  environment:
    SWAGGER_JSON_URL: https://sonapokets.day/swagger/swagger.json
    CORS: "*"
    SWAGGER_UI_CORS: "true"
    # 추가 설정
    SERVER_URL: "https://sonapokets.day"
  depends_on:
    - photoprism
  networks:
    - photoprism-network

Profile picture
Felix Han(한성수) ✉️
I love make minimal software for myself