初めて質問させていただきます。
勉強を始めたばかりで、理解の乏しい箇所や記述の雑な部分が多いですが、何卒ご指導の程よろしくお願いいたします。
Dockerを使用した開発中に生じた、コンテナ間通信 (ClientからServerへのアクセス) の問題です。
前提・実現したいこと
NGINX、React (Create-React-App)、PythonのFlaskを利用したWebアプリケーションの作成をしています。開発はdocker-composeで行っています。以下にdockerの情報を載せます。Dockerを立ち上げると、http://localhost:80 、http://localhost:3000 、http://localhost:3000 でそれぞれの画面がブラウザで確認できます。
ClientとServer間で画像ファイルの送受信を行いたいです。具体的に、ユーザーがアップロードした画像をサーバーで処理して、処理後画像をクライアントに送る、という処理を行いたいです。
docker
1version: '3.1' 2 3services: 4 nginx: 5 image: nginx:1.15 6 container_name: nginx 7 volumes: 8 - ../:/var/www 9 - ./nginx-dev.conf:/etc/nginx/conf.d/default.conf 10 ports: 11 - 80:80 12 networks: 13 - my-network 14 depends_on: 15 - server 16 - client 17 client: 18 build: 19 context: ../client 20 dockerfile: Dockerfile 21 container_name: client 22 command: npm start 23 volumes: 24 - ../client:/usr/app 25 - /usr/app/node_modules 26 networks: 27 my-network: 28 aliases: 29 - client 30 command: npm start 31 stdin_open: true 32 ports: 33 - "3000:3000" 34 server: 35 build: 36 context: ../ 37 dockerfile: server/Dockerfile 38 container_name: server 39 volumes: 40 - ../server:/var/www/server 41 networks: 42 my-network: 43 aliases: 44 - server 45 expose: 46 - 8080 47 ports: 48 - "8080:8080" 49networks: 50 my-network:
nginx.conf
1upstream server { 2 server server:8080; 3} 4 5upstream client { 6 server client:3000; 7} 8 9server { 10 listen 80; 11 server_name localhost; 12 13 location / { 14 proxy_pass http://client; 15 proxy_set_header Host "localhost"; 16 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 17 proxy_redirect off; 18 } 19 20 location ~ /api/ { 21 proxy_pass http://server; 22 proxy_set_header Host "localhost"; 23 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 24 proxy_redirect off; 25 } 26}
発生している問題・エラーメッセージ
ClientからServerへのアクセスができません。
404エラーになってしまいます。
該当のソースコード
uploadImageに格納された画像データをAxiosでFlaskの/testに送信したいです。
App.js(抜粋)
1 const handleSubmit = () => { 2 const file = new FormData() 3 file.append("image", uploadImage, "image"); 4 axios({ 5 method: "post", 6 url: "http://localhost:8080/test", 7 data: file, 8 headers: { "Content-Type": "multipart/form-data" }, 9 }).then((response) => {setHSVImage(response.data)}) 10 };
index.py(抜粋)
1app = Flask(__name__) 2CORS(app, origins=["http://localhost:3000/", "http://localhost:80/"]) 3 4@app.route("/", methods=['GET']) 5def index(): 6 return "Server !" 7 8@app.route("/test/", methods=['GET','POST']) 9def parse(): 10 if request.method == 'POST': 11 img = request.files("image") 12 res = imgTransform(img) #処理 13 retval, buffer = cv2.imencode('.png', res) 14 jpg_as_text = base64.b64encode(buffer) 15 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

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。