質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

918閲覧

Docker上でSSRにて、APIレスポンスの画像ファイル配信URLのホスト名が"http://(サービス名)~となり、アクセスできない(Django/Next.js)

ryo24

総合スコア0

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2021/10/26 12:20

編集2021/10/31 13:32

■前提・実現したいこと
Docker上でフロントエンド・バックエンドでそれぞれコンテナを立ち上げて開発を行っています。
・フロントエンド:Next.js
サービス名:frontend
ポート:"3000:3000"
・バックエンド:DjangoRestFramework
サービス名:backend
ポート:"8000:8000"

Next.jsにてSSR(SSG)にてAPIを叩き、レスポンスからDBに登録された画像の配信URLを取得して、画像を表示しようと試みています。

■発生している問題・エラーメッセージ
Docker上でフロント:Next.js・バックエンド:DjangoRestFrameworkでそれぞれコンテナを立ち上げて開発を行っています。
DjangoのモデルImageFieldにてDBに画像(の配信URL)を登録して、ローカルの画像を表示しようと試みています。

エンドポイントとして設定(たとえば、http://127.0.0.1:8000/api/xxx)したアドレスをブラウザのURLで直接アクセスした場合は、配信URLは以下のように意図通り取得でき、登録した画像を適切に表示できるのですが、

{
・・(省略)・・
"image": "http://127.0.0.1:8000/api/images/xxx.jpg",
・・(省略)・・
},

Next.jsにてSSR(SSG)にてエンドポイントを叩いた場合、以下のようにレスポンス内の画像の配信URLがhttp://(サービス名):8000/api/imageとなってしまい、画像を表示することができず困っています。

{
・・(省略)・・
"image": "http://backend(サービス名):8000/api/images/xxx.jpg",
・・(省略)・・
},

■Docker-Compose.yml
version: '3'
services:
省略
backend:
container_name: django-restapi
build:
context: ./
dockerfile: dockerfilePython
volumes:
- ./django-restapi:/code
command: sh -c "python test_app/manage.py runserver 0:8000"
ports:
- "8000:8000"
depends_on:
- db
frontend:
container_name: next.js
build:
context: ./
dockerfile: dockerfileNode
volumes:
- ./my-app:/code:cached
- /code/node_modules
command: sh -c "npm run dev"
ports:
- "3000:3000"
depends_on:
- backend
volumes:
data_volume:

(追記)
・自分なりに以下調べました。
APIに直接アクセスする際は、ports:- "8000:8000"を設定しているため、http://127.0.0.1:8000/にアクセスすることで、以下のレスポンスが返ってきます。(これがどうしてhttp://backend:8000/api/images~にならないのかがわからないですが・・・)
{
"image": "http://127.0.0.1:8000/api/images/xxx.jpg",
},

docker内の複数コンテナ(サービス名:frontend・backend)同士でやりとりするために、
ブラウザおよびSSR/SSGからAPIを叩くときは、http://127.0.0.1:8000/~ではなく、プロキシで127.0.0.1:3000→(frontend:3000→proxy→)http://backend:8000/でアクセスしています。以下参考
https://hsuzuki.hatenablog.com/entry/2019/10/25/170856

明確な理由は分かっていないですが、上記の理由によりSSR(SSG)のときは、ホスト名がhttp://backend:8000/と扱われて以下のレスポンスが返っていると予測しています。
{
"image": "http://backend:8000/api/images/xxx.jpg",
},

上記を踏まえて、開発環境において、SSR(SSG)のときに画像が意図通りにアクセスできるようにする方法等ありませんでしょうか。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

surface_0

2021/11/05 02:36

提示されているコードが一部化けたり、インデントが無くなって見づらいので、コードブロックを使って見やすく修正していただきたいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問