解決済
Django + NextJS + Stripeサブスク有料会員サイト構築チュートリアル1(アカウント認証編)で新規登録時にfetchでDRFのAPIが取得できない。
Next.js
DRF
2023/05/07 09:04
いつも楽しく学習させていただいております。
zennで購入したインスタ風画像投稿サイト構築チュートリアルを実施するためにyoutubeでDjango + NextJS + Stripeサブスク有料会員サイト構築チュートリアル1(アカウント認証編)を参考に実装を進めている際にエラーにハマりましたのでご質問させてください。
実現したいこと
fetchでDRFで作成した新規登録API（api/auth/register）を叩けるようにしたい。
発生している問題
// NEXT_PUBLIC_API_URL=http://127.0.0.1:8000 は.envに定義しております。
const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/register/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: body
以上のコードを実施したときにエラー内容が出力されます。
エラー内容
TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11457:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async register_api (webpack-internal:///(api)/./pages/api/account/register.tsx:19:28) {
cause: Error: connect ECONNREFUSED 127.0.0.1:8000
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1532:16) {
errno: -111,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '127.0.0.1',
port: 8000
}
}
ソースコード
自分で試したこと
① http://127.0.0.1:8000/api/auth/register/ をPostmanで叩いた際は問題なく新規登録を行えることを確認しています。
② 以下のように127.0.0.1が起動していることは確認しております。
% netstat -n | grep '127.0.0.1'
tcp4 0 0 127.0.0.1.8000 127.0.0.1.62993 ESTABLISHED
tcp4 0 0 127.0.0.1.62993 127.0.0.1.8000 ESTABLISHED
・
・
・
③ jsonplaceholderの内容をfetchで取得することはできました。
④ http://127.0.0.1:8000/api/auth/user をfetchで取得しようとした際にも今回と同様のエラーが発生しました。
補足情報
typescriptを利用し、環境構築はdockerで行なっておりますので、動画内のソースコードと全てが同じというわけではありません。ご容赦ください。
Django側とNextJS側の連携が上手くいっていないだけのようなのですが、原因が突き止められておりません。
もしこのエラー内容に心当たりがありましたら、ご教授いただきたいです。
※当方、Djangoの知見はそれなりにあるのですが、Next.jsに関しては素人です。
お忙しいところ大変恐縮ですが、ご返信いただけましたら幸いです。
これからの動画投稿、執筆活動のご健闘をお祈りしています。
回答 5件
回答するにはログインが必要です
はる@講師 様
ご回答ありがとうございました。
おっしゃる通りコンテナのIPにアクセスしたところ登録ができました。
docker inspect 750b72f752bd | grep IPAddress
"SecndaryIPAddresses": null,
"IPAddress": "",
"IPAddress": "172.26.0.4",
以下に変更
NEXT_PUBLIC_API_URL=http://172.26.0.4:8000
ご迷惑をお掛けしました。
今後ともよろしくお願いいたします
1
やはりIPアドレスでしたね。
今後ともよろしくお願いいたします。
1
はる＠講師 様
ご返信ありがとうございます。
現在出先で確認することができないので本日の夜確認させていただきます。
ありがとうございます。
おそらくDockerのNext.jsからDockerのDjangoのアドレスにアクセスできないだけですね。
DockerのDjangoのアドレスを調べてみてください。
ではアクセスできないと思います。
こちらでも見てみます。
1
githubコードの展開ありがとうございます。
こちらで動かしてみますので、少々お待ち下さい。
1