dockerコンテナ上のflaskへの接続

Question

react,flask,niginx,msqlのコンテナを作成したプリケーションを作っています
開発環境では以下いずれともブラウザからアクセス可能なのですが
localhost:3000/
http://localhost/

本番環境の場合、port:3000は受け付けないので以下でブラウザアクセスします。
http://ipaddress/

フロント（react）については当たり前ですがブラウザからちゃんと表示されているのですが
以下エラーとなりflaskとの接続ができません。

localhost:5000/api/user_get:1 
Failed to load resource: net::ERR_CONNECTION_REFUSED

コンテナが上がっているサーバー上にてcurlコマンドでAPIを呼び出すと以下のどちらも形式も応答します
curl localhost:5000/api/user_get
curl ipaccress:5000/api/user_get

おそらく初歩的な部分の知識不足と思いますが、本番環境でflaskとの接続をするにはどのあたりを見るべきでしょうか

念のため以下のymlとnginxのコンフィグを張ります

services:
  flask_app:
    build:
      context: ./flask     
    container_name: flask
    ports:
      - "5000:5000"
    networks:
      - frontend
      - backend
    volumes:
      - ./flask:/var/www/flask
    tty: true
    environment:
      TZ: Asia/Tokyo
    command: flask run --host 0.0.0.0 --port 5000

  react_app:
    build:
      context: ./front
    container_name: react
    volumes:
      - ./front/:/usr/src/app
    environment:
      CHOKIDAR_USEPOLLING: "true"
    command: sh -c "cd react-app && yarn install && yarn dev"
    ports:
      - "3000:3000"
    networks:
      - frontend
    tty: true
    stdin_open: true

  nginx:
    build:
      context: ./nginx  
    container_name: nginx
    ports:
      - "80:80"
    volumes:
      - ./front/react-app/dist:/var/www
      - ./nginx/:/etc/nginx/conf.d/
    depends_on:
      - react_app
    networks:
      - frontend
networks:
  frontend:
    driver: bridge
  backend:
    driver: bridge

server {
    listen       80;

    location / {
        root   /var/www;
        index  index.html index.htm;
        try_files $uri /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location /api {
        proxy_pass http://flask:5000;
    }
}

Answer 1

自己解決しました
Axiosの接続先のポートが:5000で行っていたためでした
ポートを80にすることで接続できました。
ありがとうございます

Answer 2

このページが分かり安いと思います。

真ん中あたりに以下の記述がありますが、3u1さんはflaskというサービスを定義していないように見えます。
この辺考慮に入れて直したらいけるかもしれません。

各コンテナ間の通信はサービス名で行われる
そのため、nginxからweb1コンテナへのアクセスは「http://web1:5001/」となる

ところで、よくわからないのですが、react_appは何をしているのでしょうか？
nginxのボリュームマウントに- ./front/react-app/dist:/var/wwwとあり、nginxは他のコンテナに接続する必要無く、Front側のHTMLを返している様に見えるのですが、想定通りでしょうか？

flaskの各ページのUI側をreactにして、リソース取得をfetchとかで取得するように作っていると思いますが、この構成だとどういうアクセスをしようとしているのかがよくわかりませんでした。
この辺解決しないと一番上のを解決できたとしても上手く動かないかもしれません。

また、本件とは関係ありませんがflaskの実行をflask run --host 0.0.0.0 --port 5000としてやろうとしているように見えます。
flask runで実行されるのは開発サーバであり、本番環境での使用はNGです。
Apacheのmod_wsgiとか、NginxのuWSGIとか、gunicornとかを使って起動し、Webサーバ(ApacheやらNginxやらIISやら)を通してやりとりする形に直した方が安全と思います。

Comments

[3u1]

おっしゃるとおりなのですが、コンテナ名で転送できております
サービス名：flask_app
コンテナ名：flask

>ところで、よくわからないのですが、react_appは何をしているのでしょうか？
>nginxのボリュームマウントに- ./front/react-app/dist:/var/wwwとあり、nginxは他のコンテナに接続する必要無く、Front側のHTMLを返している様に見えるのですが、想定通りでしょうか？

ご指摘のとおりFront側のHTMLを返しているだけです。
reactからリソース取得はaixosをつかってflaskのAPIを呼び出しております

>flask runで実行されるのは開発サーバであり、本番環境での使用はNGです。
社内システムのため、そこまで考慮が至っておりませんでした。
そのあたりの連携は別途調べてみます