安裝設定

注释

如果您打算開發某個功能，請先在 Discord 上通知我們，這樣我們可以：

1. 讓您知道該功能是否適合被加入 Immich
2. 提供一些實現相關功能的建議
3. 確保沒有人已經在開發相同的功能以避免重複勞動

感謝您對貢獻感興趣 😊

環境

服務

此環境包含下列服務。每個服務的詳細細節可在其 README 中查看。

• 伺服器 - /server
• 網頁應用程式 - /web
• 機器學習 - /machine-learning
• Redis
• 暴露埠 5432 的 PostgreSQL 開發資料庫，您可以使用任何資料庫客戶端訪問

所有服務均使用單一 Docker Compose 指令打包運行。

伺服器與網頁應用程式

1. Clone 此專案倉庫。
2. 執行 cp docker/example.env docker/.env。
3. 編輯 docker/.env 以填寫所需的變數 UPLOAD_LOCATION。
4. 在根目錄中執行命令：

啟動開發伺服器

make dev # 系統需安裝 Makefile。

5. 在瀏覽器中打開 http://localhost:3000 訪問開發實例，或者通過行動應用程式進行連接。

所有服務將啟用了即時熱重載，確保快速的反饋循環。

您可通過 http://your-machine-ip:3000 或 http://localhost:3000 訪問網頁，並通過 mobile app 使用 http://your-machine-ip:3000/api 訪問伺服器。

注意事項：

• "web" 開發容器以 uid 1000 運行。如果該 uid 在掛載的卷上沒有讀寫權限，您可能會遇到錯誤。
• 在使用無 root 權限的 docker 設定時，您需要在容器內使用 root 帳戶，否則可能會遇到讀寫權限錯誤，詳情請參閱 docker/docker-compose.dev.yml 文件中的註解。

連接網頁到遠端後端

如果您只需要開發網頁，並連接到已存在的遠端後端，請按以下步驟操作：

1. 建立 Immich SDK - cd open-api/typescript-sdk && npm i && npm run build && cd -
2. 進入 web 資料夾 - cd web/
3. 安裝 web 依賴 - npm i
4. 啟動 web 開發伺服器

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 變更，請執行以下步驟：

1. 將 @immich/ui 安裝為與 immich/ 並列的位置，如 /home/user/immich 和 /home/user/ui
2. 通過 npm run build 建置 @immich/ui 專案
3. 在 docker/docker-compose.dev.yaml 文件的 web service 段落中取消註釋對應的自訂掛載 (../../ui:/usr/ui)
4. 在 web/vite.config.js 文件中取消註釋對應的別名 ('@immich/ui': path.resolve(__dirname, '../../ui'))
5. 在 web/src/app.css 文件中取消註釋該行：@import '/usr/ui/dist/theme/default.css'; 並註釋掉 @import '@immich/ui/theme/default.css';
6. 通過 make dev 啟動堆棧
7. 每次修改 @immich/ui 後，重新構建它（npm run build）

行動應用程式

安裝設定

1. 使用 FVM 建立 Flutter 工具鏈。
2. 執行 flutter pub get 安裝依賴。
3. 執行 make translation 生成翻譯文件。
4. 執行 fvm flutter run 啟動應用。

翻譯

若需要新增翻譯文字，請在 immich 專案根目錄的 i18n/en.json 文件中新增鍵值對。然後在 mobile/ 資料夾中執行：

make translation

行動應用將向您詢問需連接的後端。若您不需修改伺服器代碼或上傳照片，可以利用演示後端（https://demo.immich.app/）。或者，您可以依照以上步驟自行運行伺服器。

IDE 設定

Lint / 格式化擴充功能

在 IDE 中設置這些功能可提供更佳的開發者體驗，自動在儲存時格式化代碼，並即時提供 lint 問題的反饋。

Dart Code Metrics

行動應用使用 DCM（Dart Code Metrics）進行 lint 和指標計算。有關 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"
}