結果
ログイン処理部分だけは作れたけど、サインアップまでは作れなかった。
動機
Rails と React 使って何か作りたい。React使うんだったらRailsはAPIサーバーとして動作させて、シングルページアプリケーション(SPA)としてReactを使うのがよさそう？
後々はAPIサーバーとAndroidやiPhoneのネイティブアプリのバックエンドサーバーとしても使えて、開発スピードアップを図れるやもしれない。そういう思惑がありました。
てさぐり期
レイルズチョットデキル程度の人間なので、Reactの仕組みも良くわからないし、その周りのエコシステムも全然門外漢。そういう状態でのスタート。
どういう経緯で見つけたかは忘れたが、Ruby on Rails on React on SSR on SPAというサイトに出会う。
これをまねして実行しようと試みるも、私のRailsの技術不足(?)により動かすに至らなかった。
次にルーティングはRails側とReact側でそれぞれで持ったほうがいいよねというオレオレ理論により、react-router に手を出す。ルーティングはできるようになったが、肝心のログイン認証とかが良くわからない。色々調べてここのページに出会うも、APIサーバー側への通知処理が無かった。どうすれば。。。
サンプル実行期
最終的に JSON Web Tokenを使ってReactとReduxのSPAでログイン認証をするのページを参考に作ってみることにする。サンプルがgithubにあがっていたので、それをまずは動かしてみる。README.mdの通りにすれば動く。Windows 上では動かなかったので、Bash on Windows 上で実行した。動いた。server.jsがサーバーの役割をしているようだった。クライアント側はsrc/sagas/auth.jsあたりかな？何しか同じホスト上でしかアクセスできないようだったので、rails側のルーティングに引っ掛けるにはリバースプロキシの力を借りる必要がありそうだった。
nginx導入
nginx をフロントにおいて、ルートディレクトリにアクセスされたときはjs側に流し、/api/* にアクセスされたときはrails 側に流すという設定だけをしてデーモン起動。
Rails サイドの JWT
Rails サイドでJWTを作成するには、nsarno/knockがよさそうだった。README.md と KnockでRails APIモードでJWT認証してみる を参考に設定した。
サンプルを修正
knockがJWTを作成するのに必要なJSONの形式がjwt-react-redux-auth-exampleで生成するJSONの形式と異なっていたので、生成するJSONの形式を修正。といってもauth{}でラップして、emailとpasswordに直すだけだけど。修正したコードはこちら
フォークして作っちゃってるから、もやもやしてる。オリジナルの作者がわかるような形でフォークじゃなく、新しくgitリポジトリを作成したほうがいいかも。
Docker compose でまとめる。
サーバーが3台立ち上がってるので、Docker compose でまとめる。結果はこちら
これもgitリポジトリのまとめ方が下手なので、ちゃんとしたい。
今後の課題
Signupフォームからユーザーを登録して、自動ログインできるような仕組みがほしい。React力が足りず、そこまではできてない。