Route53を使ってドメインからrailsアプリにアクセスするとsessionが使用できない

Question

前提・実現したいこと

やりたいことは、自作したアプリをAWSを用いて独自ドメインからアクセス、正常に動作させることです。

インフラ構成
・EC2にデプロイ
・ElasticIPとお名前ドットコムで取得した独自ドメインをRoute53で紐付け

アプリ
フロントエンド：react
バックエンド：rails

発生している問題・エラーメッセージ

独自ドメインにブラウザからアクセスすると、アプリが表示されますが、一点問題があり、railsでCookieのsessionを用いた機能が使えませんでした。

ドメインにアクセスではなく、IPアドレスにアクセスして動作させると問題なく、ブラウザのCookieを見ても以下のようにSession_idが残っていました。
https://gyazo.com/8d888de7be9365a79feb1a80ca2770b7

しかし、ドメインからアクセスすると以下のようにSession_idが残っていませんでした。
https://gyazo.com/2bafdaf8bb7363c11a068de40cbbd691

以上のことから、Route53を用いてドメインからのアクセスをすることでSession_idが残らないことが原因だと考えておりますが、なぜ残らないのかがわからず困っております。

ご知見ある方いらっしゃいましたら、アドバイスいただけると幸いです。

よろしくお願いいたします。

追記

フロントエンド（react）で以下のコードにより、railsにリクエストを投げてセッションを確認しています。
railsから返ってきたlogged_in:の値によってログイン済みユーザか（セッションが残っているか）を判断しています

