Growi v7.xでページ編集時に空白になる問題に対処(Apache リバースプロキシのWebSocket設定)
事象の内容
- Growiのバージョンをv6.3.5→v7.0.11にアップグレード後、既存のページを編集しようとすると編集エリアが空白になってしまう。
- 新規ページを作成する際に、テンプレートが適用されない。
Wikiとしては致命的な弱点だったため、やむなくv6.3.5に戻したという経緯があります。
ですが、回避策が見つかりましたのでメモとして残します。
事象が発生した環境
- Ubuntu 22.04
- Apache 2.4
- Growi v7.0.11をDockerではなくオンプレ環境で利用。
- Apacheによるリバースプロキシを設定
同一事象をネットで確認。
- [7.0.0]データ移行機能を使用した後、記事の編集内容が失われる #8677
How to reproduce? (再現手順)
2台のHostPCでそれぞれGrowiを立ち上げています。A環境・B環境と呼称します。
「データ移行」機能を用いて、A環境からB環境にデータをインポートする B環境のGrowiに他のPCからアクセスする 記事の編集画面を表示する
What happens? (症状)
記事の編集画面が白紙になっており、そのまま保存しても記事の内容が失われる(添付画面参照)
と、事象が一致。
事象の原因
上記issueのツリーに
私の環境でも編集画面が空白になる現象が観測されました。
私は https-portal を使ってデプロイしているのですが、 growi-docker-compose/examples/https-portal にある WEBSOCKET: 'true' の環境変数を設定し損ねていたのが原因でした。 私の環境では、これを設定すると通常通り編集を行えることを確認しております。逆に、コメントアウトすると空白に戻ります。
とあります。
これを原因と断定し、対処に臨みます。
こちら筆者が実施したのはDockerでの対処方法なので、オンプレ(Apacheによるリバースプロキシ)での対処です。
対応方法のさっくりとした手順
- 現状のgrowiのリバースプロキシの設定を確認。
- 設定ファイルのバックアップ。
- 設定ファイルを修正。
- 修正を反映。
- 事象の解決確認。
参考にしたURL
How to Reverse Proxy Websockets with Apache 2.4
現段階でのリバースプロキシの設定を確認します。
- Apacheのバーチャルファイルを確認
cat /etc/apache2/sites-available/growi.conf
自分の環境に合わせます。
- 内容の一部抜粋
# socket.io の path を rewrite する
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/socket.io [NC]
RewriteCond %{QUERY_STRING} transport=websocket [NC]
RewriteRule /(.*) ws://localhost:3000/ [P,L]
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/
設定そのものはgithubのgrowi公式ドキュメントに沿ったものでしたが、これが引っかかっていたようです。
設定ファイルのバックアップを取ります。
- バックアップ
sudo cp -pi /etc/apache2/sites-available/growi.conf /path/to/backup/directory/growi.conf.$(date +%Y%m%d)
ファイル名は自分の環境に合わせます。適宜、任意のバックアップディレクトリを指定します。
- バックアップ確認
diff -u /path/to/backup/directory/growi.conf.$(date +%Y%m%d) /etc/apache2/sites-available/growi.conf
差分が無いこと(エラーがないこと)でバックアップを確認します。
ファイルを修正します。
上記、バックアップを取ったの設定ファイルを教義・信仰に沿ったエディタで編集します。(要管理者権限)
- 削除する内容
# socket.io の path を rewrite する
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/socket.io [NC]
RewriteCond %{QUERY_STRING} transport=websocket [NC]
RewriteRule /(.*) ws://localhost:3000/ [P,L]
- 削除した箇所に追記する内容
# WebSocketのための設定
RewriteEngine On
RewriteCond %{HTTP:Upgrade} =websocket [NC]
RewriteCond %{HTTP:Connection} upgrade [NC]
RewriteRule /(.*) ws://localhost:3000/$1 [P,L]
編集後、差分を取ります。
- 差分確認
diff -u /path/to/backup/directory/growi.conf.$(date +%Y%m%d) /etc/apache2/sites-available/growi.conf
- 差分結果
- # socket.io の path を rewrite する
- RewriteEngine On
- RewriteCond %{REQUEST_URI} ^/socket.io [NC]
- RewriteCond %{QUERY_STRING} transport=websocket [NC]
- RewriteRule /(.*) ws://localhost:3000/ [P,L]
+ # WebSocketのための設定
+ RewriteEngine On
+ RewriteCond %{HTTP:Upgrade} =websocket [NC]
+ RewriteCond %{HTTP:Connection} upgrade [NC]
+ RewriteRule /(.*) ws://localhost:3000/$1 [P,L]
設定を反映します。
- 構文確認
sudo apache2ctl configtest
Syntax OK
を確認します。
- Apache再起動前確認
systemctl status apache2.service
active (running)
を確認します。
- Apache再起動
sudo systemctl restart apache2.service
- Apache再起動後確認
systemctl status apache2.service
active (running)
を確認します。
事象の解決を確認します。
上記、設定を行ったGrowiサイトにアクセスします。
編集後、左ペイン(エディタ部分)がそのまま残っていれば対処完了です。