AWS S3のクライアントからPhoenix Channelに参加する方法 #JavaScript

　Phoenixのchannelについてもクロスドメイン問題のような問題があるのか調べてみました。言い方を変えるとAWS S3のクライアントからPhoenix Channelに参加する方法を試してみました。

Phoenix.Transports.WebSocket -HexDocs
Phoenix.Endpoint - HexDocs

　結論から先に言えば、:check_originの設定を行うことで、channelへの接続元を制限できるようです。config/dev.exsのcheck_originの値がデフォルトでfalseになっていますが、これは制限なしにアクセスできることを意味しています。つまり設定変更なしに可能ということです。セキュリティを考慮して、明示的に許可するドメインを指定したい場合は以下のように設定します。ここではPoenixのポートは4009にしています。

config/dev.exs

#
#  check_origin: false, #デフォルト<==これでもよい
  check_origin: ["http://www.mypress.jp:4009","http://elm-svg.s3-website-ap-northeast-1.amazonaws.com/"],
#

　過去記事「Phoenix Channelで作る最先端Webアプリ - Reactチャット編　- Qiita」においてチャットアプリを作成しました。この時のJavaScriptプログラムを、以下のようにsocketの接続先を明示するように変更して、AWS S3に持っていきます。

Chat.js

#
        //this.socket = new Socket("/socket", {params:
        this.socket = new Socket("ws://www.mypress.jp:4009/socket", {params:
          {token: window.userToken}
        });
        this.socket.connect();
#

reactのbundleファイル priv/static/js/app.js をawschat.jsとリネームして、以下のawschat.htmlとともにAWS S3にアップロードします。

awschat.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>AWS Chat</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="awschat.js"></script>
  </body>
</html>

　AWS S3ではstatic hostingを有効にして、httpsではなく、httpでアクセスするようにします。httpsでアクセスすると、Poenix channelへのアクセスもSSLであることを要求され、エラーとなってしまいますので。これでAWS S3にあるReactクライアントからもPhoenix Channelに参加できるようになります。

　今回は以上で終わりです。