Open WebUIに貢献する準備はできましたか？さあ始めましょう！ 🚀

Open WebUIの開発に挑戦する準備が整いましたか？この包括的なガイドでは、ローカル開発環境を迅速かつ簡単に設定する方法をご紹介します。経験豊富な開発者でも初心者の方でも、フロントエンドの調整、バックエンドの強化、さらにはOpen WebUIの未来への貢献をする準備を整えましょう！以下の簡単で詳細な手順で開発環境を起動してください！

前提条件

始める前に、システムが以下の最低要件を満たしていることを確認してください：

オペレーティングシステム: Linux（またはWindowsのWSL）、Windows 11、macOS。 (互換性が最大になる推奨環境)
Python: バージョン 3.11以上。 (バックエンドサービスに必要)
Node.js: バージョン 22.10以上。 (フロントエンド開発に必要)
推奨IDE: VSCode のようなIDEを使用することをお勧めします。コード編集、デバッグ、統合端末アクセスが可能です。他の好きなIDEを使用しても構いません！
[任意] GitHub Desktop: コマンドラインGitに慣れていない場合でも、Gitリポジトリの管理を簡単にするため、GitHub Desktopをインストールすることを検討してください。

ローカル環境のセットアップ

Open WebUIのフロントエンド（ユーザーインターフェース）とバックエンド（APIとサーバーロジック）の両方をセットアップします。

1. リポジトリをクローンする

最初に、Open WebUIリポジトリをローカルマシンにダウンロードするためにgit cloneを使用します。これにより、プロジェクトのローカルコピーが作成されます。

端末を開く （Windowsの場合はGit Bashを使用している場合はGit Bashを開く）。
Open WebUIプロジェクトを収納するディレクトリに移動する。
リポジトリをクローンする: 次のコマンドを実行します:

git clone https://github.com/open-webui/open-webui.git
cd open-webui

git cloneコマンドはGitHubからプロジェクトファイルをダウンロードします。その後、cd open-webuiコマンドで新しく作成されたプロジェクトディレクトリに移動します。

2. フロントエンドのセットアップ（ユーザーインターフェース）

まず、ブラウザで表示されるユーザーインターフェースを起動させましょう：

環境変数の設定:
- サンプル環境ファイルを.envにコピーします:
```
cp -RPp .env.example .env
```
  このコマンドは.env.exampleファイルを.envという名前の新しいファイルにコピーします。.envファイルは、フロントエンド用の環境変数を設定する場所です。
- .envをカスタマイズ: コードエディタ（例えばVSCode）で.envファイルを開きます。このファイルにはフロントエンドの設定変数が含まれており、APIエンドポイントやその他の設定が記載されています。ローカル開発では、通常.env.exampleのデフォルト設定で十分ですが、必要に応じてカスタマイズできます。

重要: リポジトリに貢献する場合、.envファイルに機密情報をコミットしないでください。

フロントエンドの依存関係をインストールする:
- フロントエンドディレクトリに移動する: プロジェクトのルートディレクトリ（open-webuiディレクトリ）にいない場合は、そこに移動してください。
```
# プロジェクトルートにいない場合:
cd open-webui
```
- 必要なJavaScriptパッケージをインストールします:
```
npm install
```
  このコマンドはnpm（Node Package Manager）を使用してプロジェクトルートディレクトリのpackage.jsonファイルを読み取り、フロントエンドが動作するために必要なすべてのJavaScriptライブラリとツールをダウンロードします。インターネットの接続速度によって数分かかる場合があります。
フロントエンドの開発サーバーを起動する:
```
npm run dev
```
このコマンドはフロントエンド開発サーバーを起動します。手順を正しく実行した場合、通常はサーバーが起動していて、ローカルURLを示します。

🎉 フロントエンドにアクセスする: ウェブブラウザを開いて http://localhost:5173 に移動します。Open WebUIのフロントエンドが実行中で、バックエンドが利用可能になるのを待機していると表示されるはずです。そのメッセージについては心配しないでください！次はバックエンドをセットアップしましょう。 この端末は実行中のままにしてください – フロントエンドを提供しています！

3. バックエンドのセットアップ（APIとサーバー）

円滑な開発体験のためには、フロントエンドプロセスとバックエンドプロセスを別々の端末インスタンスで実行することを強くお勧めします。これにより作業が整理され、それぞれの部分を独立して管理しやすくなります。

なぜ別々の端末が推奨されるのか？

