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

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

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

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

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Docker

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

Q&A

解決済

[Docker開発] Docker環境でAngular側からLaravel側のAPIが叩けない

wai_yamato
yamato

総合スコア1

docker-compose

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

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Docker

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

1回答

0グッド

0クリップ

366閲覧

投稿2022/10/10 17:26

編集2022/10/11 10:01

前提

初めまして、読んでいただきありがとうございます。
フロントエンドをAngular、バックエンドをLaravelで開発を行っております。
開発にはDockerを導入しております。

開発環境

環境

  • windows 11
  • Docker version 20.10.17
  • Docker Compose version 2.7.0
  • Angular CLI: 14.2.3
  • typescript 4.7.4
  • PHP 8.1.11
  • Laravel Framework 9.31.0
  • Laravel Sanctum

docker-compose container一覧

  • php
  • nginx
  • mysql
  • node.js(Angular14)
  1. 番号リスト

実現したいこと

フロントエンドとバックエンドをつなげたい。(Laravel側のAPIを実行したい)

現在AngularとLaravelのアプリをdocker-composerにて開発をしております。
開発時は以下の工程を実行しております。

  1. $docker-compose up -d  を使用して、コンテナを起動
  2. node.jsのコンテナで ng serve --proxy-config proxy.conf.json --host 0.0.0.0 --pollを実行
  3. Angular側からLaravel側に対し、request※1を行う。
  4. エラーメッセージが表示される

※1 requestのURLは(1)~(2)の方法で指定しております。
http://localhost:8080/api/login

(1) proxy.conf.jsonで http://localhost:8080/api までを指定
(2) login.service.tsで/api/loginを指定

→/apiを付けることで、先頭のurlを http://localhost:8080/api に変更する

3番のリクエストを正しく飛ばせるようにしたい。

フロントエンドURL
http://localhost:4200
バックエンドURL(nginxのURL)
http://localhost:8080

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

下記エラーによって、Angular側からのリクエストが
Laravelに到達しておりません。

[webpack-dev-server] [HPM] Error occurred while proxying request localhost:4200/api/login to http://localhost:8080/api [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)

該当のソースコード

Docker-compose.yml

Docker

1version: '3' 2 3services: 4 php: 5 build: 6 context: . 7 dockerfile: ./php/Dockerfile 8 volumes: 9 - ./src/:/php 10 web: 11 build: 12 context: . 13 dockerfile: ./nginx/Dockerfile 14 ports: 15 - 8080:80 16 depends_on: 17 - php 18 volumes: 19 - ./src/:/php 20 21 mysql: 22 build: 23 context: . 24 dockerfile: ./mysql/Dockerfile 25 ports: 26 - 3307:3306 27 env_file: .env.dev 28 environment: 29 TZ: 'Asia/Tokyo' 30 volumes: 31 - mysql-volume:/var/lib/mysql 32 node: 33 build: 34 context: . 35 dockerfile: ./node/Dockerfile 36 working_dir: /frontend 37 ports: 38 - 4200:4200 39 volumes: 40 - ./frontend:/frontend 41 tty: true 42 43volumes: 44 mysql-volume: 45 name: database-volumes

proxy.conf.json

proxy.conf.json

1{ 2 "/api": { 3 "target": "http://localhost:8080", 4 "secure": false 5 } 6}

login.service.ts

login.service.ts

cors.php

cors.php

1<?php 2 3return [ 4 'paths' => [ 5 'api/*', 6 'login', 7 'logout', 8 'sanctum/csrf-cookie' 9 ], 10 11 'allowed_methods' => ['*'], 12 13 'allowed_origins' => ['*'], 14 15 'allowed_origins_patterns' => [], 16 17 'allowed_headers' => ['*'], 18 19 'exposed_headers' => [], 20 21 'max_age' => 0, 22 23 'supports_credentials' => true, 24 25];

Route/api.php

api.php

1<?php 2 3use App\Http\Controllers\API\Auth\LoginController; 4use Illuminate\Http\Request; 5use Illuminate\Support\Facades\Route; 6 7Route::middleware('auth:sanctum')->get('/user', function (Request $request) { 8 return $request->user(); 9}); 10 11Route::post('/login', [LoginController::class, 'authenticate']);

RouteServiceProvider.php

1<?php 2 3namespace App\Providers; 4 5use Illuminate\Cache\RateLimiting\Limit; 6use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider; 7use Illuminate\Http\Request; 8use Illuminate\Support\Facades\RateLimiter; 9use Illuminate\Support\Facades\Route; 10 11class RouteServiceProvider extends ServiceProvider 12{ 13 public function boot() 14 { 15 $this->configureRateLimiting(); 16 17 $this->routes(function () { 18 Route::middleware('api') 19 ->prefix('api') 20 ->group(base_path('routes/api.php')); 21 }); 22 } 23

試したこと

  1. proxy.conf.jsonを "target": "http://web:8080" に書き換え実行→失敗

  2. PostmanからLaravelのApiURLを実行→成功

参考にしたURL

コメント

現在、corsの知識やDockerのネットワークの知識を入れているのですが、
解決できずにいます。

わかる方がいましたらご回答よろしくお願いいたします。

※初投稿となります。至らない点がありましたら、コメントで教えていただけると助かります。

以下のような質問にはグッドを送りましょう

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

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

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

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

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

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

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

適切な質問に修正を依頼しましょう。

回答1

0

自己解決

解決いたしました。

解決方法
proxy.conf.jsonを以下に書き換える

proxy.conf.json

1{ 2 "/api": { 3 "target": "http://web:80" 4 } 5} 6

変更ポイント
➀今まではDockerホストのポート番号を指定していました。
しかし、Dockerのホストから実行しているわけではないので、ポート番号をDocker内部の物に変更
変更前→変更後
8080→80


以下のサイトにも書いてあるようにlocalhostをサービス名に変更する
https://pokuwagata.hatenablog.com/entry/2019/07/28/191649
変更前→変更後
http://localhost→http://web

投稿2022/10/11 12:12

wai_yamato

総合スコア1

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

docker-compose

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

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Docker

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