Edited at

Frontend=nuxt.js, Backend=RailsAPI, 認証=自前(JWT)のサーバー構築でSSL証明書,DNS,http, https,CORSなどでつまりまくった話

関わってる案件で認証サーバーを自作しているのですが、そこでstaging環境構築に手間取ったお話です。主に、API通信時の取り決めで引っかかってる感じでした。

SSL証明書周りのエラーやCORSで引っかかってる人には刺さるかもです

今後また引っかからない様に覚え込みコミット。


使用しているフレームワークなど


Frontend

nuxt.js

ビルド:AWS CodeBuild

ホスティング:S3 + CloudFront


APIサーバー

Rails 5

デプロイ:CircleCI ✖︎ Capistrano (テスト含む)

サーバー:EC2(ELB+AutoScale)


認証サーバー

Firebase Authenticationの仕組みを真似て自作。(複数サイトのシングルサインオンが目的)

Rails 5

デプロイ:Capistrano

サーバー:EC2(ELB)

referrer参照しそのオリジンが登録されていないとアクセスできない仕組み

 

※ すでにサーバー、セキュリティグループなどの設定は完了済み

※ ELBのリスナーはAPI、認証サーバー共に80番のみ(これも一つの詰まった要因だった)


詰まったこと


Frontend→認証サーバのブラウザアクセスでリファラが取れない問題

原因:FrontendのホスティングがCloudFrontなのでhttps、一方認証サーバーのELBはhttpしか開けていなかった。

調べてみるとhttpsからhttpへのアクセス時にはリファラがとれないようだ。

ELBのリスナーに443を追加。証明書取得がめんどいのでオレオレ証明書をインポートし設定した。

参考: ELBにサーバ自己証明書をインストー...

該当セキュリティグループのインバウンドにhttpsを追加し、アクセスができる様に。


Frontend→認証サーバのAPIアクセスがそもそも、できない(その1)

原因:オレオレ証明書だとAPIアクセスでは証明書のエラーでアクセスできない。ブラウザだと画面で操作して進むことはできるやつにひっかかる

route53にてドメイン取得+サブドメインを取得

AWS CertificateManagerでSSL証明書のリクエスト

証明書の確認用のDNS設定を行う

ELBの443リスナーの証明書を上記のものに変更

でいけた。


Frontend→認証サーバのAPIアクセスがそもそも、できない(その2)

原因:ブラウザ側でエラーがでている。

No 'Access-Control-Allow-Origin' header is present on the requested resource.

ああ、CORSか。確かにそうだった。

CORSについてはこのサイトがよくまとまっていました: CORSまとめ

認証サーバーはRailsで動いているのでgemrack-corsを入れて、application.rbなどでallowed_originの設定をして。

詳しい手順はこちら: https://qiita.com/residenti/items/3a03e5e0268b354284b7


認証が完了し、Frontendにコールバックするも、APIアクセスでアクセスがpendingされる

原因:API側のELBが80(http)のみだったことで、アクセスできなかった。

またかい!学習しろ!おれ!(だってサーバーとかコードとか同時に3つづつあるし・・・・・ややこしいやねん)

APIのELBにリスナー:443を追加、オレオレ証明書 ACMで証明書を取得し設定

セキュリティグループのインバウンドも設定

でいけた。

あ、もちろんAPI側のCORSの設定もちゃんと行いました!


まとめ

めちゃくちゃ時間かかった(4日*8h)なのに書いてみたらこんだけだった・・・。

最初にELBをめんどくさがってhttpだけで立てたことがそもそもの原因(その時は諸々都合でドメインを取得するタイミングではなかったので)

Stagingでも最初からhttpsにして、オレオレ証明書を使わないでちゃんとProductionに寄せた設定をすることをお勧めします!