Open9

Struggling with t3-stack NextAuth login using Google and Discord provider on App Runner

ピン留めされたアイテム
Yuki NakataYuki Nakata

App Runnerから外部のインターネットに接続できたので構成をメモ:

※ App Runnerは基本的には内部でAWSマネージドなVPCを持っているので、RDSが配置されるVPCとは別のVPC環境になる。そのためVPC Connectorを用いてApp Runner <-> private subnetの疎通を設定する必要がある
※ 下記でRDSの設定の話もしてますが、ほとんどのアプリがApp Runner <-> RDS(private subnet)の接続が必要だと思うので一緒に設定していいと思います(不要だったら省いてください)

  • App Runner: VPC Connectorを紐づける
    • VPC Connector:
      • 新しくsecurity groupを作成して紐づける
      • そのsecurity groupにはoutboundにMySQL(3306 port)とHTTPS(443 port)のアウトバウンドを許可(画像1)
      • VPC Connectorにはアクセスしたいprivate subnetを指定して紐づける
  • 別のVPC(全体構成は画像2)
    • RDS
      • private subnetに配置する
      • security group: App RunnerのVPC Connectorに紐づけられているsecurity groupをインバウンドに指定する(画像3のsgr-094f3e743be35dce3 というsg)
    • Nat Gateway
      • private subnetが外部インターネットにアクセスできるようにNat Gatewayを紐づける(Nat Gatewayを配置するsubnetはpublic subnetである必要がある。じゃないと外部インターネットに接続できない)
    • Internet Gateway

こんな感じでApp Runnerから外部インターネットへの接続が可能になりNextAuth.jsのDiscord provider, Google Providerが使えるようになる。

画像1

画像2

画像3

最終的なAWS構成とApp Runnerからprivate subnetへの接続経路メモ:

Yuki NakataYuki Nakata

このようにRedirectsに入れたらできた
(自分は以前一部の設定をしていたので初めからやる人は他の設定とかも必要)

Yuki NakataYuki Nakata

local環境ではログインが動くようになったけど、デプロイ環境(App Runner)ではログイン処理をするとtimeoutを引き起こしてしまう。

App RunnerはAWSが管理しているVPC内のprivate subnetに配置されているぽいことをどこかで見たのでインターネットにアクセスするにはoutboundをネットに接続できるように接続しなければいけないのだろうか?

と思ってググってみたらこんなのが出てきた。(それっぽい。まだよんでない)
https://qiita.com/SuyamaDaichi/items/018b294f93efe0ca1bdf

GPTにも聞いてみた。

User
App Runner でdiscordのNextAuth login機能を使うときはDiscordの外部サービスを利用するのでoutboundにインターネット接続できるように設定しなければいけないですか?

その場合、どうやるかを教えてください。

また、App Runnerは最近Updateが多いのでネットで調べて回答してください
ChatGPT
From a quick search, here's what I found.

AWS App RunnerでDiscordのNextAuthログイン機能を利用する際に、外部サービス(Discord)へのアウトバウンドインターネット接続を設定する必要があります。これには、App RunnerサービスにカスタムVPCコネクタを設定することが含まれます。このコネクタは、アプリケーションがAmazon VPC内で実行されている他のアプリケーションへアクセスするために使用されます。

App RunnerのカスタムVPCコネクタは、AWS Hyperplaneテクノロジーに基づいており、高いスループットと低遅延機能を提供します。VPCコネクタを設定する際には、セキュリティグループとサブネットの組み合わせに基づいています。各Hyperplane ENIはプライベートIPアドレスが割り当てられ、AWSAppRunnerManagedのタグが付けられます。重要なのは、公開サブネットではなくプライベートサブネットを選択することです。公開サブネットを選択すると、App Runnerサービスの実行時にエラーが発生する可能性があります。

サービスへのアウトバウンドトラフィックは、VPCに接続されたサービスによってVPCを介してルーティングされます。App Runnerはパブリックエンドポイントを介してインターネットアクセスを提供しますが、プライベートリソースへのアクセスは、NATゲートウェイやVPCエンドポイントの設定が必要になる場合があります。

この設定は、App RunnerコンソールまたはAWS CLIを使用して行うことができます。コンソールを使用する場合は、サービス作成時または設定更新時に「ネットワーキング設定」セクションで「アウトバウンドネットワークトラフィック」を「カスタムVPC」として設定します。次に、VPCコネクタを選択し、新しいVPCコネクタを追加するか、既存のVPCコネクタを選択します。CLIを使用する場合は、EgressConfigurationメンバーを含むNetworkConfigurationパラメータを使用して、サービスにVPCコネクタリソースを指定します。

これらの手順により、App RunnerでDiscordのNextAuthログイン機能を利用する際のアウトバウンドインターネット接続が可能になります。

参考資料:

2 / 2

Yuki NakataYuki Nakata

VPC Connectorの設定を変更したらいけた。

VPC Connectorで設定するsubnetsはprivate subnetのみを指定しなければいけないらしい。

https://zenn.dev/hisamitsu/articles/7762c2a70441fc
この記事でいけるはず。

security groupは新しくvpc connector用のsgを作って、それをdatabaseのsgのインバウンドルールで指定してアクセスを許可する

Yuki NakataYuki Nakata

databaseが配置されているVPC & subnetがデフォルトのVPCになっていたので、自前のVPCを立ててそこでやり直したら、NextAuthの接続が通らなくなってしまったので接続し直した。

NextAuthでログインしようとしたらtimeoutでエラーが起きる。

エラーログはこんな感じ:

CloudWatch Logs Live tail
Region: ap-northeast-1
Log group name(s): arn:aws:logs:ap-northeast-1:632336292787:log-group:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application:*
Log stream name(s):
Log stream prefix:
Filter pattern:


イベント時間 メッセージ ロググループ ログストリーム
2024-01-20T09:19:48.926+09:00 [next-auth][error][OAUTH_CALLBACK_ERROR] 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 https://next-auth.js.org/errors#oauth_callback_error outgoing request timed out after 20000ms { 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 error: a: outgoing request timed out after 20000ms 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 at /app/.next/server/chunks/776.js:39:37435 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 at async X.grant (/app/.next/server/chunks/776.js:39:14940) 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 at async X.oauthCallback (/app/.next/server/chunks/776.js:39:4640) 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 at async c (/app/.next/server/chunks/776.js:6:123631) 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 at async Object.l (/app/.next/server/chunks/776.js:30:780) 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 at async m (/app/.next/server/chunks/776.js:6:105934) 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 at async o (/app/.next/server/chunks/776.js:30:19583) 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 at async e.length.t (/app/.next/server/chunks/776.js:30:20994) 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 at async /app/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:41960 { 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 name: 'OAuthCallbackError', 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 code: undefined 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 }, 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 providerId: 'discord', 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 message: 'outgoing request timed out after 20000ms' 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7
2024-01-20T09:19:48.926+09:00 } 632336292787:/aws/apprunner/prd-t3-pr-blog/3b67374acaed4680b64c8b63ca309bcc/application instance/2120efc9d2f844a2b499c45106aebbe7

private subnetがNat Gatewayを通してインターネットに接続できる必要があるので、この記事を参考に設定
https://zenn.dev/oreo2990/articles/d6e7837c64e6fc