railsでセッションを記録させるリクエストを送るreactコード

  const signIn = () => {
    axios
      .post(
        process.env.REACT_APP_HOST + ":3001" + "/login",
        {
          user: {
            email: email,
            password: password,
          },
        },
        { withCredentials: true }
      )
      .then((response) => {
        console.log("registration res", response);
        const createdId = response.data.id;
        console.log(createdId);
        props.login();
        history.push({ pathname: "/users/" + createdId });
      })
      .catch((error) => {
        console.log("registration error", error);
        alert("メールアドレスとパスワードの組み合わせが正しくありません。");
      });

railsにセッションを確認させるリクエストを送るreactコード

  const checkLoginStatus = () => {
    axios
      .get(process.env.REACT_APP_HOST + ":3001" + "/login", {
        withCredentials: true,
      })
      .then((response) => {
        console.log(response);
        setLoggedInStatus(response.data.logged_in);
        setLoaded(true);
        if (response.data.logged_in) {
          return;
        } else {
          alert("ログインして下さい");
          history.push("/signin");
        }
      });

rails routes.rb
上記リクエストが以下のルートによって、sessions_controllerのnewに届きます

  get    '/login',   to: 'sessions#new'
　post   '/login',   to: 'sessions#create'

sessions_controller.rb

  before_action :logged_in_user, only: [:new]

  def create
    @user = User.find_by(email: signin_params[:email])
    if @user && @user.authenticate(signin_params[:password])
      session[:user_id] = @user.id
      render json: current_user
    else
      render status: 404
    end
  end

  def new
    if current_user
      render json: { logged_in: true, user: current_user, session: session[:user_id] }
    else
      render json: { logged_in: false, message: 'ユーザーが存在しません', session: session[:user_id] }
    end
  end

application_controller.rb

  def current_user
    @current_user ||= User.find_by(id: session[:user_id]) if session[:user_id]
  end

  def logged_in?
    !current_user.nil?
  end

  def logged_in_user
    render json: { logged_in: false, message: current_user } unless logged_in?
  end

ブラウザのコンソール画面に表示されたresponse.data

logged_in: false
message: null
session: null

config>application.rb

require_relative 'boot'

require 'rails'
# Pick the frameworks you want:
require 'active_model/railtie'
require 'active_job/railtie'
require 'active_record/railtie'
require 'active_storage/engine'
require 'action_controller/railtie'
require 'action_mailer/railtie'
require 'action_mailbox/engine'
require 'action_text/engine'
require 'action_view/railtie'
require 'action_cable/engine'
# require "sprockets/railtie"
require 'rails/test_unit/railtie'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module Myapp
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 6.1
    # Configuration for the application, engines, and railties goes here.
    #
    # These settings can be overridden in specific environments using the files
    # in config/environments, which are processed later.
    #
    # config.time_zone = "Central Time (US & Canada)"
    # config.eager_load_paths << Rails.root.join("extras")

    # Only loads a smaller set of middleware suitable for API only apps.
    # Middleware like session, flash, cookies can be added back manually.
    # Skip views, helpers and assets when generating a new resource.
    config.api_only = true
    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins 'http://localhost:80', 'http://独自ドメイン'
        resource '*',
                 headers: :any,
                 methods: %i[get post patch delete options],
                 credentials: true
      end
    end

    config.hosts << '.example.com'
    config.hosts << '独自ドメイン'
    config.hosts << 'localhost'

    # セッションメソッドを有効にする
    config.middleware.use ActionDispatch::Cookies
    config.middleware.use ActionDispatch::Session::CookieStore
    config.middleware.use ActionDispatch::ContentSecurityPolicy::Middleware

    config.time_zone = 'Tokyo'
    config.active_record.default_timezone = :local

    config.action_dispatch.default_headers = {
      'Access-Control-Allow-Credentials' => 'true',
      'Access-Control-Allow-Origin' =>
      if Rails.env.production?
        'http://独自ドメイン'
      else
        'http://localhost'
      end,
      'Access-Control-Request-Method' => '*'
    }
  end
end

message: nullとなっているのはapplicaion_controllerのlogged_in_userでcurrent_userが存在したいため。
current_userが存在しないのはsession[:user_id]が存在しないため。
つまり、セッションが有効になっていないことが原因と考えております。

Comments

[AbeTakashi]

cookieを使用している部分のソースコードは一部をマスクしてでも提示していただいた方がいいと思います。Route53だからってのはあまり関係ない気がするんですけどね。EC2との組み合わせでトリッキーなことしてなさそうですし。

[gozikyu]

TakeshiAbeさん
コメントありがとうございます。
該当部分のコード追加いたしました。

おっしゃるとおり、Route53にしただけでセッションが使えないのもよくわからないので、違うところに原因があるのかもしれません。
そのことを念頭に引き続き調べてみます。

[AbeTakashi]

ソースコードご提示ありがとうございます。まだ全部見きれてはいないのですが、config/application.rb の設定も念のためご確認ください。cookieに関する設定があったような（おぼろげ）

[gozikyu]

早急な返信ありがとうございます。
config/application.rbとセッションを作成するrailsコードを追加いたしました。

[AbeTakashi]

config.api_only = true になってますし、あとはなんでしょうね・・・　envまわりとかも問題ないですよね。

https://railsguides.jp/security.html
おそらく何度も読まれているとは思いますが、とにかくセキュリティがらみ含めてもろもろ制限・制約もありそうですので、今一度順に上からご確認頂くといいかもしれません。ぱっとご指摘できず申し訳ありません。

[gozikyu]

いえいえ、色々と確認いただき誠にありがとうございます。
引き続き調査してみます。

解決しましたら、こちらで共有させていただきます

Answer 1

reactからリクエストを投げる宛先が独自ドメインではなく、IPアドレスになっていたことが原因みたいです。
このコードを

    axios
      .post(
        IPアドレス + ":3001" + "/login",
        {
          user: {
            email: email,
            password: password,
          },
        },
        { withCredentials: true }
      )
...

以下のコードにすると、セッションが保存されるようになりました。

    axios
      .post(
        独自ドメイン + ":3001" + "/login",
        {
          user: {
            email: email,
            password: password,
          },
        },
        { withCredentials: true }
      )

独自ドメインにリクエストを送っても、Route53でIPアドレスに変換されて同じrailsが動いているホストに行き着くはずなので、問題ないと思っていました。

なぜ、独自ドメインに変更すると解決するのかはしっくり来ていないので、考えてみてわかったら共有します。
また、なぜかわかる方いらっしゃいましたらご教示いただけると幸いです。

Comments

[maisumakun]

> 独自ドメインにリクエストを送っても、Route53でIPアドレスに変換されて同じrailsが動いているホストに行き着くはずなので、問題ないと思っていました。

結果的に同じサーバにたどり着くとしても、ドメイン名とIPアドレスでのアクセスはクロスオリジンになってしまいます。

[gozikyu]

回答ありがとうございます。
変更後も独自ドメインのポート80から独自ドメインのポート3001へのクロスオリジンになってしまうと思うのですが、ポート違い（変更後）とドメインとIPアドレス（変更前）のクロスオリジンで勝手が違うということでしょうか？

度々の質問で恐縮ですが、ご存知でしたらご教示いただけると幸いです。

[maisumakun]

Cookieはドメインだけ見て、ポートに関わらず共用される、とのことです。

http://sahara3.hatenablog.com/entry/2018/03/11/145054

[gozikyu]

参考サイトまで共有いただき誠にありがとうございます。

勉強不足でこのことは知りませんでした。