> ## Documentation Index
> Fetch the complete documentation index at: https://ayakaleaf-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

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

## 前提条件

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

* 公式の Community Edition のソースコードは [GitHub Overleaf Official](https://github.com/overleaf/overleaf/tree) にあります。
* Overleaf-CEP のソースコードは [GitHub Yu-i-i/Overleaf](https://github.com/yu-i-i/overleaf-cep) で公開されています。
* Overleaf Pro Edition は [GitHub Ayaka-notes/overleaf-pro](https://github.com/ayaka-notes/overleaf-pro) で入手できます。

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

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

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

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

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

## 設定チュートリアル

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

<Steps>
  <Step title="ソースコードを取得する">
    まず、リポジトリをクローンします。

    ```bash title="bash" theme={null}
    git clone https://github.com/ayaka-notes/overleaf-pro.git
    cd overleaf-pro
    ```
  </Step>

  <Step title="`package-lock.json` を同期する">
    Overleaf は [内部リポジトリ](http://github.com/overleaf/internal) で開発されているため、開発上の事情により `package-lock.json` ファイルが同期されていない可能性が非常に高いです。次のコマンドを実行して同期する必要があります（ローカルに nodejs 環境がある場合）。

    ```bash title="bash" theme={null}
    npm install --package-lock-only --ignore-scripts
    ```

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

    ```bash title="bash" theme={null}
    docker run --rm \
      -v "$(pwd)":/workspace \
      -w /workspace \
      node:22.18.0 \
      npm install --package-lock-only --ignore-scripts
    ```
  </Step>

  <Step title="開発用イメージをビルドする">
    Overleaf には開発用スクリプトを格納する専用ディレクトリ `/develop` が用意されています。サービスをビルドするだけです。

    ```bash title="bash" theme={null}
    cd ./develop
    bin/build
    ```

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

  <Step title="すべてのマイクロサービスを起動する">
    次にサービスを起動します。

    ```bash title="bash" theme={null}
    bin/up
    ```

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

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

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

  ```text theme={null}
  ADMIN_PRIVILEGE_AVAILABLE=true
  ```
</Info>

### TeX Live

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

```text theme={null}
docker build texlive -t texlive-full
```

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

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

### 開発

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

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

```text theme={null}
bin/dev
```

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

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

```text theme={null}
bin/dev [service1] [service2] ... [serviceN]
```

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

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

### デバッグ

*開発モード* で実行すると、ほとんどのサービスがデバッグ用ポートを公開します。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` スクリプトを提供していますが、いくつかの依存関係をインストールする必要があります。

```bash theme={null}
sudo npm install -g bunyan
# Or sudo apt install node-bunyan 
```

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

```text theme={null}
docker compose logs -f [service name]
```

### その他のツール

すべて完了したら、[次のセクション](/ja/dev/environment/setup-develop-tools) を参照して、Overleaf の開発にデバッグツールを追加してください。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.