プロセスの分離: フロントエンドとバックエンドの開発サーバーは異なるプログラムです。別々の端末で実行することで、互いに干渉せずに、それぞれを独立して再起動または停止することができます。
より明確なログと出力: 各ターミナルはフロントエンドまたはバックエンドに特化したログと出力を表示します。これにより、ログが交錯することなくデバッグや監視がより簡単になります。
ターミナルの混雑軽減: フロントエンドとバックエンドのコマンドを1つのターミナルで混在させると混乱する可能性があります。分かれたターミナルはコマンド履歴やアクティブプロセスを整理します。
ワークフロー効率の向上: フロントエンドのタスク（例: npm run dev を実行）を1つのターミナルで処理しながら、バックエンドのタスク（例: サーバーの起動やログの確認）を同時に他のターミナルで管理できます。1つのターミナル内でコンテキストを頻繁に切り替える必要がありません。

VSCodeの統合ターミナルを使用する（推奨）:

VSCodeの統合ターミナル機能を利用すると、複数のターミナルを簡単に管理できます。以下はフロントエンドとバックエンドを分離するための設定手順です:

フロントエンドターミナル（すでに開いている可能性が高い）: フロントエンド設定手順に従った場合、すでにプロジェクトのルート（open-webuiディレクトリ）でターミナルが開いているはずです。ここでフロントエンドのコマンド（例: npm run dev）を実行します。まだopen-webuiディレクトリにいない場合は、移動してください。
バックエンドターミナル（新しいターミナルを開く）:
- VSCodeでターミナル > 新しいターミナルに移動します（Windows/LinuxではショートカットCtrl+Shift+、macOSではCmd+Shift+を使用）。これにより、新しい統合ターミナルパネルが開きます。
- backendディレクトリに移動: この新しいターミナルで、cd backendコマンドを使用してプロジェクト内のbackendフォルダーに移動します。これにより、すべてのバックエンド関連のコマンドが適切なコンテキストで実行されます。
これで、VSCode内にフロントエンド（おそらくopen-webuiディレクトリ内）用のターミナルと、バックエンド専用（backendディレクトリ内）のターミナルが、それぞれ独立して設定されます。このセットアップは、よりクリーンで効率的な開発ワークフローのために非常に推奨されます。

バックエンドセットアップ手順（backendターミナル内で行う）:

バックエンドディレクトリに移動: (先ほどの手順で新しいターミナルでbackendディレクトリにいるはずです)。もしまだ移動していない場合は、以下を実行します:
```
cd backend
```
Conda環境を作成してアクティブ化する（推奨）:
- Condaを使用してPython依存関係を管理し、プロジェクト環境を分離することを強くお勧めします。これにより、システム上の他のPythonプロジェクトとの競合を防ぎ、正しいPythonバージョンとライブラリを確保できます。
```
conda create --name open-webui python=3.11
conda activate open-webui
```
  - conda create --name open-webui python=3.11: このコマンドはPythonバージョン3.11を使用してopen-webuiという名前の新しいConda環境を作成します。異なるPython 3.11.xバージョンを選択しても問題ありません。
  - conda activate open-webui: このコマンドは新しく作成されたConda環境をアクティブ化します。アクティブ化されるとターミナルのプロンプトが通常変更され、open-webui環境にいることを示します（例: 行の先頭に(open-webui)と表示される場合があります）。
バックエンドターミナル内で環境をアクティブ化してから作業を進めるようにしてください。

(Condaの使用は任意ですが、Python依存関係を管理し競合を避けるうえで強く推奨されます。) Condaを使用しない場合は、Python 3.11以上を使用して次のステップに進んでください。ただし、依存関係の競合に注意してください。
バックエンド依存関係をインストールする:
- バックエンドターミナル内で（Conda環境を使用している場合はアクティブ化した状態で）以下を実行します:
```
pip install -r requirements.txt -U
```
このコマンドはPythonパッケージインストーラー（pip）を使用して、backendディレクトリ内のrequirements.txtを読み込みます。requirements.txtにはバックエンドが動作するために必要なPythonライブラリが一覧化されています。pip installはこれらのライブラリをアクティブなPython環境（Conda環境を使用している場合はその環境）にダウンロードしてインストールします。-Uフラグは最新の互換バージョンを取得することを保証します。
バックエンド開発サーバーを開始する:
- バックエンドターミナル内で以下を実行します:
```
sh dev.sh
```
このコマンドはdev.shスクリプトを実行します。このスクリプトにはバックエンド開発サーバーを開始するコマンドが含まれている可能性があります。（興味があればコードエディタでdev.shファイルを開いて正確なコマンドを確認できます。）通常、バックエンドサーバーは起動し、ターミナルにいくつかの出力を表示します。

