結論
- フロントエンドとバックエンドが異なるサーバー間でデプロイされる場合、ドメインを統一する
具体的には以下のようにしました
フロント: Amplify 変更前(~~.amplify.com) → 変更後(app.example.com)
バックエンド: EC2 (example.com)
- LaravelでSanctumを使っている場合、
.envファイルでSANCTUM_STATEFUL_DOMAINSとSESSION_DOMAINの設定を行う
使用
- Laravel
- AWS Amplify
- AWS Route 53
前提
- SPA認証(クッキーベースのセッション)を使用
(具体的には、LaravelのSanctumパッケージを使用)
対処方法
1. サブドメイン設定: Amplifyでカスタムドメインを設定
- Route 53でサブドメインを設定し、各DNSサーバーに登録
- Amplifyのカスタムドメイン設定で、Route 53で設定したドメインを使用
対応は下記を参考に進めました
https://qiita.com/w2or3w/items/ddb7c4c1a602470ef96b
2. .envファイルの編集
-
SANCTUM_STATEFUL_DOMAINSとSESSION_DOMAINを設定-
SANCTUM_STATEFUL_DOMAIN: Laravel Sanctumに関連し、特定のドメインからのリクエストが状態を保持する認証を行うことを許可するドメインのリストを指定するために使用する -
SESSION_DOMAIN: セッションクッキーに適用されるドメインを指定するための設定オプション
-
他の対応
- config/cors.phpの
allowed_originsにフロントのURLが設定されていること確認 - フロントエンドの認証でFirebase Authenticationを使用していたので承認ドメインに設定したサブドメインを登録する
この対応が必要だった理由
最初は、ドメインが異なっていたため、正しく認証済みのクッキーがブラウザに保存されなかった。具体的には以下の問題が発生していた。
- レスポンスでset-cookieが返されていたが、実際のブラウザ上のクッキーには保持されていなかった。
- フロントエンドはAmplifyを使用しており、デフォルトの~~.amplifyapp.comドメインが使用されていた。
- 異なるドメイン間で認証を行うために、Same-Site属性をnone、secure属性を設定していたが、それでもうまくいかなかった。
これらの問題を解決するために、フロントエンドをサブドメインに設定し、domain属性を設定したところ、正しく認証済みのクッキーがブラウザに保存されるようになった。ブラウザはクロスオリジンの場合、認証済みのクッキーを正しく保存しない挙動になっていたと考えました。
クッキーはデフォルトではクッキーをセットしたサーバーにのみ送信される。