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

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

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

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

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

React.js

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

Q&A

0回答

2240閲覧

フロントエンドとバックエンドを切り離して開発する場合の通信方法

atemu

総合スコア94

docker-compose

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

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

React.js

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

0グッド

0クリップ

投稿2018/08/29 11:27

フロントエンドとバックエンドを切り離して開発しています。

フロントエンドにはReact、バックエンドにはLaravelを採用しています。
なお、Laravelの中にReactがあるのではなく、LaravelはAPIを提供するのみ、Reactは単体で開発をしています。
そこで、ReactからLaravelのAPIに通信する際に困っています。
現在、docker-composeでそれぞれfrontendサービスとbackendサービスが立ち上がっており、それらをまとめるnginxサービスがある、という形になっております。
nginxサービスでは、8080ポートにフロントエンド(React)、8081ポートにバックエンド(Laravel)がつながるようになっています。

私の開発事例に特化した回答でなくてもよいので、フロントエンドとバックエンドを切り離して、docker-composeを使用した開発をする際に、どのようなAPI通信を行うべきかなど、参考になる記事やコメントがありましたらよろしくお願いします。

ファイル階層はこんな感じです。

  • backend/
  • frontend/
  • database/
  • nginx/
  • docker-compose.yml

また、docker-compose.ymlは以下の通りです。

version: '2' services: frontend: build: ./frontend ports: - "3000:3000" volumes: - ./frontend:/frontend environment: - CHOKIDAR_USEPOLLING=true tty: true backend: build: ./backend ports: - "8050:80" volumes: - ./backend:/backend depends_on: - database database: build: ./database environment: - MYSQL_ROOT_PASSWORD=xxx - MYSQL_DATABASE=xxx tty: true nginx: build: ./nginx ports: - "8080:8080" - "8081:8081" volumes: - ./nginx/docker-config:/etc/nginx/conf.d depends_on: - frontend - backend

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/08/29 14:15

> そこで、ReactからLaravelのAPIに通信する際に困っています。 具体的にどういうことに困っているのかを書いて頂かないことには回答難しいです。
atemu

2018/08/30 07:29

説明が足りず大変申し訳ありません。どのように接続すればよいか分からないということです。reactにはaxiosをインストールしてありますが、axios.get('http://backend')という風にしても当然接続することができません。access-control-allow-originなどの設定をLaravel側で行って、axios.get('http://dockermachine:8081')とした場合には接続できましたが、Laravel側の設定はなくてもできるんじゃないのかなあ、という風に感じたので質問したのです。よろしくお願いします。
退会済みユーザー

退会済みユーザー

2018/08/30 07:35

それで合っていますよ。CORS対応は必要です。
atemu

2018/08/30 07:39

やはり必要なのですね!ありがとうございます。ちなみにですが、nginx側でフロントエンドとバックエンドを同じポートにして、/apiから始まるものをLaravel側のAPI提供として、CORS設定無しでAPI通信するとした場合、何かデメリットはありますか?(まだ試してみていないのですが…)
退会済みユーザー

退会済みユーザー

2018/08/31 04:02

ちょっとやりたいことが分からないので、試してみてうまく行かなければ具体的なソース等質問本文に追記して頂ければと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問