📄 APIドキュメントを調べよう: バックエンドが実行状態になったら、http://localhost:8080/docs にアクセスして、自動生成されたAPIドキュメントをウェブブラウザで閲覧できます。このドキュメントは、バックエンドのAPIエンドポイント、バックエンドとのやり取りの方法、期待されるデータと返されるデータを理解するのに非常に役立ちます。開発中はこのドキュメントを手元に置いておきましょう！

🎉 おめでとうございます！ すべての手順に従った場合、フロントエンドとバックエンドの両方の開発サーバーがローカルで動作しているはずです。フロントエンドにアクセスしたブラウザタブ（通常 http://localhost:5173）に戻ってください。ページをリフレッシュしてください。 これで、ローカルバックエンドに接続された完全なOpen WebUIアプリケーションがブラウザ上に表示されるはずです！

よくある問題のトラブルシューティング

セットアップまたは開発中に遭遇する可能性のある一般的な問題を解決する方法はこちらです：

💥 "FATAL ERROR: Reached Heap Limit"（フロントエンド）

このエラーは、フロントエンド開発中によく見られ、大規模なフロントエンドアプリケーションを扱う場合に、Node.jsがビルドプロセス中にメモリ不足に陥ることを示します。

解決方法: Node.jsのヒープサイズを増やしてください。これにより、Node.jsが利用できるメモリ量が増えます。以下のいくつかの方法があります：

NODE_OPTIONS環境変数を使用する（開発用に推奨）:
- これは現在のターミナルセッションでメモリ制限を一時的に増やす方法です。フロントエンドターミナルでnpm run devまたはnpm run buildを実行する前に、NODE_OPTIONS環境変数を設定してください：
```
export NODE_OPTIONS="--max-old-space-size=4096" # Linux/macOS（bash, zshの場合）
# set NODE_OPTIONS=--max-old-space-size=4096 # Windows（コマンドプロンプトの場合）
# $env:NODE_OPTIONS="--max-old-space-size=4096" # Windows（PowerShellの場合）
npm run dev
```
  ご使用のオペレーティングシステムとターミナルに適したコマンドを選択してください。4096は4GBのメモリを表します。必要に応じて、この値をさらに増やすことも検討してください（例：8GBの場合は8192）。この設定は現在のターミナルセッションで実行されるコマンドにのみ適用されます。
Dockerfileの変更（Docker環境の場合）:
- Dockerを使用している場合は、Dockerfile内でNODE_OPTIONS環境変数を永続的に設定できます。これは、Docker環境での一貫したメモリ割り当てに役立ちます。以下は元のガイドの例です：
```
ENV NODE_OPTIONS=--max-old-space-size=4096
```
- 十分なRAMを割り当てる: どの方法でも、Node.jsが使用できるRAMがシステムまたはDockerコンテナ内に十分にあることを確認してください。少なくともRAM 4GBを推奨し、プロジェクトが大きい場合やビルドが複雑な場合はそれ以上が必要になるかもしれません。不要なアプリケーションを閉じてRAMを解放してください。

⚠️ ポート競合（フロントエンド & バックエンド）

「アドレスが既に使用されています」「ポートが既にバインドされています」など、ポートに関連するエラーが表示される場合は、別のアプリケーションがすでに5173（フロントエンドのデフォルト）または8080（バックエンドのデフォルト）のポートを使用しています。同時に特定のポートを使用できるのは1つのアプリケーションだけです。

解決方法:

競合するプロセスの特定: 使用したいポートを占有しているアプリケーションを特定する必要があります。
- Linux/macOS: 新しいターミナルを開き、lsofやnetstatコマンドを使用します：
  - lsof -i :5173（またはバックエンドポートの場合は:8080）
  - netstat -tulnp | grep 5173（または8080）これらのコマンドは、ポートを使用しているプロセスID（PID）とそのプロセス名を表示します。
- Windows: 管理者権限でコマンドプロンプトまたはPowerShellを開き、netstatまたはGet-NetTCPConnectionを使用します：
  - netstat -ano | findstr :5173（または8080）（コマンドプロンプト）
  - Get-Process -Id (Get-NetTCPConnection -LocalPort 5173).OwningProcess（PowerShell）これらのコマンドも、ポートを使用しているプロセスIDを表示します。
