セットアップ

ノート

取り組む予定の機能がある場合は、Discordで事前に知らせていただけると以下の対応が可能です：

その機能がImmichに取り込まれるものかどうかをお伝えします
その機能が理想的に実装される方法についてのガイダンスを提供します
同じ問題/機能にすでに誰かが取り組んでいないかどうかを確認し、作業の重複を避けます

貢献に興味を持っていただきありがとうございます 😊

環境

サービス

この環境には以下のサービスが含まれています。各サービスのREADMEに詳細が記載されています。

サーバー - /server
Web アプリ - /web
機械学習 - /machine-learning
Redis
PostgreSQL 開発データベース（ポート 5432 が公開されており、任意のデータベースクライアントでアクセス可能）

すべてのサービスは、単一の Docker Compose コマンドで実行できるようにパッケージ化されています。

サーバーとウェブアプリ

プロジェクトリポジトリをクローンします。
cp docker/example.env docker/.env を実行します。
必要な変数 UPLOAD_LOCATION の値を提供するために docker/.env を編集します。
ルートディレクトリから以下を実行します：

開発サーバーを開始
make dev # システムにインストールされた Makefile が必須です。

ブラウザで http://localhost:3000 にアクセスするか、モバイルアプリを使用して接続します。

すべてのサービスはホットリロードを有効にして起動し、迅速なフィードバックループを提供します。

http://your-machine-ip:3000 または http://localhost:3000 からウェブにアクセスし、http://your-machine-ip:3000/api からモバイルアプリでサーバーにアクセスできます。

注意:

「ウェブ」開発コンテナは uid 1000 で実行されます。この uid がマウントされたボリュームで読み取り/書き込み権限を持っていない場合、エラーが発生する可能性があります。
ルートレス Docker のセットアップの場合、コンテナ内で root を使用する必要があります。そうしないと、読み取り/書き込み権限に関連するエラーが発生する可能性があります。詳細は 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 内で @immich/ui のローカル変更を確認するには、以下を実行します：

@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 ファイルの対応するエイリアスをアンコメントします ('@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 の設定

Lint / format 拡張機能

IDE にこれらを設定することで、開発者のエクスペリエンスが向上し、保存時に自動フォーマットされ、Lint の問題に即座にフィードバックが得られます。

Dart Code Metrics

モバイルアプリでは DCM（Dart Code Metrics）を使用してリントとメトリクス計算を行います。DCM の設定に関する詳細はこちらをご覧ください。

注: ライセンスの有効化は必要ありません。

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 の設定​

Lint / format 拡張機能​

Dart Code Metrics​

VSCode​

環境

サービス

サーバーとウェブアプリ

リモートバックエンドにウェブを接続

`@immich/ui`

モバイルアプリ

セットアップ

翻訳

IDE の設定

Lint / format 拡張機能

Dart Code Metrics

VSCode