0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-09-14

関わってる案件で認証サーバーを自作しているのですが、そこで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に寄せた設定をすることをお勧めします!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?