開発環境のセットアップ（ローカル）

ローカルサーバーまたはデスクトップで開発環境をセットアップします。

​

前提条件

Overleaf はマイクロサービスアーキテクチャを採用した典型的なオープンソースプロジェクトで、すべてのサービスが Docker 上で動作します。

• 公式の Community Edition のソースコードは GitHub Overleaf Official にあります。
• Overleaf-CEP のソースコードは GitHub Yu-i-i/Overleaf で公開されています。
• Overleaf Pro Edition は GitHub Ayaka-notes/overleaf-pro で入手できます。

Overleaf の開発環境を構築するには、高性能なサーバーが必要です。20 個以上のコンテナを同時に実行する必要があるため、少なくとも 8 コア・16GB RAM の構成を推奨します。

8 コア以上の CPU を備えたサーバーは一般に高価なため、開発にはローカルのコンピューターを使用することを強くおすすめします。

また、開発者であるあなたは Docker のインストール についてすでに理解しているものと想定します。予期しないエラーに遭遇する可能性を減らすため、開発には最新かつ安定した Ubuntu LTS（例：2025〜2026 年時点では Ubuntu 24.04）と最新の Docker を使用することを強く推奨します。

まとめると、次のものが必要です。

• 開発用の高性能なサーバー／デスクトップ
• 最新かつ安定した Ubuntu LTS（例：Ubuntu 24.04）
• Docker と Git の環境

​

設定チュートリアル

ここでは overleaf-cep を例に、Overleaf の開発環境を設定する方法を説明します。

1. ソースコードを取得する

   まず、リポジトリをクローンします。

   bash

   git clone https://github.com/ayaka-notes/overleaf-pro.git
   cd overleaf-pro
   
2. package-lock.json を同期する

   Overleaf は 内部リポジトリ で開発されているため、開発上の事情により package-lock.json ファイルが同期されていない可能性が非常に高いです。次のコマンドを実行して同期する必要があります（ローカルに nodejs 環境がある場合）。

   bash

   npm install --package-lock-only --ignore-scripts
   

   nodejs がインストールされていなくても心配はいりません。docker を使って同じコマンドを直接実行できます。Overleaf リポジトリのルートから実行してください。

   bash

   docker run --rm \
     -v "$(pwd)":/workspace \
     -w /workspace \
     node:22.18.0 \
     npm install --package-lock-only --ignore-scripts
   
3. 開発用イメージをビルドする

   Overleaf には開発用スクリプトを格納する専用ディレクトリ /develop が用意されています。サービスをビルドするだけです。

   bash

   cd ./develop
   bin/build
   

   サービスを並列でビルドしている間に Docker のメモリが不足する場合は、このディレクトリに COMPOSE_PARALLEL_LIMIT=1 を含む .env ファイルを作成してください。

4. すべてのマイクロサービスを起動する

   次にサービスを起動します。

   bash

   bin/up
   

   サービスが起動したら、http://localhost/launchpad を開いて最初の管理者アカウントを作成します。

   bin/dev コマンドを実行する前に、必ず bin/up を実行してください。そうしないと、一連の権限の問題が発生する可能性があります。

デフォルトでは管理者権限は利用できません。develop/dev.env に次の内容を追加する必要があります。追加すると、管理パネルにアクセスできるようになります。

ADMIN_PRIVILEGE_AVAILABLE=true

​

TeX Live

PDF をコンパイルするには、Docker 内でコンパイルを処理するための TeX Live イメージをビルドする必要があります。

docker build texlive -t texlive-full

macOS ホストでコンパイルする場合は、このディレクトリに DOCKER_SOCKET_PATH=/var/run/docker.sock.raw を含む .env ファイルを作成して、Docker ソケットのパスを上書きする必要があるかもしれません。

また、ayaka-notes/texlive-full を使用することもできます。その場合は、TeX Live の最小構成版である base タグを使用できます。

​

開発

コードを変更するたびに bin/build && bin/up を実行しなくて済むよう、Overleaf Community Edition を 開発モード で実行できます。このモードでは、コードの変更に応じてサービスが自動的に更新されます。

これを行うには、付属の bin/dev スクリプトを使用します。

bin/dev

これにより、すべてのサービスが node --watch で起動され、コードが自動的に監視されて必要に応じてサービスが再起動されます。

パフォーマンスを向上させるため、bin/dev スクリプトにスペース区切りのリストを渡して、一部のサービスのみを開発モードで起動することもできます。

bin/dev [service1] [service2] ... [serviceN]

web サービスを 開発モード で起動した場合、バックエンドのコードが変更されたときにのみ web サービスが更新されます。フロントエンドのコードも自動的に更新されるようにするには、webpack サービスも 開発モード で起動してください。

サービス名を指定しない場合、すべてのサービスが開発モードで起動します。

​

デバッグ

開発モード で実行すると、ほとんどのサービスがデバッグ用ポートを公開します。Chrome の DevTools のインスペクターや IDE に統合されたデバッガーをこのポートにアタッチできます。次の表は、各サービスが ホストマシン 上で公開するポートを示しています。

サービス	ポート
web	9229
clsi	9230
chat	9231
contacts	9232
docstore	9233
document-updater	9234
filestore	9235
notifications	9236
real-time	9237
references	9238
history-v1	9239
project-history	9240
linked-url-proxy	9241

Chrome の リモートデバッグ を使ってサービスにアタッチするには、chrome://inspect/ にアクセスし、Discover network targets にチェックが入っていることを確認します。次に Configure… をクリックし、デバッガーをアタッチしたい各サービスについて localhost:[service port] のエントリを追加します。

エントリを追加すると、そのサービスが Remote Target として表示され、検査やデバッグができるようになります。

​

ログ

開発環境では、Overleaf が bin/logs スクリプトを提供していますが、いくつかの依存関係をインストールする必要があります。

sudo npm install -g bunyan
# Or sudo apt install node-bunyan 

または、次のコマンドで直接実行することもできます。

docker compose logs -f [service name]

​

その他のツール

すべて完了したら、次のセクション を参照して、Overleaf の開発にデバッグツールを追加してください。