こんにちは。
株式会社アドグローブ ソリューション事業部の富澤です。
ソリューション事業部のナレッジ共有を目的としてオープンソースのツールである「Outline」を構築しました。
今回はOutlineについてと環境構築に際してつまずいた点を共有していきたいと思います。
Outlineとは
オープンソースで開発されているナレッジベースのツールで画像やテキストはもちろんのこと、Youtubeやエンジニア用途だとCodePenなんかも共有することが可能です。
例えば、案件で使用したライブラリの使い方であったり、教育用途だと最近ではYoutubeにエンジニア向けの良質なコンテンツがたくさんあるのでYoutube動画と一緒に内容の要約なんかも共有できると面白そうに思います。
実際にナレッジ共有するには、コレクションというグループを作成してその下層にドキュメントを作成するようなイメージです。
オープンソースではありませんが似たようなツールの有名どころとして「Notion」があげられます。
OutlineはNotionほどの豊富な機能はありませんがやれることが絞られているため使い勝手はよさそうに思います。
公式サイトにあるように、あらかじめホスティングされたものをサブスクリプションで使用可能なようですが、今回は独自でAWSクラウド上に環境を用意してOutlineをホスティングするようにしました。
Outlineのアーキテクチャ
APIはNode.jsでフレームワークにKoaを使用しています。
フロントはReact.jsで開発されていてwebpackでバンドルされます。
また、WebSocketを用いて双方向通信が行われます。
ログイン機能についてはPassportで実装されていて、「OpenID Connect」や「シングルサインオン」といった認証方法が提供されています。
環境構築
AWSにOutlineが動作する環境を構築しました。
以下は使用した主なAWSサービスとなります。
- Amazon EC2
- Elastic Load Balancing
- Amazon Simple Storage Service（S3）
- Amazon Route 53
- Amazon ElastiCache（Redis）
- Amazon RDS（PostgreSQL）
Outlineの環境構築に関してはこちらに記載ありますので興味ある方は見てみてください。
Outline自体はEC2上で実行させていますが、今回はNginxでプロキシさせるようにしています。
Node.js側はポートを3000で待ち受けしています。
以下のようなイメージです。
つまずいた点
WebSocketがエラーになって通信できない
結論から言うとNginxの設定が足りていなかったようです。
最初にOutlineを動作させた時はプロキシを挟まずに実行していて、プロキシを入れたことで動作しなくなってしまったのでNginxの設定に原因があることはすぐにわかりました。
調べるとすぐに出てくるのですが、WebSocket接続を行う場合に「HTTP/1.1」から「WebSocket」に接続を切り替える必要があるようです。
バージョン1.3.13以降、nginxは、プロキシサーバーがコード101（Switching Protocols）で応答を返し、クライアントがプロトコルの切り替えを要求した場合に、クライアントとプロキシサーバーの間にトンネルを設定できる特別な操作モードを実装しています。リクエストの「アップグレード」ヘッダー。
上記のように、「アップグレード」や「接続」などのホップバイホップヘッダーは、クライアントからプロキシサーバーに渡されません。したがって、プロキシサーバーが、プロトコルをWebSocketに切り替えるクライアントの意図を知るために、これらのヘッダーは明示的に渡す必要があります
上記の通り、「Upgrade」と「Connection」を設定することでWebSocket通信が可能となりました。
proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade";
認証に失敗する
こちらもプロキシを挟む前はうまくいっていたのですが、Nginxを挟んでからエラーでログインできなくなってしまいました。
原因は簡単でOpenIDで認可サーバからアクセストークンが発行されるのですが、NginxでCookieをプロキシ先に渡す設定になっていなかったことが原因でした。
以下をNginxの設定に追加することでプロキシを挟んだ認証が可能になりました。
proxy_set_header Host $host;
まとめ
個人的な感想としては、最近はAWSの学習に力を入れていたので実践する良い機会となりました。
構築していて気が付いたこととして、今回記載はしていませんがDNSの理解が浅いのでRoute53の設定あたりは少し手間取ってしまったように感じました。
この辺りは引き続き学習する必要がありそうです。
Outlineは使い方によっては有用なツールだと思いますので是非使用していただければと思います。
アドグローブではシステムエンジニアを含め、さまざまなポジションで一緒に働く仲間を募集しています。
詳細については下記からご確認ください。みなさまからのご応募お待ちしております。
