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

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)のみだったことで、アクセスできなかった。

またかい！学習しろ！おれ！（だってサーバーとかコードとか同時に３つづつあるし・・・・・ややこしいやねん）

APIのELBにリスナー:443を追加、~~オレオレ証明書~~ ACMで証明書を取得し設定
セキュリティグループのインバウンドも設定

でいけた。

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

まとめ

めちゃくちゃ時間かかった（4日＊8h）なのに書いてみたらこんだけだった・・・。
最初にELBをめんどくさがってhttpだけで立てたことがそもそもの原因（その時は諸々都合でドメインを取得するタイミングではなかったので）
Stagingでも最初からhttpsにして、オレオレ証明書を使わないでちゃんとProductionに寄せた設定をすることをお勧めします！