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

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

新規登録して質問してみよう
ただいま回答率
87.20%
docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

React.js

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

受付中

React(フロント)とPython(バック)の通信をAxiosで実現したい

wefoiwa
wefoiwa

総合スコア10

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

React.js

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

1回答

0評価

1クリップ

1407閲覧

投稿2022/03/07 12:53

編集2022/03/08 12:49

初めて質問させていただきます。
勉強を始めたばかりで、理解の乏しい箇所や記述の雑な部分が多いですが、何卒ご指導の程よろしくお願いいたします。
Dockerを使用した開発中に生じた、コンテナ間通信 (ClientからServerへのアクセス) の問題です。

前提・実現したいこと

NGINX、React (Create-React-App)、PythonのFlaskを利用したWebアプリケーションの作成をしています。開発はdocker-composeで行っています。以下にdockerの情報を載せます。Dockerを立ち上げると、http://localhost:80http://localhost:3000http://localhost:3000 でそれぞれの画面がブラウザで確認できます。

ClientとServer間で画像ファイルの送受信を行いたいです。具体的に、ユーザーがアップロードした画像をサーバーで処理して、処理後画像をクライアントに送る、という処理を行いたいです。

docker

version: '3.1' services: nginx: image: nginx:1.15 container_name: nginx volumes: - ../:/var/www - ./nginx-dev.conf:/etc/nginx/conf.d/default.conf ports: - 80:80 networks: - my-network depends_on: - server - client client: build: context: ../client dockerfile: Dockerfile container_name: client command: npm start volumes: - ../client:/usr/app - /usr/app/node_modules networks: my-network: aliases: - client command: npm start stdin_open: true ports: - "3000:3000" server: build: context: ../ dockerfile: server/Dockerfile container_name: server volumes: - ../server:/var/www/server networks: my-network: aliases: - server expose: - 8080 ports: - "8080:8080" networks: my-network:

nginx.conf

upstream server { server server:8080; } upstream client { server client:3000; } server { listen 80; server_name localhost; location / { proxy_pass http://client; proxy_set_header Host "localhost"; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_redirect off; } location ~ /api/ { proxy_pass http://server; proxy_set_header Host "localhost"; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_redirect off; } }

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

ClientからServerへのアクセスができません。
404エラーになってしまいます。

該当のソースコード

uploadImageに格納された画像データをAxiosでFlaskの/testに送信したいです。

App.js(抜粋)

const handleSubmit = () => { const file = new FormData() file.append("image", uploadImage, "image"); axios({ method: "post", url: "http://localhost:8080/test", data: file, headers: { "Content-Type": "multipart/form-data" }, }).then((response) => {setHSVImage(response.data)}) };

index.py(抜粋)

app = Flask(__name__) CORS(app, origins=["http://localhost:3000/", "http://localhost:80/"]) @app.route("/", methods=['GET']) def index(): return "Server !" @app.route("/test/", methods=['GET','POST']) def parse(): if request.method == 'POST': img = request.files("image") res = imgTransform(img) #処理 retval, buffer = cv2.imencode('.png', res) jpg_as_text = base64.b64encode(buffer) return Response(response=jpg_as_text, content_type='image/jpeg')

自分で調べたことや試したこと

最初CORSエラーが生じていたので、index.pyにoriginsを追記しました。
Dockerの知識が浅いのでよく理解できていませんが、ネットワークを統一すると解決できることがあると知ったので、my-networkを追記しました。
url: "http://localhost:8080/test" の代わりに、"/test"、"/api/test/"などを試しましたがエラーが出ている状況です。

使っているツールのバージョンなど補足情報

Macbook air (M1, 2020)
macOS Monterey 12.1
Docker Desktop for Mac (Apple Chip)
node:12.10.0
python:3.8.0

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

React.js

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