競合プロセスの終了: プロセスID（PID）を特定したら、そのポートを使用しているアプリケーションを停止できます。プロセスを終了する際には、特にそれが何であるかわからない場合は注意してください。
- Linux/macOS: killコマンドを使用します：kill <PID>（<PID>を実際のプロセスIDに置き換えます）。killで終了しない場合、kill -9 <PID>（強制終了）を使うこともできますが、慎重に使用してください。
- Windows: 管理者権限でコマンドプロンプトまたはPowerShellを開き、taskkillコマンドを使用します：taskkill /PID <PID> /F（<PID>をプロセスIDに置き換えます）。/Fフラグは強制終了を意味します。
ポートの変更（上級者向け）:
- 競合するプロセスを終了できない場合（例：システムサービスで必要な場合など）、Open WebUIのフロントエンドおよび/またはバックエンドが使用するポートを変更することができます。通常、構成ファイルを編集する必要があります。
  - フロントエンドポート: フロントエンドのドキュメントを確認するか、vite.config.jsなどの構成ファイルで開発サーバーのポートを変更する方法を探してください。フロントエンドがポートのために環境変数を使用している場合、.envファイルも調整する必要があるかもしれません。
  - バックエンドポート: バックエンドポートの設定方法は、dev.shスクリプトまたはバックエンド構成ファイルを確認してください。起動コマンドや構成ファイルを変更してバックエンドポートを設定する必要がある場合があります。バックエンドポートを変更した場合、フロントエンドの.envファイルを新しいバックエンドURLに更新する必要がある可能性があります。

🔄 ホットリロードが機能しない

ホットリロード（またはホットモジュールリプレースメント - HMR）は、コードを変更するとブラウザーが自動的に更新される素晴らしい開発機能です。これが機能しない場合、開発のワークフローが大幅に遅くなる可能性があります。

トラブルシューティング手順:

開発サーバーが動作しているか確認: npm run dev（フロントエンド）とsh dev.sh（バックエンド）がそれぞれのターミナルでエラーなく動作しているかを確認してください。ターミナル出力にて「watch mode」または「development mode」で実行中であることを示すメッセージを探してください。エラーがある場合は、最初にそれを修正してください。
Watch Mode/HMRのメッセージを確認: 開発サーバーが起動するときには、ホットリロードまたはウォッチモードが有効であることを示すメッセージがターミナルに通常は表示されます。「HMR有効」や「ファイル変更を監視中」などのフレーズを探してください。これらのメッセージが表示されない場合、構成に問題がある可能性があります。
ブラウザーキャッシュ: 時々、ブラウザーのキャッシュが最新の変更を表示しない原因になることがあります。ブラウザーを強制的に更新してみてください:
- Windows/Linux: Ctrl+Shift+R
- macOS: Cmd+Shift+R
- または、ブラウザーキャッシュをクリアするか、フロントエンドをプライベート/シークレットウィンドウで開いてみてください。
依存関係の問題 (フロントエンド): 古いまたは破損したフロントエンド依存関係がホットリロードを妨げることがあります。フロントエンドの依存関係を更新してみてください:
- フロントエンドのターミナルで次を実行:
```
rm -rf node_modules && npm install
```
  このコマンドは依存関係が保存されているnode_modulesディレクトリを削除し、新たにインストールしなおします。これにより、破損または古いパッケージが原因の問題が解決することがあります。
バックエンドの再起動が必要 (バックエンドの変更に対して): ホットリロードは通常、フロントエンドコードの変更（UI、スタイリング、コンポーネント）に最適に機能します。重大なバックエンドコードの変更（特にサーバーロジック、APIエンドポイント、依存関係の変更）を行った場合、バックエンドサーバーを手動で再起動する必要があります（バックエンドのターミナルでsh dev.shを停止し、再実行してください）。バックエンドの変更に対するホットリロードは、しばしば信頼性が低いか、自動的に設定されていないことが多いです。
IDE/エディターの問題: 稀に、IDEまたはコードエディターの問題が原因で開発サーバーがファイルの変更を適切に検出できない場合があります。IDEを再起動するか、ファイルが正しく保存されていることを確認してください。
構成の問題 (上級者向け): 上記の手順がどれも機能しない場合、フロントエンドまたはバックエンドの開発サーバーセットアップにおけるより複雑な構成問題が存在する可能性があります。プロジェクトのドキュメントや構成ファイル（例: フロントエンドのvite.config.js, バックエンドサーバー構成ファイル）を確認するか、Open WebUIコミュニティやメンテナーに助けを求めてください。

Open WebUIへの貢献

Open WebUIへの貢献を心から歓迎します！このプロジェクトをさらに良くするためのあなたの助けは貴重です。スムーズで効果的な貢献ワークフローのための簡単なガイドはこちらです:

