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

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

ただいまの
回答率

90.48%

  • JavaScript

    17078questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ruby on Rails

    7513questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • API

    1566questions

    APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

  • React.js

    875questions

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

  • Docker

    771questions

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

Fetch APIが届かない【Docker/React/Rails API】

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 277

sunnytj

score 10

Docker上でReactとRails(+DB)、nginxを動かしているのですが、ReactからRails API modeにFetchを送っても届きません。
React側では以下のようなメソッドを実行しています
172.19.0.3はRailsのコンテナのIPアドレスです

  handleGet() {
    fetch('http://172.19.0.3:3001/users')
      .then(response => {
        return response.json();
      })
      .then(json => {
        console.log(json);
      })
  }


Rails(API)側ではこのような実装です

  # GET /users
  def index
    @users = User.all

    render json: @users
  end


corsの許可は以下のようにしています(nginxのIPアドレス)

    config.action_dispatch.default_headers = {
      'Access-Control-Allow-Origin' => 'http://172.19.0.5:80',
      'Access-Control-Request-Method' => '*'
    }


React側のコンテナに入りcurlでAPIにアクセスするとjsonが返ってくるのですが、実際にブラウザからの操作でFetchを投げるとエラーになります
コンテナ内でのcurl

$ curl http://172.19.0.3:3001/users #正常に動作する


ブラウザのコンソール

GET http://172.19.0.3:3001/users 0 ()
ncaught (in promise) TypeError: Failed to fetch

ちなみに、外部レンタルサーバーにjsonを返すPHPファイルを設置しアクセスしたところ、正常に動作したのでDockerでの問題と思われます。IPアドレスをlocalhostにしてもダメでした。

解決方法ご存知の方いらっしゃいましたらよろしくお願いいたします…

docker-compose.ymlです

version: '3'

volumes:
  store:
    driver: local
  bundle:
    driver: local

services:
  nginx:
    build: ./nginx
    ports:
      - 8080:8080
    expose:
      - "8080"
    volumes:
      - ./frontend/dist:/wwwroot:ro
    links:
      - web
  frontend:
    build: ./frontend
    volumes:
      - ./frontend/src:/app/src
      - ./frontend/dist:/app/dist
    links:
      - web
  web:
    build: .
    ports:
      - 3001:3001
    expose:
      - "3001"
    volumes:
      - .:/app
      - bundle:/usr/local/bundle
    links:
      - db
    stdin_open: true
    tty: true
    command: ./scripts/backend.sh
    environment: &app_env
      PORT: 3001
      DB_HOST: db
      DB_PORT: 5432
      DB_NAME: rails_docker_database
      DB_USER: postgres
      DB_PSWD: postgres
  db:
    image: postgres:latest
    ports:
      - 5432:5432
    volumes:
      - store:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: rails_docker_database
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • sunnytj

    2018/05/05 21:52

    application.rbで設定しています(追記しました)

    キャンセル

  • dyoshikawa

    2018/05/05 22:09

    ありがとうございます。ブラウザでrailsが返すjsonを見ることはできますか?

    キャンセル

  • sunnytj

    2018/05/05 22:40

    ブラウザで直接アクセスした時とコンテナ内でcurlを実行した時の画像を添付しました、見辛いと思いますがよろしくお願いいたします

    キャンセル

回答 2

checkベストアンサー

+2

追記ありがとうございます。
fetchにもcors対応ありますので、一度お試し下さい。

  handleGet() {
    fetch('http://172.19.0.3:3001/users', { mode: 'cors' })
      .then(response => {
        return response.json();
      })
      .then(json => {
        console.log(json);
      })
  }

https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34

 追記

https://qiita.com/IzumiSy/items/c10949e9a00d1c61613c
https://qiita.com/c5meru/items/1c921676de8a5a038f70

このあたり参考に手元でやってみたのですが、力及ばず解決できませんでした。申し訳ないです。
個人的には、フロントエンドJavascriptはブラウザで動作するため、無理にDockerizeする必要はないと思っています。
他に回答者の方が現れず、解決しないようでしたら、サーバー側のみDockerの構成で開発することもご検討下さい。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/05 23:34

    ありがとうございます、申し訳ないのですがmode: 'cors'は既に試していてダメでした…

    キャンセル

  • 2018/05/05 23:53

    そうですか。解決できるかわかりませんが、質問にdocker-compose.ymlも貼って頂けると幸いです。返信明日になると思いますが・・・

    キャンセル

  • 2018/05/06 00:04

    追記いたしました、お付き合い本当にありがとうございます…!

    キャンセル

  • 2018/05/07 00:30

    本当にありがとうございました!構成等もう一度検討して見ます

    キャンセル

  • 2018/05/07 00:31

    いえ、解決できずすみません。開発応援しています。

    キャンセル

  • 2018/05/07 03:50

    rails側のcors設定をrack-corsで設定し直したところ解決しました、ありがとうございます!

    キャンセル

+1

dyoshikawaさんに載せていただいたこちらのQiitaを参考にRails側のcors設定をしたら解決しました。
全てlocalhostで指定しています。
https://qiita.com/IzumiSy/items/c10949e9a00d1c61613c

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/07 12:37

    解決して良かったです。私の方が勉強になりました。ありがとうございました。

    キャンセル

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

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    Docker+Nginxでリバースプロキシをやりたい

    前提・実現したいこと Dockerで立てたNginxで、nginx-proxyを使わずURLのパスによってDockerで立てた複数のWebサービスにアクセスできるようにしたいと思

  • 解決済

    docker-composeでのPostgreSQL接続

    前提・実現したいこと dockerの練習として、docker-composeでpostgresqlを扱おうとしています。 発生している問題・エラーメッセージ 0 info

  • 解決済

    (再質問)docker/PG::ConnectionBad

    本日dockerの教科書を買って、分からない所は読み飛ばして読んだのですが、エラーを解決する事が出来ないので、再度質問させてください。 開発環境 mac os: sierr

  • 受付中

    docker-compose buildでエラー

    実現したいこと Docker-composeにてnode.jsをインストールしようとしたら以下のエラーがでてしまいました。 プロキシ環境のためプロキシ設定が誤っているのかと思っ

  • 解決済

    Docker開発のイメージが掴めない

    すみません。 Docker初学者です。 Dockerfileでイメージを生成し、docker-compose.ymlファイルに記述して、その2つのファイルをチームの人に共有させ

  • 解決済

    docker-composeによるMySQLの設定

    dockercomposeを使ってWebアプリの開発環境を作っています。 下記のようなymlファイルを作成し,upコマンドでを実行したところエラーが発生してMySQLのコンテナが停

  • 解決済

    docker-composeで立ち上げたMySQLに接続できない

    docker-composeでMySQLを立ち上げるテストをしています. 以下のdocker-compose.ymlを用意,upします. version: '3' servic

  • 受付中

    curl: (7) Failed to connect to 127.0.0.1 port 80: ...

    ホストからdockerコンテナ内のnginxにcurl http://127.0.0.1:80/でアクセスして動いているかどうか確認したいです。docker psではコンテナ自体の

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

  • JavaScript

    17078questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ruby on Rails

    7513questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • API

    1566questions

    APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

  • React.js

    875questions

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

  • Docker

    771questions

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