この記事：v2
- 投稿してから気分を一新するため、歩いているとふと疑問に思いました。
- フォロントエンドから
https://www.your-site.net/filesにアクセスするのなら別にクロスオリジンになっていないではないか、なので、apaheのhttpd.confの<Directory>...</Directory>の設定は不要ではないか？ - tus.ioではポートを1080にして
http://www.your-site:1080/filse/にアクセスしていたのでhttpsでアクセスするにはCORSの対応が必要だけど、ReverseProxyでポートまで変換してるならCORS対応不要と思ったわけです。 - それで試してみました。CORS対応不要でした。下記はオリジナルにv2として見せ消ししています。
目的
- でかくて一杯ある音データをユーザ毎にサーバにアップロードしたいので、MITライセンスの
tusdを使いたい。 - 実運用にはhttpsが必須です。クッキーでセッション管理して大容量・複数ファイルの処理をユーザ毎に行いたいからです。
- 前回ではhttpで動くことを確認しました。
- この記事はhttpsでのトライアルです。クッキーには対応していません。
環境
- CentOS7
- apache 2.4.41
- browser Firefox77 (MacOS)など
- tusd 1.0
- tus-js-client v2
参考
注意（この方法はtus.ioで記載されている方法とは違います。参考程度にお願いします）
- apacheのconfはここに書いてあります。tusd/examples/apache2.conf
- tus-js-clientのサンプルはここにありますtus-js-client/docs/usage.md
インプリの概要
- uppy/tus-js-clientはCORS(Cross Origin Resource Sharing)が解決しないとブラウザは動いてくれません。そのための
Headerにいつもの"このサイトは大丈夫だからね！Header always set Access-Control-Allow-Origin "https://www.my-site.net""を記述をします。 - tusdはhttpベースでhttp:0.0.0.0:1080を監視しているので、クライアントとサーバのやり取りをhttpsで行う場合、サーバでhttpsからhttpにスキーム変換させるためにリバースプロキシを立てます。このときうまくいったコードでは、リバースプロキシはクライアントからの
https:/www.your-site.net/filesへの要求をhttp://localhost:1080/files/に渡すので、クライアントはポート番号を指定しないことでうまく行きました。 - スキームの変換はapacheの
ssl.confに記載します。 - tusdはproxyの後ろで動いているとオプションを渡して起動させます。
この５つの設定でうまく行きました。うまくいったapach2.4のhttpd.conf、ssl.conf、tusの起動スクリプト、tus-js-clientのhtmlの例を次に記します。セキュリティのため、適当に書き換えていますので、読み替えてください。記載は本質的なところに限りました。
apache2.4の設定ファイル[v2]
- sslの設定はLet's encryptで動いていますので、そちらを参考にしてください。
- [v2]この
httpd.confの設定は不要です。 - [v2] 参考にした
apache2.confはここにあります
httpd.conf（部分）
Listen 80
...
Include conf.modules.d/*.conf
ServerName www.my-site.net:80
IncludeOptional conf.d/*.conf
...
<Directory /var/www/files>
Header always set Access-Control-Allow-Origin "https://www.your-site.net"
</Directory>
この/var/www/filesにupload fileが入ります。
ssl.conf（部分）
...
<VirtualHost _default_:443>
...
ServerName www.your-site.net
...
SSLEngine on
SSLCertificateFile your-cert.pem
SSLCertificateKeyFile your-privkey.pem
Include your-options-ssl-apache.conf
SSLCertificateChainFile your-chain.pem
RequestHeader set X-Forwarded-Proto "https"
ProxyPreserveHost on
ProxyRequests off
<LocationMatch "/files">
ProxyPass http://localhost:1080/files
ProxyPassReverse http://localhost:1080/files
</LocationMatch>
</VirtualHost>
SSLProtocol all -SSLv3
SSLCipherSuite ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-$:HIGH:MEDIUM:!MD5:!RC4
SSLHonorCipherOrder on
SSLCompression off
# OCSP Stapling, only in httpd 2.3.3 and later
SSLUseStapling on
SSLStaplingResponderTimeout 5
SSLStaplingReturnResponderErrors off
セキュリティの設定(SSLCipherSuite、OCSPなど）は適当です。
tusdの起動スクリプト
tusdを立ち上げる時のログとコマンドをスクリプト化しました。リバースプロキシに対応させるため引数(-behind-proxy)を加えています。
#!/bin/bash -vxeu
# tusdをオプション込みで起動する
exec &> /var/www/log/$(basename $0).$(date '+%y%m%d_%H%M%S').$$.bash
sudo -u apache /usr/local/bin/tusd -upload-dir /var/www/files -behind-proxy &
クライアントサイド
これがtus.ioの方法と一番違います。tus.ioではtttps://www.my-site.net:1080/files/とポート番号を指定してアクセスするように書いていますが、apache2.4ではどうもうまく行きません。サンプルはapache2.2のようなので振る舞いが違うようになったのかもしれませんが私にはわかりません。動いたコードは下記です。
41行目：オリジナル <input type="text" id="endpoint" name="endpoint" value="https://www.your-site.net:1080/files/">
41行目：変更後 <input type="text" id="endpoint" name="endpoint" value="https://www.your-site.net/files/">
同様にuppyもendpointをポート番号1080を消してhttps:www.you-site.net/files/に指定したらうまく行きました。
var uppy = Uppy.Core()
...
.use(Uppy.Tus, {
endpoint: 'https://www.your-site.net/files/',
...
})
参考
apacheのデバックはとても大変です。LogLevelをdebugにしてもよくわかりません。そこで教えてもらったのがcurlです。CORSでOPTIONSの反応が全然わからないのでしたがterminalでpreflightのテストができるようになってからかなり素早く試行することができました。それとサーバのconfファイルの編集はrootでデフォルトのviでなくvimを使うほうが断然早いですね。curlのOPTIONSの反応は下記で見えます。ブラウザからどんな要求が出ているのかは FireFoxの表示メニュー → 開発メニュー → ネットワーク でヘッダを確認できました。
$ curl --verbose https://www.your-site.net/files/ -X OPTIONS -H 'Host: www.your-site.net' -H 'Origin: https://your-site.net' 1> /dev/null
どなたの参考になれば嬉しいですが、これが正しい設定なのかわかりません。apacheの仕組みも正確にわかっておらず多分そうだろうと思って書きました。間違いの指摘などご意見いただけましたら幸いです。