プロジェクト構造を理解する: 特にfrontendフォルダとbackendフォルダを含むプロジェクトのディレクトリ構造に慣れる時間を取ってください。コード、構成ファイル、およびドキュメントを確認して、どのように整理されているかの感触を得てください。
小さな貢献から始める: プロジェクトに不慣れな場合は、小さな貢献から始めることを検討してください:
- ドキュメントの改善: 誤字の修正、説明の明確化、ドキュメントへの詳細の追加。
- バグ修正: 報告されているバグまたは課題に対処。
- 小さなUIの改善: スタイリングの向上、マイナーなレイアウト問題の修正。これらの小さな貢献は、コードベースと貢献プロセスに精通する優れた方法です。
大きな変更は事前に相談: 重要な新機能を実装したり大幅な変更を行ったりする場合、プロジェクトメンテナーやコミュニティと事前にアイデアを相談することを強くお勧めします。以下の方法でこれを行うことができます:
- GitHubリポジトリでissueを作成し、機能や変更を提案する。
- Open WebUIコミュニティチャネルに参加（可能であれば、プロジェクトのREADMEまたはウェブサイトでリンクを確認してください）してアイデアを相談する。これにより、あなたの貢献がプロジェクトの目標に合致し、マージされない可能性のある機能に費やされる無駄な努力を回避できます。
作業のために個別のブランチを作成: devブランチに直接コミットしないでください。 作業している各機能またはバグ修正に対して常に新しいブランチを作成してください。これにより、変更を分離し、プルリクエストの管理および提出が容易になります。
- devブランチを基にした新しいブランチ(例: my-feature-branch)を作成するには:
```
git checkout dev
git pull origin dev # ローカルのdevブランチを最新に保つ
git checkout -b my-feature-branch
```
変更を頻繁にコミットし、明確なコミットメッセージを書く: 機能を開発したりバグを修正したりする際には、小さく論理的なコミットを行いましょう。明確で簡潔なコミットメッセージを記載し、変更内容と理由を説明してください。適切なコミットメッセージは変更履歴の理解を容易にし、共同作業に不可欠です。
- 良いコミットメッセージの例: Fix: ドキュメントのバックエンドセットアップにおけるタイプミスを修正
- 良いコミットメッセージの例: Feat: ユーザープロフィールページを基本情報表示付きで実装
devブランチと定期的に同期する: 作業中のブランチでは、devブランチから最新の変更を定期的に同期することで、後のマージの競合を最小限に抑えます:
```
git checkout dev
git pull origin dev
git checkout my-feature-branch
git merge dev
```
git mergeの手順中に発生する競合を解決してください。
プッシュ前にテストを実行する（利用可能な場合）: このガイドではOpen WebUIの特定のテスト手順について詳細には述べていませんが、コードをプッシュする前に利用可能なテストを実行するのは良い習慣です。プロジェクトのドキュメントやpackage.json（フロントエンドの場合）、バックエンドファイルでテスト関連のコマンド（例: npm run test、pytestなど）を確認してください。テストの実行は、変更が回帰を引き起こさないことや既存の機能を壊さないことを確認するのに役立ちます。
プルリクエスト（PR）を提出する: 作業が完了し、テストを行い（該当する場合）、変更内容を寄稿する準備が整ったら、GitHubでOpen WebUIリポジトリのdevブランチにプルリクエスト（PR）を提出してください。
- GitHubのOpen WebUIリポジトリにアクセスする。
- 自身のブランチに移動する。
- "Contribute"や"Pull Request"ボタンをクリックする（通常は緑色）。
- PRフォームを記入する:
  - タイトル: 変更内容を要約した、明確でわかりやすいタイトルを付ける（例: "Fix: ログインフォーム検証の問題を解決"）。
  - 説明: 変更内容や解決しようとしている問題（該当する場合）及び関連する背景を詳しく記述する。関連する課題がある場合はリンクしてください。
- PRを提出する。
プロジェクトメンテナーがプルリクエストをレビューし、フィードバックを提供し、変更をマージする可能性があります。フィードバックに積極的に対応し、必要に応じて修正を行う準備をしてください。

この包括的なガイドをお読みいただき、Open WebUIへの貢献に興味を持っていただきありがとうございます！皆さんの貢献を楽しみにしており、Open WebUIコミュニティの一員となるお手伝いができることを嬉しく思います！ 🎉 コーディングを楽しんでください！

前提条件​

ローカル環境のセットアップ​

1. リポジトリをクローンする​

2. フロントエンドのセットアップ（ユーザーインターフェース）​

3. バックエンドのセットアップ（APIとサーバー）​

よくある問題のトラブルシューティング​

💥 "FATAL ERROR: Reached Heap Limit"（フロントエンド）​

⚠️ ポート競合（フロントエンド & バックエンド）​

🔄 ホットリロードが機能しない​

Open WebUIへの貢献​