概要
ONLYOFFICE Create Appは、ONLYOFFICEのDocs（Document Server）と連携するサンプルWebアプリケーションを生成するCLIツールです。生成されるアプリの構成は以下のとおりです。
- フレームワーク：Next.js + React
- ファイルマネージャー：ファイルのアップロード、文書／スプレッドシート／プレゼンテーション／PDFフォームの新規作成
- エディタページ：Docs APIでエディタを埋め込み
- サーバー側コード：Docsからのファイルダウンロード要求と保存（コールバック）の処理
注意：Create AppはDocument Serverのインストールや、Dockerの起動は行いません。Docsは別途用意して接続します。
前提条件
- Node.js 20.12以降
- ONLYOFFICEのDocs 8.2以降
- npm
本記事では、Windows PowerShellを使用し、Docker Desktop上でDocsがポート80で稼働している環境を前提とします。Docsが未導入の場合は、Dockerでのインストールガイドを参照してください。リモートの既存Docsサーバーに接続する場合、ローカルにDockerは不要です。
1. プロジェクトの生成
npx @onlyoffice/create-app my-docs-app
ジェネレーターのインストールを確認された場合はyで進めます。my-docs-appフォルダが作成され、依存関係がインストールされます。
cd my-docs-app
以降のコマンドは、package.jsonがあるプロジェクトフォルダ内で実行します。無関係な空フォルダでnpm installを実行しても、連携プロジェクトは作成されません。
2. .envの設定
ローカルのDocker Desktop環境では、.envの以下の項目を編集し、その他の生成済み設定はそのまま残します。
DOCUMENT_SERVER_URL=http://localhost:80
DOCUMENT_SERVER_JWT_SECRET=your_actual_docs_secret
APP_URL=http://your_local_ip_adress:3000
| 変数 | 役割 |
|---|---|
DOCUMENT_SERVER_URL |
ブラウザがエディタ（Docs API）を読み込むURL |
DOCUMENT_SERVER_JWT_SECRET |
アプリとDocs間のリクエスト検証に使う共有シークレット |
APP_URL |
Docsがファイルの取得・保存結果の送信に使うアプリのURL |
JWTシークレット
your_actual_docs_secretは、Docsインスタンスに設定されている実際のシークレットに置き換えます。Dockerでインストールしている場合は、コンテナの環境変数JWT_SECRETで設定した値と同じものをDOCUMENT_SERVER_JWT_SECRETに指定します。
APP_URL
APP_URLのlocalhostはDocsコンテナ自身を指してしまうため、使用できません。your_local_ip_adressを、Docsコンテナから到達可能なホストのローカルIPアドレスに置き換えます。
プライベートIPへのアクセス許可
Docker環境では、Docsがホストのプライベートアドレスにファイルを要求できるよう許可する必要があります。検証環境では、Docsコンテナに以下を設定しました。
ALLOW_PRIVATE_IP_ADDRESS=true
詳細は公式Dockerイメージのドキュメントを参照してください。
3. 起動
npm start
このテンプレートのstartスクリプトは、空の文書テンプレートのダウンロード、ビルド、Webサーバーの起動までを一括で実行します。初回に別途npm run buildを実行する必要はありません。
起動後、ブラウザでhttp://your_local_ip_adress:3000を開きます。READMEサンプルが入ったファイルマネージャーが表示され、新規文書の作成やエディタでの編集を試せます。動作中はターミナルを閉じないでください。
FAQ
Create AppはDocsをインストールしますか？
いいえ。生成されるのはWebアプリと接続用コードのみです。Docsは別途インストールするか、既存インスタンスに接続します。
Dockerは必須ですか？
DocsをDockerで動かす場合のみ必要です。Ubuntu、CentOS、Windows Server、Amazon Machine Imagesなどへのデプロイや、既存のDocsサーバーの利用も可能です。
生成コードはカスタマイズできますか？
はい。生成されたコードは自由に変更できます。詳細はONLYOFFICEのDocs APIドキュメントを参照してください。