【自作でGoogle Drive?】NextcloudのCodeサーバ（ビルトインCode）で苦戦した話

上記の通り、AWS EC2をリバースプロキシとし、VPN経由でWebサーバ（自宅Webアプリ）に接続しています。

ここでは、自宅の生活を便利にするための機能を実装し、リリースしています。（閉域で利用しているのでアクセス不可です）

そのWebサーバの後ろにNextcloud用のサーバとし、同サーバ上にCODEサーバを構築し、すべてのトラフィックをWebサーバ経由で捌きたいというのが今回のやりたいことです。

今回の対応事項

　今回の対応したことの説明の前に、前提条件としてサーバにNextcloudが構築されていることとします。

Step1：CODEサーバ（ビルトイン）をインストール

　最初に対応するべきことは、CODEサーバのインストールです。

インストール方法は複数ありますが、今回はNextcloudのビルトイン（アプリ）を利用することにします。

インストール方法は至って簡単です。

メニューバー（右上のユーザメニュー）の「アプリ」をクリックします。

クリック後は、左側のメニューバーにある「Office&テキスト」をクリックし、画面が遷移したら「Collabora Online -Built -in CODE server」と「Nextcloud Office」の２つを「ダウンロードし有効にする」をクリックしインストールします。（下記の画面はインストール済のものになります）

これでインストール完了となります。

CODEサーバの設定は、「管理者設定」→「オフィス」をクリックし、表示される画面で設定を行うのですが、２パターンに分かれます。

パターン①：「https://ドメイン名」でアクセス可能な場合

２つ目のビルトイン CODEを使うにチェックを入れるだけでOK！！

パターン②：「https://ドメイン名/xxxx/yyyy」のような形でアクセスする場合

１つ目の自分のサーバを使用するにチェックを入れると、CollaboraサーバのURL入力欄が出力されます。

ここに「https://ドメイン名/xxxx/yyyy」を入力し保存してください。

これでCODEサーバのインストール、おおよその設定は完了です。

ただ、これでは接続できないのでStep2の対応が必要です。

パターン①の人はStep2-1のみ、パターン②の人はStep2-1/Step2-2の対応が必要になります。

対応しない場合は、「読み込めません」というエラーが発生します。

Step2-1：WebサーバのConfig編集

　構成の説明時に触れていますが、AWS EC2→Webサーバ→Nextcloud/CODEサーバの順序で接続する構成となります。

また、WebサーバからNextcloud/CODEサーバに遷移する際には、「https://ドメイン名/XXXX」の形式でプロキシする形で対応しています。

そこで初めに、WebサーバのApache2のProxyの設定を行います。

Apache2のProxyモジュールを有効化するために、以下コマンドを入力します。

sudo a2enmod proxy                       #proxyモジュールの有効化

sudo systemctl restatrt apache2.service  #Apache2の再起動

モジュールの有効化後は、proxy.confの設定を編集していきます。

xxxx@yyyy:~$ sudo vim /etc/apache2/mods-available/proxy.conf
<IfModule mod_proxy.c>

	# If you want to use apache2 as a forward proxy, uncomment the
	# 'ProxyRequests On' line and the <Proxy *> block below.
	# WARNING: Be careful to restrict access inside the <Proxy *> block.
	# Open proxy servers are dangerous both to your network and to the
	# Internet at large.
	#
	# If you only want to use apache2 as a reverse proxy/gateway in
	# front of some web application server, you DON'T need
	# 'ProxyRequests On'.

	ProxyRequests Off
	<Proxy *>
	   AddDefaultCharset off
	   Require all granted  #grantedにしないとアクセス不可
	#   #Require local
	</Proxy>
 	# Enable/disable the handling of HTTP/1.1 "Via:" headers.
	# ("Full" adds the server version; "Block" removes all outgoing Via: headers)
	# Set to one of: Off | On | Full | Block
        ProxyVia Full
        #今回の設定追加した部分
        ProxyPreserveHost On
        ProxyPass /xxxx/yyyy http://<IPアドレス>
        ProxyPassReverse /xxxx/yyyy http://<IPアドレス>

</IfModule>

この設定を行い、再度、Apache2の再起動を実行します。　これでWebサーバのProxy設定は完了です。

Step2-2：NextcloudのProxy.phpの編集

次に、Nextcloud/CODEサーバのProxy.php（Richdocumentcode）の設定を行います。（この過程は、「https://ドメイン名/xxxx/yyyyでのプロキシ設定をしていない場合は不要です。）

RichdocumentCodeがインストールされていない場合は、別途インストールが必要です。（インストール方法はこちら）

編集内容は以下の通りとなります。

xxxx@yyyy:~$ sudo vim /var/snap/nextcloud/current/nextcloud/extra-apps/richdocumentscode/proxy.php

$proxyURL .= $_SERVER['HTTP_HOST'] . '/xxxx/yyyy'. $_SERVER['SCRIPT_NAME'] . '?req=';
#$proxyURL .= $_SERVER['HTTP_HOST'] . $_SERVER['SCRIPT_NAME'] . '?req=';
debug_log("ProxyPrefix: '$proxyURL'");

?>

設定ファイルの保存場所は、Nextcloudのインストール方法により異なるので、「find / -name “richdocumentcode”」などで検索して見て下さい。

その上で、赤字部分を追記することで「https://ドメイン名/xxxx/yyyy」の接続形式でもCODEサーバにアクセスすることが可能になります。

Step3：日本語フォントの追加

　Step2までの対応を完了すると、Web上での表示や同時編集が可能となります。

しかし、日本語が文字化けしてしまい、入力できない状態が発生しました。

この原因は「日本語フォントが入っていないため」になります。

そこで、Googleから日本語フォントをインストール（ダウンロード先：こちら）し、適用してあげることで日本語表示が可能となります。

フォントをローカルにダウンロードし、「管理者設定」→「オフィス」をクリックし、先程のCODEサーバの下の方にスクロールしていくと、追加のフォントと書かれています。

ここにアップロードし、注意書きに書かれていることを対応するだけでOKです。

Step4：Nextcloudの再起動

　最後に、Nextcloudを「sudo snap restart nextcloud」コマンドにより再起動し、同時編集・日本語対応ができていることを確認し完了です。

最後に

　今回は、自前サーバにNextcloudを導入し、苦戦した対応についてまとめました。

自前サーバの部品は以下記事に記載しているのでご確認いただければ幸いです。