설치

참고

어떤 기능 작업을 계획하고 있다면, Discord에서 미리 알려주세요. 그러면 저희가 다음을 도와드릴 수 있습니다:

그것이 Immich에 포함될 수 있는지 여부를 알려드립니다.
이상적으로 구현되는 방법에 대한 안내를 제공합니다.
이미 누군가가 해당 문제/기능에 작업 중인지 확인하여 노력을 중복하지 않도록 합니다.

기여에 관심 가져주셔서 감사합니다 😊

환경 설정

서비스

이 환경에는 아래의 서비스들이 포함됩니다. 각 서비스의 README에서 추가적인 세부 정보를 확인할 수 있습니다.

서버 - /server
웹 앱 - /web
머신 러닝 - /machine-learning
Redis
포트 5432가 노출된 PostgreSQL 개발 데이터베이스로, 데이터베이스 클라이언트를 사용하여 접근할 수 있습니다.

모든 서비스는 단일 Docker Compose 명령어로 실행되도록 패키징되어 있습니다.

서버 및 웹 앱

프로젝트 리포지토리를 클론합니다.
cp docker/example.env docker/.env 명령어를 실행합니다.
docker/.env 파일을 열어 필수 변수 UPLOAD_LOCATION 값을 제공합니다.
루트 디렉토리에서 다음 명령어를 실행합니다:

개발 서버 시작
make dev # 시스템에 Makefile이 설치되어 있어야 합니다.

브라우저에서 http://localhost:3000으로 접속하거나 모바일 앱을 통해 연결합니다.

모든 서비스는 빠른 피드백을 위해 핫 리로딩이 활성화된 상태로 시작됩니다.

http://your-machine-ip:3000 또는 http://localhost:3000에서 웹에 접근할 수 있으며, http://your-machine-ip:3000/api를 통해 모바일 앱에서 서버에 접근할 수 있습니다.

참고 사항:

"웹" 개발 컨테이너는 uid 1000으로 실행됩니다. 해당 uid가 마운트된 볼륨에 읽기/쓰기 권한이 없으면 오류가 발생할 수 있습니다.
루트리스 도커 설정인 경우 컨테이너 내에서 루트를 사용해야 하며, 그렇지 않으면 읽기/쓰기 권한 관련 오류가 발생할 수 있습니다. 자세한 내용은 docker/docker-compose.dev.yml의 주석을 참고하세요.

원격 백엔드에 웹 연결

기존의 원격 백엔드에 연결된 상태에서만 웹 개발을 진행하려면 다음 단계를 따릅니다:

Immich SDK 빌드 - cd open-api/typescript-sdk && npm i && npm run build && cd -
웹 디렉토리로 이동 - cd web/
웹 의존성 설치 - npm i
웹 개발 서버 시작

IMMICH_SERVER_URL=https://demo.immich.app/ npm run dev

Windows에서 PowerShell을 사용하는 경우 환경 변수를 별도로 설정해야 할 수 있습니다:

$env:IMMICH_SERVER_URL = "https://demo.immich.app/"
npm run dev

`@immich/ui`

@immich/ui에서의 로컬 변경 내용을 Immich에서 확인하려면 다음을 수행하세요:

@immich/ui를 immich/의 형제 디렉토리로 설치합니다. 예: /home/user/immich와 /home/user/ui
@immich/ui 프로젝트를 npm run build로 빌드합니다.
docker/docker-compose.dev.yaml 파일에서 웹 서비스의 해당 볼륨 주석을 해제합니다 (../../ui:/usr/ui).
web/vite.config.js 파일에서 해당 alias의 주석을 해제합니다 ('@immich/ui': path.resolve(__dirname, '../../ui')).
web/src/app.css 파일에서 @import '/usr/ui/dist/theme/default.css'; 임포트 구문의 주석을 해제하고 @import '@immich/ui/theme/default.css';는 주석 처리합니다.
make dev를 통해 스택을 시작합니다.
@immich/ui에서 변경 작업 후, 재빌드합니다 (npm run build).

모바일 앱

설치

FVM를 사용해 Flutter 도구 체인을 설정합니다.
flutter pub get을 실행하여 의존성을 설치합니다.
make translation을 실행하여 번역 파일을 생성합니다.
fvm flutter run을 실행하여 앱을 시작합니다.

번역

새 번역 텍스트를 추가하려면 Immich 프로젝트의 루트에 있는 i18n/en.json에 키-값 쌍을 입력하세요. 그런 다음 mobile/ 디렉토리에서 아래 명령어를 실행합니다.

make translation

모바일 앱이 연결할 백엔드를 묻습니다. 서버 코드를 변경하거나 사진을 업로드할 필요가 없다면 데모 백엔드(https://demo.immich.app/)를 이용할 수 있습니다. 그렇지 않으면 위의 지침에 따라 서버를 실행할 수 있습니다.

IDE 설정

린트/포맷 확장

IDE에서 이를 설정하면 더 나은 개발자 경험을 제공하며, 저장 시 코드 자동 포맷팅 및 즉각적인 린트 문제 피드백을 제공합니다.

Dart Code Metrics

모바일 앱은 린트 및 메트릭 계산을 위해 DCM(Dart Code Metrics)을 사용합니다. DCM 설정에 대한 자세한 내용은 Getting Started 페이지를 참고하세요.

참고: 라이선스 활성화는 필요하지 않습니다.

VSCode

Flutter, DCM, Prettier, ESLint, Svelte 확장을 설치하세요. 이러한 확장은 .vscode/ 아래 extensions.json 파일에 나열되어 있으며 워크스페이스 추천으로 나타납니다.

다음은 우리가 사용하는 설정입니다. 이 설정은 워크스페이스 설정(settings.json)으로 활성화되어야 합니다:

settings.json
{
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[dart]": {
    "editor.defaultFormatter": "Dart-Code.dart-code",
    "editor.formatOnSave": true,
    "editor.selectionHighlight": false,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": "off"
  },
  "[javascript]": {
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit",
      "source.removeUnusedImports": "explicit"
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[svelte]": {
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit",
      "source.removeUnusedImports": "explicit"
    },
    "editor.defaultFormatter": "svelte.svelte-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[typescript]": {
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit",
      "source.removeUnusedImports": "explicit"
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "cSpell.words": ["immich"],
  "editor.formatOnSave": true,
  "eslint.validate": ["javascript", "svelte"],
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "*.dart": "${capture}.g.dart,${capture}.gr.dart,${capture}.drift.dart",
    "*.ts": "${capture}.spec.ts,${capture}.mock.ts"
  },
  "svelte.enable-ts-plugin": true,
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

환경 설정​

서비스​

서버 및 웹 앱​

원격 백엔드에 웹 연결​

@immich/ui​

모바일 앱​

설치​

번역​

IDE 설정​

린트/포맷 확장​

Dart Code Metrics​

VSCode​